Skip to content

05 RN - Navigation

npm install

  • npm install @react-navigation/native @react-navigation/stack @react-navigation/native-stack
  • npm install react-native-screens react-native-safe-area-context

on mac for ios

  • npx pod-install ios

Android

Needs one fix in MainActivity.java (android/app/src/main/java/<your package name>/MainActivity.java)

1
2
3
4
5
6
import android.os.Bundle;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

Wrap your app entry into NavigationContainer

1
2
3
4
5
6
7
8
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

StackNavigator 1

95% of navigation on mobile is based on stack navigator

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeScreen = () => {
    return (
        <View style={styles.root}>
            <Text>OK</Text>
        </View>
    );
}

const Stack = createNativeStackNavigator();

const App = () => {

    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

const styles = StyleSheet.create({
    root: {
        flex: 1,
        width: '100%',
        height: '100%',
    },
});

StackNavigator 2

More screens/routes!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
const DetailsScreen = () => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
        </View>
    );
}

const Stack = createNativeStackNavigator();

const App = () => {

    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home Screen' }} />
                <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details Screen' }} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

TS Types

1
2
3
4
export type StackParamList = {
    Home: undefined;
    Details: { userId: string };
};

Add type definition to stacknavigator

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const Stack = createNativeStackNavigator<StackParamList>();

const App = () => {

    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen} initialParams={{ userId: 'def value' }} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

Use route params

1
2
3
4
5
6
7
8
type Props = StackScreenProps<StackParamList, 'Details'>;
const DetailsScreen = ({ route, navigation }: Props) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen {route.params.userId}</Text>
        </View>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
type Props = StackScreenProps<StackParamList, 'Home'>;

const HomeScreen = ({ route, navigation }: Props) => {
    return (
        <View style={styles.root}>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details', { userId: 'akaver' })}
            />
        </View>
    );
}

Rotation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Button, StyleSheet, Text, useWindowDimensions, View } from 'react-native';

const HomeScreen = ({ route, navigation }: Props) => {
    const window = useWindowDimensions();

    return (
        <View style={styles.root}>
            <Text>{window.width} {' - '} {window.height} </Text>
            <Button
                title="Go to About"
                onPress={() => navigation.navigate('Details', { userId: 'akaver' })}
            />
        </View>
    );
}

Home reading

  • https://reactnavigation.org/
  • https://reactnavigation.org/docs/typescript/