react-native

React Native Mobile Development

Expert guidance for building production-ready React Native applications. Covers architecture decisions, performance optimization, navigation, state management, and native integration.

Project Setup and Workflow Selection

BAD: Starting with bare workflow without justification

npx react-native init MyApp
# Adds unnecessary native complexity from day one
# Requires Xcode/Android Studio setup immediately

GOOD: Start with Expo, eject only when needed

npx create-expo-app@latest MyApp --template blank-typescript
cd MyApp

# Expo provides:
# - Instant dev environment (no Xcode/Android Studio)
# - OTA updates via EAS
# - Prebuild for native customization
# - Standard libraries (camera, location, etc.)

# When you need custom native code:
npx expo prebuild
# Generates ios/ and android/ directories
# Maintains Expo libraries, adds native flexibility

When to use bare workflow:

• Heavy native module customization required
• Existing native iOS/Android codebase integration
• Libraries incompatible with Expo (rare in 2026)

Navigation Architecture

BAD: Navigation without type safety or deep linking

// No type checking on navigation params
function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Profile"
      onPress={() => navigation.navigate('Profile', { userId: '123' })}
      // Typo in route name causes runtime crash
    />
  );
}

GOOD: React Navigation with TypeScript and deep linking

// types/navigation.ts
import { NavigationProp } from '@react-navigation/native';

export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: { section?: 'privacy' | 'notifications' };
};

export type AppNavigation = NavigationProp<RootStackParamList>;

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator<RootStackParamList>();

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Profile: 'user/:userId',
      Settings: 'settings/:section?',
    },
  },
};

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// HomeScreen.tsx
import { useNavigation } from '@react-navigation/native';
import type { AppNavigation } from './types/navigation';

function HomeScreen() {
  const navigation = useNavigation<AppNavigation>();

  return (
    <Button
      title="Go to Profile"
      onPress={() => navigation.navigate('Profile', { userId: '123' })}
      // TypeScript validates route name and params
    />
  );
}