🎨 Best Practices for Styling Mobile Apps

Styling plays a crucial role in building beautiful and maintainable React Native apps. Following best practices ensures consistency, better performance, and easier scalability. Here are some key takeaways:

✅ Use StyleSheet.create() – This optimizes performance by preventing unnecessary re-renders.

✅ Leverage Global Styles – Define common styles in a separate file to maintain consistency across the app.

✅ Use Theme-Based Styling – Implement dark mode and dynamic themes using context or state management.

✅ Avoid Inline Styles – Overusing inline styles leads to performance issues and redundant recalculations.

✅ Use Flexbox for Layouts – Flexbox provides a responsive and adaptive layout system.

✅ Styled Components – Reusable components for common UI elements.

By following these best practices, you can create visually appealing, efficient, and scalable React Native applications.

📖 Read more: Full Article Here

React Native Hub

🎯 Discriminated Unions: Managing Complex State in React Native

Handling complex state can lead to unexpected bugs if not structured properly. Discriminated unions provide a powerful way to manage state transitions explicitly, ensuring type safety and preventing invalid states.

🔹 What Are Discriminated Unions?

A discriminated union is a TypeScript feature that allows defining multiple state variations with a common “discriminator” property.

📌 Example: Managing Fetch States

type FetchState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: string[] }
  | { status: 'error'; error: string };

const fetchReducer = (state: FetchState, action: any): FetchState => {
  switch (action.type) {
    case 'FETCH_START':
      return { status: 'loading' };
    case 'FETCH_SUCCESS':
      return { status: 'success', data: action.payload };
    case 'FETCH_ERROR':
      return { status: 'error', error: action.payload };
    default:
      return state;
  }
};

✅ Why Use Discriminated Unions?

- Ensures state transitions are explicit and well-defined

- Prevents invalid states (e.g., having both data and `error`)

- Improves type safety and reduces runtime errors

By structuring your state this way, your application logic remains predictable and easier to maintain! 🚀

React Native Hub

🔹 Generics in React: Reusable & Flexible Components 🚀

Generics in TypeScript allow you to build reusable and strongly-typed components that adapt to different data structures. This is especially useful for handling lists, forms, or APIs where the structure varies.

📌 Example: A Reusable Table Component

type TableProps<T> = {
  data: T[];
  renderRow: (item: T) => React.ReactNode;
};

function Table<T>({ data, renderRow }: TableProps<T>) {
  return (
    <table>
      <tbody>{data.map((item, index) => <tr key={index}>{renderRow(item)}</tr>)}</tbody>
    </table>
  );
}

// Usage
type User = { id: number; name: string };
const users: User[] = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

<Tabledata={users}
  renderRow={(user) => (
    <>
      <td>{user.id}</td>
      <td>{user.name}</td>
    </>
  )}
/>;

🔥 Why Use Generics?

✅ Type-Safe: Enforces correct data structures at compile-time

✅ Reusable: Works with any data type, reducing duplicate code

✅ Flexible: Keeps your components dynamic without sacrificing type safety

By leveraging generics, you can build components that adapt to various use cases while maintaining clean and maintainable code! 💡

React Native Hub

What Is Cursor AI?

Cursor AI is an intelligent code editor built on Visual Studio Code, enhanced with robust AI capabilities. It offers features like:

✅ Autocompletion: Context-aware code suggestions.

✅ Code Generation: Write components, functions, or tests with natural language prompts.

✅ Debugging Assistance: Identify errors and receive fixes in real time.

✅ Documentation Search: Instant access to React Native APIs and libraries.

For React Native developers, this means faster iteration, reduced boilerplate code, and fewer context switches between tools.

https://www.cursor.com/

React Native Hub

Mapped Types: Transforming Props and State

Mapped types in TypeScript allow you to create new types by transforming existing ones. This is particularly useful for defining derived states, props, or configurations in React Native applications.

🔹 Example: Partial Form Props

Let's say you have a form with fields like name, email, and age. You can use mapped types to define an error object that corresponds to each field dynamically:

type FormValues = {
  name: string;
  email: string;
  age: number;
};

// Mapped Type for Errors
type FormErrors<T> = {
  [K in keyof T]?: string;
};

const errors: FormErrors<FormValues> = {
  name: "Name is required",
  email: "Email is invalid",
};

✅ Why It’s Useful:

🔹 Flexible Form Handling – Easily create types for form validation without duplicating fields.

🔹 Ensures Type Safety – Prevents typos and ensures every field has a corresponding error type.

🔹 Reusable & Scalable – Can be applied to API responses, configurations, and component props.

React Native Hub

From Solo to Duo: Transitioning to Pair Programming 👥

Working alone has its perks, but have you ever considered the power of pair programming? This article explores how switching from solo development to coding with a partner can boost productivity, improve code quality, and accelerate learning.

🚀 Read article here

Have you tried pair programming? Share your thoughts in the comments! 💬

React Native Hub

I've just published a new article

Check it out and let me know your thoughts! Your support means a lot. 🙌

👉 Read here: Why Every React Native Developer Should Understand useCallback

React Native Hub

🚀 Master `useRef` for Better TextInput Handling in React Native

Struggling with managing input fields efficiently? Instead of relying on state updates that cause unnecessary re-renders, useRef lets you interact directly with TextInput methods.

Why Use `useRef` with TextInput?

✅ Avoid Unnecessary Re-renders – Since useRef doesn’t trigger component updates, it’s great for performance.

✅ Easily Manage Focus – You can programmatically focus on an input field when needed.

✅ Access Input Methods Directly – Clear, blur, or manipulate text fields without updating state

Example Usage:

import React, { useRef, useState } from "react";
import { TextInput, Button, View } from "react-native";

const InputExample = () => {
  const inputRef = useRef<TextInput>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  const clearInput = () => {
    setValue("");
    inputRef.current?.clear();
  };
  
  const handleSubmit = () => {
    const inputValue = inputRef.current?.value || ''; // Get the current value
    console.log(inputValue); // Log the value when the user submits
  };

  return (
    <View>
      <TextInput
       ref={inputRef}
        onChangeText={(e) => (inputRef.current.value = e)} // Store the value in the ref
        placeholder="Enter text..."
        style={{ borderBottomWidth: 1, padding: 8 }}
      />
      <Button title="Focus" onPress={focusInput} />
      <Button title="Clear" onPress={clearInput} />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default InputExample;

React Native Hub

Mobile Bridge: Making WebViews Feel Native

Shopify's engineering team shares how they’ve enhanced the WebView experience using Mobile Bridge 

🔍 What’s Inside:

- How Shopify allows WebViews to access native features (like camera, auth, navigation)

- Ensuring seamless communication between JavaScript and native platforms

- Techniques to make hybrid apps feel fully native to users

Read here

React Native Hub

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