react-native

| Framework | Use When |

| ------------------------ | ----------------------------------------------- |

| Expo (Recommended) | Most apps, faster development, managed workflow |

| React Native CLI | Need custom native modules, brownfield apps |

| Expo with Dev Client | Best of both - Expo DX with native modules |

---

Expo (Recommended)

```bash

npx create-expo-app@latest my-app

cd my-app

npx expo start

```

React Native CLI

```bash

npx @react-native-community/cli init MyApp

cd MyApp

npx react-native run-ios # or run-android

```

---

Basic Structure

```tsx

import { View, Text, StyleSheet, ScrollView, SafeAreaView } from "react-native";

export default function App() {

return (

Hello World

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: "#fff",

},

content: {

padding: 16,

},

title: {

fontSize: 24,

fontWeight: "bold",

},

});

```

Common Components

```tsx

import {

View,

Text,

Image,

TextInput,

TouchableOpacity,

Pressable,

FlatList,

ActivityIndicator,

Modal,

Switch,

} from 'react-native';

// Touchable with feedback

onPress={handlePress}

style={({ pressed }) => [

styles.button,

pressed && styles.buttonPressed,

]}

>

Press Me

// Text Input

value={text}

onChangeText={setText}

placeholder="Enter text"

style={styles.input}

autoCapitalize="none"

keyboardType="email-address"

returnKeyType="done"

onSubmitEditing={handleSubmit}

/>

// Image

source={{ uri: 'https://example.com/image.jpg' }}

style={{ width: 100, height: 100 }}

resizeMode="cover"

/>

```

---

React Navigation Setup

```bash

npm install @react-navigation/native @react-navigation/native-stack

npx expo install react-native-screens react-native-safe-area-context

```

Stack Navigation

```tsx

import { NavigationContainer } from "@react-navigation/native";

import { createNativeStackNavigator } from "@react-navigation/native-stack";

type RootStackParamList = {

Home: undefined;

Details: { itemId: string };

};

const Stack = createNativeStackNavigator();

export default function App() {

return (

name="Home"

component={HomeScreen}

options={{ title: "My App" }}

/>

name="Details"

component={DetailsScreen}

options={({ route }) => ({ title: route.params.itemId })}

/>

);

}

// Navigate

navigation.navigate("Details", { itemId: "123" });

// Go back

navigation.goBack();

```

Tab Navigation

```tsx

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

function TabNavigator() {

return (

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

const iconName =

route.name === "Home"

? focused

? "home"

: "home-outline"

: focused

? "settings"

: "settings-outline";

return ;

},

})}

>

);

}

```

---

Zustand (Recommended)

```tsx

import { create } from "zustand";

import { persist, createJSONStorage } from "zustand/middleware";

import AsyncStorage from "@react-native-async-storage/async-storage";

interface AuthStore {

user: User | null;

token: string | null;

login: (user: User, token: string) => void;

logout: () => void;

}

export const useAuthStore = create()(

persist(

(set) => ({

user: null,

token: null,

login: (user, token) => set({ user, token }),

logout: () => set({ user: null, token: null }),

}),

{

name: "auth-storage",

storage: createJSONStorage(() => AsyncStorage),

},

),

);

```

React Query

```tsx

import {

QueryClient,

QueryClientProvider,

useQuery,

} from "@tanstack/react-query";

const queryClient = new QueryClient();

// Wrap app

;

// Use in component

function ItemList() {

const { data, isLoading, error, refetch } = useQuery({

queryKey: ["items"],

queryFn: fetchItems,

});

if (isLoading) return ;

if (error) return Error: {error.message};

return (

data={data}

renderItem={({ item }) => }

keyExtractor={(item) => item.id}

onRefresh={refetch}

refreshing={isLoading}

/>

);

}

```

---

StyleSheet

```tsx

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: "#ffffff",

},

row: {

flexDirection: "row",

alignItems: "center",

justifyContent: "space-between",

padding: 16,

borderBottomWidth: StyleSheet.hairlineWidth,

borderBottomColor: "#ccc",

},

text: {

fontSize: 16,

color: "#333",

},

shadow: {

shadowColor: "#000",

shadowOffset: { width: 0, height: 2 },

shadowOpacity: 0.1,

shadowRadius: 4,

elevation: 3, // Android

},

});

```

