Single Responsibility Principle (SRP)

✅ Definition: A component should have only one reason to change, meaning it should do one thing and do it well.

✅ In React: Break down large components into smaller, reusable pieces, each handling a single responsibility.

Not following SRP: In this example, the UserProfile component handles fetching data, managing state, and rendering the UI—all in one component.

// ❌ BAD EXAMPLE - Violating SRP
import React, { useState, useEffect } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch('https://api.example.com/user');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUserData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

export default UserProfile;

Following SRP: Now, let’s refactor the code to adhere to the Single Responsibility Principle by breaking it into three separate components.

1. Custom Hook for Data Fetching (`useUserData`)

// ✅ GOOD EXAMPLE - Following SRP
import { useState, useEffect } from 'react';

const useUserData = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch('https://api.example.com/user');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUserData();
  }, []);

  return { user, loading, error };
};

export default useUserData;

2. Loading and Error Handling Component (`UserInfo`)

// ✅ GOOD EXAMPLE - Following SRP
import React from 'react';

const UserInfo = ({ user, loading, error }) => {
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

export default UserInfo;

3. Main Component (`UserProfile`)

// ✅ GOOD EXAMPLE - Following SRP
import React from 'react';
import useUserData from './useUserData';
import UserInfo from './UserInfo';

const UserProfile = () => {
  const { user, loading, error } = useUserData();

  return <UserInfo user={user} loading={loading} error={error} />;
};

export default UserProfile;

React Native Hub

Open/Closed Principle (OCP)

✅ Definition: Software entities should be open for extension but closed for modification.

✅ In React: Use higher-order components (HOCs), render props, or composition to extend component behaviour without modifying the existing code.

Not following OCP: In this example, the Button component has different styles based on the type prop. Every time a new button style is needed, we have to modify the existing Button component.

// ❌ BAD EXAMPLE - Violating OCP
import React from 'react';

const Button = ({ type, label }) => {
  let style = {};

  if (type === 'primary') {
    style = { backgroundColor: 'blue', color: 'white' };
  } else if (type === 'secondary') {
    style = { backgroundColor: 'gray', color: 'white' };
  } else if (type === 'danger') {
    style = { backgroundColor: 'red', color: 'white' };
  }

  return <button style={style}>{label}</button>;
};

export default Button;

Every time we want to add a new button type, we need to modify the existing component by adding a new if or else if conditions, which violates OCP.

Following OCP: Instead of modifying the Button component for every new style, we can create a Higher-Order Component (HOC) that adds different styles based on the button type. This way, the Button component remains unchanged, and we can extend its behaviour by wrapping it with different HOCs.

// ✅ GOOD EXAMPLE - Following OCP
import React from 'react';

// Base Button Component
const Button = ({ style, label }) => {
  return <button style={style}>{label}</button>;
};

// HOC for Primary Button
const withPrimaryStyle = (WrappedComponent) => {
  return (props) => {
    const style = { backgroundColor: 'blue', color: 'white' };
    return <WrappedComponent {...props} style={style} />;
  };
};

// HOC for Secondary Button
const withSecondaryStyle = (WrappedComponent) => {
  return (props) => {
    const style = { backgroundColor: 'gray', color: 'white' };
    return <WrappedComponent {...props} style={style} />;
  };
};

// HOC for Danger Button
const withDangerStyle = (WrappedComponent) => {
  return (props) => {
    const style = { backgroundColor: 'red', color: 'white' };
    return <WrappedComponent {...props} style={style} />;
  };
};

// Use the HOCs
const PrimaryButton = withPrimaryStyle(Button);
const SecondaryButton = withSecondaryStyle(Button);
const DangerButton = withDangerStyle(Button);

const App = () => (
  <div>
    <PrimaryButton label="Primary Button" />
    <SecondaryButton label="Secondary Button" />
    <DangerButton label="Danger Button" />
  </div>
);

export default App;

React Native Hub

Liskov Substitution Principle (LSP)

👉 Read the Post in Telegraph

React Native Hub

Interface Segregation Principle (ISP)

👉 Read the Post in Telegraph

React Native Hub

Building a scalable React Native app requires a well-structured codebase, modular design, and best practices. This example show how to set up folder structure for Expo Router-based project with Zustand for state management, Axios for API handling, and Maestro for E2E testing. This structure ensures maintainability, scalability, and better developer experience.

Project Structure 📂

Here’s a well-organized structure for your Expo React Native project:

AwesomeProject/
├── app/ # Expo Router Pages (Screens Only)
│ ├── index.tsx # Home screen (“/”)
│ ├── _layout.tsx # Global layout
│ ├── auth/
│ │ ├── index.tsx # “/auth” (Auth entry point)
│ │ ├── login.tsx # “/auth/login”
│ │ ├── signup.tsx # “/auth/signup”
│ ├── chat/
│ │ ├── index.tsx # “/chat” (Chat List)
│ │ ├── conversation.tsx # “/chat/conversation”
│ ├── settings/
│ │ ├── index.tsx # “/settings”
│ │ ├── notifications.tsx # “/settings/notifications”
│ │ ├── security.tsx # “/settings/security”
│ ├── profile/
│ │ ├── index.tsx # “/profile”
│ │ ├── edit.tsx # “/profile/edit”
│ │ ├── preferences.tsx # “/profile/preferences”
│
├── modules/ # Feature Modules
│ ├── auth/
│ │ ├── components/
│ │ │ ├── LoginForm.tsx
│ │ │ ├── SignupForm.tsx
│ │ ├── hooks/
│ │ │ ├── useAuth.ts
│ │ ├── services/
│ │ │ ├── authService.ts
│ │ ├── store/
│ │ │ ├── useAuthStore.ts
│ │ ├── validation/
│ │ │ ├── authSchema.ts
│
│ ├── chat/
│ │ ├── components/
│ │ │ ├── MessageBubble.tsx
│ │ │ ├── ChatInput.tsx
│ │ ├── hooks/
│ │ │ ├── useChat.ts
│ │ ├── services/
│ │ │ ├── chatService.ts
│ │ ├── store/
│ │ │ ├── useChatStore.ts
│ │ ├── utils/
│ │ │ ├── chatHelpers.ts # Helper functions for chat
│
│ ├── settings/
│ │ ├── components/
│ │ │ ├── NotificationToggle.tsx
│ │ │ ├── SecuritySettings.tsx
│ │ ├── store/
│ │ │ ├── useSettingsStore.ts
│
│ ├── profile/
│ │ ├── components/
│ │ │ ├── AvatarUpload.tsx
│ │ │ ├── ProfileForm.tsx
│ │ ├── hooks/
│ │ │ ├── useProfile.ts
│ │ ├── services/
│ │ │ ├── profileService.ts
│ │ ├── store/
│ │ │ ├── useProfileStore.ts
│
├── components/ # Global Reusable Components
│ ├── Button.tsx
│ ├── Input.tsx
│ ├── Avatar.tsx
│ ├── Modal.tsx # Custom modal component
│ ├── Loader.tsx # Loader animation
│
├── hooks/ # Global Hooks
│ ├── useTheme.ts
│ ├── useNetwork.ts
│ ├── useNotifications.ts # Handle push notifications
│
├── store/ # Global Zustand Stores
│ ├── useThemeStore.ts
│ ├── useUserStore.ts
│
├── services/ # Global API Services
│ ├── apiClient.ts # Axios Setup
│ ├── notificationService.ts
│ ├── uploadService.ts # File/Image Upload Service
│
├── utils/ # Utility Functions
│ ├── formatDate.ts
│ ├── validateEmail.ts
│ ├── navigation.ts
│ ├── fileHelpers.ts # Helper functions for file handling
│
├── localization/ # Multi-Language Support
│ ├── en.json
│ ├── es.json
│ ├── index.ts
│
├── env/ # Environment-Based Configurations
│ ├── .env.development
│ ├── .env.production
│ ├── .env.staging
│
├── __tests__/ # Tests
│ ├── e2e/
│ ├── unit/
│ ├── jest.setup.ts
│
├── .husky/ # Git Hooks
├── tailwind.config.js # Tailwind Configuration
├── app.config.ts # Expo Configuration
├── tsconfig.json # TypeScript Configuration
├── package.json # Dependencies
├── README.md # Documentation

React Native Hub

useLocalStorage — Persist Data Like a Pro in React Native

Ever needed to store user preferences or tokens in your React Native app?Instead of manually interacting with AsyncStorage, use this custom hook to simplify the process and write cleaner code.

✅ Implementation using @react-native-async-storage/async-storage:

import { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

function useAsyncStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(initialValue);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadValue = async () => {
      try {
        const item = await AsyncStorage.getItem(key);
        setStoredValue(item != null ? JSON.parse(item) : initialValue);
      } catch (error) {
        console.error("Error loading from AsyncStorage", error);
      } finally {
        setIsLoading(false);
      }
    };
    loadValue();
  }, [key]);

  const setValue = async (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error("Error setting AsyncStorage", error);
    }
  };

  return [storedValue, setValue, isLoading];
}

