react-native

React Native (Expo) Best Practices

Overview

Aspect	Recommendation
Framework	Expo SDK 54+
Router	Expo Router (file-based)
Styling	NativeWind (Tailwind) or StyleSheet
State	Zustand or React Context
Navigation	Stack, Tabs, Drawer via Expo Router

---

Project Structure

app/
├── (tabs)/                 # Tab navigator group
│   ├── _layout.tsx         # Tab layout config
│   ├── index.tsx           # Home tab
│   └── profile.tsx         # Profile tab
├── (auth)/                 # Auth flow group
│   ├── _layout.tsx
│   ├── login.tsx
│   └── register.tsx
├── [id].tsx                # Dynamic route
├── _layout.tsx             # Root layout
├── +not-found.tsx          # 404 page
└── modal.tsx               # Modal screen
components/
├── ui/                     # Reusable UI components
└── ...
hooks/
├── useAuth.ts
└── ...
lib/
├── api.ts
└── storage.ts

---

Expo Router Navigation

Root Layout

// app/_layout.tsx
import { Stack } from 'expo-router'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import { useEffect } from 'react'

SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  })

  useEffect(() => {
    if (loaded) SplashScreen.hideAsync()
  }, [loaded])

  if (!loaded) return null

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
    </Stack>
  )
}

Tab Navigator

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router'
import { Ionicons } from '@expo/vector-icons'

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#007AFF' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  )
}