NativeWind (Tailwind for RN)

```bash

npm install nativewind tailwindcss

```

```tsx

import { Text, View } from "react-native";

export function Card() {

return (

Card Title

Card content goes here

);

}

```

---

Camera (Expo)

```tsx

import { Camera, CameraType } from "expo-camera";

function CameraScreen() {

const [permission, requestPermission] = Camera.useCameraPermissions();

const cameraRef = useRef(null);

const takePicture = async () => {

if (cameraRef.current) {

const photo = await cameraRef.current.takePictureAsync();

console.log(photo.uri);

}

};

if (!permission?.granted) {

return ;

}

return (

Take Photo

);

}

```

Push Notifications (Expo)

```tsx

import * as Notifications from "expo-notifications";

import { useEffect } from "react";

Notifications.setNotificationHandler({

handleNotification: async () => ({

shouldShowAlert: true,

shouldPlaySound: true,

shouldSetBadge: false,

}),

});

async function registerForPushNotifications() {

const { status } = await Notifications.requestPermissionsAsync();

if (status !== "granted") return;

const token = await Notifications.getExpoPushTokenAsync();

return token.data;

}

// Listen for notifications

useEffect(() => {

const subscription = Notifications.addNotificationReceivedListener(

(notification) => {

console.log(notification);

},

);

return () => subscription.remove();

}, []);

```

Location

```tsx

import * as Location from "expo-location";

async function getLocation() {

const { status } = await Location.requestForegroundPermissionsAsync();

if (status !== "granted") return;

const location = await Location.getCurrentPositionAsync({});

return {

latitude: location.coords.latitude,

longitude: location.coords.longitude,

};

}

```

---

FlatList Optimization

```tsx

data={items}

renderItem={renderItem}

keyExtractor={(item) => item.id}

// Performance optimizations

initialNumToRender={10}

maxToRenderPerBatch={10}

windowSize={5}

removeClippedSubviews={true}

getItemLayout={(data, index) => ({

length: ITEM_HEIGHT,

offset: ITEM_HEIGHT * index,

index,

})}

/>;

// Memoize render item

const renderItem = useCallback(

({ item }: { item: Item }) => ,

[],

);

const MemoizedItem = memo(({ item }: { item: Item }) => (

{item.name}

));

```

Image Optimization

```tsx

import { Image } from "expo-image";

source={{ uri: imageUrl }}

style={{ width: 200, height: 200 }}

contentFit="cover"

placeholder={blurhash}

transition={200}

cachePolicy="memory-disk"

/>;

```

---

Jest + React Native Testing Library

```tsx

import { render, fireEvent, waitFor } from "@testing-library/react-native";

import { LoginScreen } from "./LoginScreen";

describe("LoginScreen", () => {

it("should login successfully", async () => {

const onLogin = jest.fn();

const { getByPlaceholderText, getByText } = render(

,

);

fireEvent.changeText(getByPlaceholderText("Email"), "test@example.com");

fireEvent.changeText(getByPlaceholderText("Password"), "password123");

fireEvent.press(getByText("Login"));

await waitFor(() => {

expect(onLogin).toHaveBeenCalledWith({

email: "test@example.com",

password: "password123",

});

});

});

});

```

---

Expo EAS Build

```bash

# Install EAS CLI

npm install -g eas-cli

# Configure

eas build:configure

# Build for iOS

eas build --platform ios

# Build for Android

eas build --platform android

# Submit to stores

eas submit --platform ios

eas submit --platform android

```

app.json Configuration

```json

{

"expo": {

"name": "My App",

"slug": "my-app",

"version": "1.0.0",

"ios": {

"bundleIdentifier": "com.mycompany.myapp",

"buildNumber": "1"

},

"android": {

"package": "com.mycompany.myapp",

"versionCode": 1

}

}

}

```

---

DO:

• Use Expo for faster development
• Implement proper TypeScript types
• Use FlashList for large lists
• Handle keyboard properly
• Test on real devices

DON'T:

• Inline styles in render
• Skip memoization for lists
• Ignore platform differences
• Block JS thread with heavy computation
• Forget to handle deep linking