export default useAsyncStorage;

🧪 Usage Example: Theme Toggle

import React, { useEffect } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import useAsyncStorage from "./useAsyncStorage";

const ThemeSwitcher = () => {
  const [theme, setTheme] = useAsyncStorage("theme", "light");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <View style={[
        styles.container,
        theme === "dark" ? styles.dark : styles.light,
      ]}
    >
      <Text style={styles.text}>Current Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  dark: {
    backgroundColor: "#222",
  },
  light: {
    backgroundColor: "#fff",
  },
  text: {
    fontSize: 20,
    marginBottom: 16,
  },
});

export default ThemeSwitcher;

React Native Hub | #customhooks

App.js Conf 2025 has officially started! 😎🎉

Here’s today’s lineup:

→ Intro by Marcin Skotniczny
→ Keynote by Charlie Cheever and Jon Samp
→ Deploy Everywhere with Expo Router by Evan Bacon
→ Expo on Orbit by Aaron Grider
→ Life After Legacy: The New Architecture Future by Nico Corti and Riccardo Cipolleschi
→ Legend List: Optimizing for Peak List Performance by Jay Meistrich
→ Mozart Never Had React Native: You Do by Kim Chouard
→ Radon IDE – Code with Glee by Krzysztof Magiera
→ WebGPU – High performant 3D animations in React Native by Krzysztof Piaskowy
→ Scaling Enterprise CI/CD: A Migration Success Story by Michael Blanchard
→ Taking the Party Outside the App with App Clip and Live Activity by Alex Chou
→ The Bigger Picture by Anisha Malde and Łukasz Chludziński
→ Running Small Language Models on Your Phone: Bringing AI to Mobile with React Native and ExecuTorch by Mateusz Kopciński
→ Building React Native Apps with Premium Feel and Quality UX by Saúl Sharma

