react-native-navigation

• React Native basics (components, styling)
• TypeScript fundamentals
• Understanding of React context

After completing this skill, you will be able to:

• [ ] Set up React Navigation with TypeScript
• [ ] Implement Stack, Tab, and Drawer navigators
• [ ] Configure deep linking and universal links
• [ ] Handle authentication flows
• [ ] Pass params between screens type-safely

---

1. Installation

```bash

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

npm install react-native-screens react-native-safe-area-context

# For tabs

npm install @react-navigation/bottom-tabs

# For drawers

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

```

2. Stack Navigator

```tsx

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

type RootStackParamList = {

Home: undefined;

Details: { id: string };

};

const Stack = createNativeStackNavigator();

function RootNavigator() {

return (

);

}

```

3. Tab Navigator

```tsx

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

const Tab = createBottomTabNavigator();

function MainTabs() {

return (

);

}

```

4. Deep Linking

```tsx

const linking = {

prefixes: ['myapp://', 'https://myapp.com'],

config: {

screens: {

Home: 'home',

Details: 'details/:id',

},

},

};

{/ navigators /}

```

5. Type-Safe Navigation

```tsx

import { useNavigation } from '@react-navigation/native';

import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type NavigationProp = NativeStackNavigationProp;

function HomeScreen() {

const navigation = useNavigation();

return (

title="Go to Details"

onPress={() => navigation.navigate('Details', { id: '123' })}

/>

);

}

```

---

```tsx

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

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

type RootStackParamList = {

Home: undefined;

Details: { id: string; title: string };

};

const Stack = createNativeStackNavigator();

export default function App() {

return (

);

}

```

---

| Error | Cause | Solution |

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

| "Navigator not found" | Missing NavigationContainer | Wrap app in NavigationContainer |

| Params undefined | Type mismatch | Check ParamList types |

| Deep link not working | Config mismatch | Verify linking paths |

---

• [ ] Navigation works on both platforms
• [ ] Deep links open correct screens
• [ ] TypeScript catches param errors
• [ ] Auth flow protects routes

---

```

Skill("react-native-navigation")

```

Bonded Agent: 02-react-native-navigation