Link to the stream: https://www.youtube.com/live/K2JTTKpptGs?si=A4_g8DHiouDmrWk6

React Native Hub

Back for day two of App.js Conf. 👨‍💻✨

Here’s what’s on the agenda today:

→ Large-Scale React Native Development in the Age of AI by Rafael Mendiola
→ Brownfield React Native at Scale: Ship Dozens of Micro-Apps Daily by Sojin Park
→ Embracing Native Code and Capabilities in Your Expo App by Keith Kurak
→ Towards a Stable JavaScript API by Alex Hunt
→ Le Chat and a Brief History of Streaming by Delphine Bugner
→ Everybody Can Cook with React Native by Enzo Manuel Mangano
→ TanStack Query in Expo Apps: Improving DX and UX Like No Other by Devlin Duldulao
→ Let's Go Live: React Native Live Streaming With Zero WebRTC Knowledge by Miłosz Filimowski
→ Building Secure React Native Apps by Jacob Arvidsson
→ The Future of Authentication in React Native by Laura Beatris
→ Software Composing: Expo Development for Your PM by Tomasz Sułkowski
→ Keyboard Management Evolution in React Native by Kiryl Ziusko
→ Unlocking Revenue: Monetizing Your React Native App with In-App Purchases by Perttu Lähteenlahti

Link to the stream: https://www.youtube.com/live/UTaJlqhTk2g?si=HZF4wIO4DmglErd9

React Native Hub

🚀 React Native 0.80 is out! Key updates you should know:

- Upgrades to React 19.1.0 for improved stability and bug fixes

- Introduces a new Strict TypeScript API (opt-in) with enhanced typings and reduced breaking changes

- Freezes the Legacy Architecture, paving the way for better future performance—watch for compatibility warnings

- iOS builds faster (up to ~12% improvement) with experimental prebuilt dependencies

- Android APK size drops (~1 MB) thanks to Interprocedural Optimization (IPO)

- The New App screen is now modular and visually refreshed

- Last RN version with bundled JavaScriptCore (JSC) — future releases will require community JSC

Read the full article here

React Native Hub