@react-navigation/native NavigationContainer TypeScript Examples

Source File: LoadAssets.tsx From react-native-meetio with MIT License

7 votes

LoadAssets = ({ assets, fonts, children }: LoadAssetsProps) => {
  const [isNavigationReady, setIsNavigationReady] = useState(!__DEV__);
  const [initialState, setInitialState] = useState<InitialState | undefined>();
  const ready = useLoadAssets(assets || [], fonts || {});
  useEffect(() => {
    const restoreState = async () => {
      try {
        const savedStateString = await AsyncStorage.getItem(
          NAVIGATION_STATE_KEY
        );
        const state = savedStateString
          ? JSON.parse(savedStateString)
          : undefined;
        setInitialState(state);
      } finally {
        setIsNavigationReady(true);
      }
    };

    if (!isNavigationReady) {
      restoreState();
    }
  }, [isNavigationReady]);

  const onStateChange = useCallback((state) => {
    AsyncStorage.setItem(NAVIGATION_STATE_KEY, JSON.stringify(state));
  }, []);
  if (!ready || !isNavigationReady) {
    return <AppLoading />;
  }
  return (
    <NavigationContainer {...{ onStateChange, initialState }}>
      {children}
    </NavigationContainer>
  );
}

Source File: routes.tsx From NextLevelWeek with MIT License

6 votes

Routes = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator
        headerMode="none"
        screenOptions={{
          cardStyle: {
            backgroundColor: "#f0f0f5",
          },
        }}
      >
        <AppStack.Screen name="Home" component={Home} />
        <AppStack.Screen name="Points" component={Points} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

Source File: AppNavigator.tsx From lexicon with MIT License

6 votes

export default function AppNavigator() {
  const { colorScheme } = useColorScheme();
  const darkMode = colorScheme === 'dark';

  return (
    <>
      <StatusBar style={darkMode ? 'light' : 'dark'} />
      <NavigationContainer theme={darkMode ? DarkTheme : DefaultTheme}>
        <RootStackNavigator />
      </NavigationContainer>
    </>
  );
}

Source File: App.tsx From react-native-scroll-bottom-sheet with MIT License

6 votes

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerTitle: 'Scroll Bottom Sheet Example' }}
        />
        <Stack.Screen
          options={{
            headerTitleAlign: 'center',
            headerTitle: 'Personal Account',
            headerRight: () => (
              <AntDesign
                name="piechart"
                size={24}
                color="#5C6BC0"
                style={{ marginRight: 16 }}
              />
            ),
          }}
          name="SectionListExample"
          component={SectionListExample}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="HorizontalFlatListExample"
          component={HorizontalFlatListExample}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Source File: Share.test.tsx From lets-fork-native with MIT License

6 votes

test('Share', () => {
  const shareSpy = jest.spyOn(RNShare, 'share')

  const { getAllByRole } = render(
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Details"
        >
          {(props): React.ReactElement => (
            <Share {...props} party={party} />
          )}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>,
  )

  const button = getAllByRole('button')[1]
  fireEvent.press(button)
  expect(shareSpy).toBeCalledTimes(1)
})

Source File: App.tsx From reanimated-bottom-sheet-navigator with MIT License

6 votes

export default function App() {
  const renderContent = () => <Text style={styles.sheet}>Hello world</Text>;

  return (
    <NavigationContainer>
      <Sheet.Navigator
        snapPoints={[300, 100, 0]}
        borderRadius={15}
        renderContent={renderContent}
      >
        <Sheet.Screen name="Hello" component={HelloScreen} />
      </Sheet.Navigator>
    </NavigationContainer>
  );
}

Source File: App.tsx From react-native-ios-context-menu with MIT License

6 votes

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Test" component={TestScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Source File: App.tsx From react-native-jigsaw with MIT License

6 votes

function Examples() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Layout"
        drawerContentOptions={{
          activeTintColor: "rgba(90, 69, 255, 1)",
        }}
      >
        {Object.entries(ROUTES).map(([key, Screen]) => {
          return (
            <Drawer.Screen key={key} name={key}>
              {() => (
                <Example title={key}>
                  <Screen theme={{}} />
                </Example>
              )}
            </Drawer.Screen>
          );
        })}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Source File: Navigation.tsx From react-native-typescript-starter with MIT License

6 votes

Navigation : FC = () => {  
    const { theme } = useTheme();

    const navigationTheme: NavigationTheme = useMemo(() => {
        return {
            dark : theme.dark,
            colors : {
                primary : theme.colors.primary,
                background : theme.colors.background,
                card : theme.colors.surface,
                border : theme.colors.onBackground,
                text : theme.colors.onSurface
            }
        }
    }, [theme]);

    return (
        <NavigationContainer theme={navigationTheme}>
            <Stack.Navigator mode="modal" screenOptions={ROOT_STACK_OPTIONS}>
                <Stack.Screen name={Route.WELCOME} component={WelcomeScreen} />
                <Stack.Screen name={Route.MODAL} component={ModalScreen} options={MODAL_SCREEN_OPTIONS} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Source File: RootNavigator.tsx From react-native-crypto-wallet-app with MIT License

6 votes

RootNavigator = () => {
  const { state, dispatch } = useContext(AppContext);
  const [user, setUser] = useState<FirebaseAuthTypes.User | null>(null);
  const { authLoading } = state;

  const checkUser = useCallback(
    (fbUser: FirebaseAuthTypes.User | null) => {
      setUser(fbUser);
      dispatch({
        type: AUTH_CHECKED,
      });
    },
    [dispatch],
  );

  useEffect(() => {
    const listener = auth().onAuthStateChanged(checkUser);
    return () => {
      listener();
    };
  }, [checkUser]);

  return authLoading ? (
    <Loading />
  ) : (
    <NavigationContainer>
      {user !== null ? <CCVPNavigator /> : <PreAuthNavigator />}
    </NavigationContainer>
  );
}

Source File: App.tsx From online-groceries-app with MIT License

6 votes

App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <NavigationContainer>
        <Navigator
          // initialRouteName={OrderAccepted.name}
          screenOptions={{
            headerShown: false,
          }}>
          <Screen name={Onboarding.name} component={Onboarding.component} />
          <Screen name={SignIn.name} component={SignIn.component} />
          <Screen name={SignUp.name} component={SignUp.component} />
          <Screen name={Tabs.name} component={Tabs.component} />

          {/* Temporary */}
          <Screen
            name={OrderAccepted.name}
            component={OrderAccepted.component}
          />
        </Navigator>
      </NavigationContainer>
    </>
  );
}

Source File: AppStack.tsx From nlw2-proffy with MIT License

6 votes

function AppStack() {
    return (
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                <Screen name="Landing" component={Landing} />
                <Screen name="GiveClasses" component={GiveClasses} />
                <Screen name="Study" component={StudyTabs} />
            </Navigator>
        </NavigationContainer>
    )

}

Source File: Navigator.tsx From react-native-template with MIT License

6 votes

function Navigator() {
  /**
   * Hide the splash screen on mount
   * Keep track of nav container mounts for usage of {@link NavigationService}
   */
  useEffect(() => {
    isMountedRef.current = true
    SplashScreen.hide({ duration: 250 })
    return () => {
      isMountedRef.current = false
    }
  }, [])
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen name="Landing" component={Landing} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Source File: routes.tsx From nlw-ecoleta with MIT License

6 votes

Routes = () => {
    return (
        <NavigationContainer>
            <AppStack.Navigator headerMode="none" screenOptions={{
                cardStyle: {
                    backgroundColor: '#f0f0f5'
                }
            }}> 
                <AppStack.Screen name="Home" component={Home} />
                <AppStack.Screen name="Points" component={Points} />
                <AppStack.Screen name="Detail" component={Detail} />
            </AppStack.Navigator>
        </NavigationContainer>
    );
}

Source File: index.tsx From bext with MIT License

6 votes

App: FC = () => {
  return (
    <DbProvider>
      <DebugProvider>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="home">
            <Stack.Screen
              name="home"
              component={HomeScreen}
              options={{ title: '草稿' }}
            />
            <Stack.Screen
              name="dev"
              component={DevScreen}
              options={{ title: '开发' }}
            />
            <Stack.Screen
              name="debug"
              component={DebugScreen}
              options={{ title: '调试' }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </DebugProvider>
    </DbProvider>
  );
}

Source File: App.tsx From RNWCShop with GNU General Public License v3.0

6 votes

export default function App(): JSX.Element {
  return (
    <Provider store={createStore(cartReducer)}>
      <SafeAreaView style={{ flex: 1 }}>
        <NavigationContainer>
          <NavigationStacks />
        </NavigationContainer>
      </SafeAreaView>
    </Provider>
  );
}

Source File: index.tsx From react-native-woocommerce with MIT License

6 votes

export default function App(): JSX.Element {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{ flex: 1 }}>
          <Loading />
          <NavigationContainer>
            <NavigationStacks/>
          </NavigationContainer>
          <FlashMessage position="top" />
        </SafeAreaView>
      </PersistGate>
    </Provider>
  );
}

Source File: App.tsx From iotc-cpm-sample with MIT License

6 votes

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <AuthProvider>
        <ConfigProvider>
          <UIProvider>
            <NavigationContainer>
              <StatusBar backgroundColor="#00B1FF" />
              <Login />
              <Registration />
              <Main />
            </NavigationContainer>
          </UIProvider>
        </ConfigProvider>
      </AuthProvider>
    </PaperProvider>
  );
}

Source File: App.tsx From ito-app with GNU General Public License v3.0

6 votes

App: React.FC<void> = () => {
  useEffect(() => {
    // Uncomment this to show onboarding again
    // AsyncStorage.setItem('userHasSeenOnboarding', 'false');
  });

  return (
    <Suspense fallback={null}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Loading" headerMode="none">
          <Stack.Screen name="Loading" component={Loading} />
          <Stack.Screen name="AlphaWarning" component={AlphaWarning} />
          <Stack.Screen name="Onboarding" component={Onboarding} />
          <Stack.Screen name="OnboardingHow" component={OnboardingHow} />
          <Stack.Screen name="HomeTour" component={HomeTour} />
          <Stack.Screen name="HomeTourOLD" component={HomeTourOLD} />
          <Stack.Screen name="HomeBluetooth" component={HomeBluetooth} />
          <Stack.Screen name="Endangerment" component={Endangerment} />
          <Stack.Screen name="PositiveResult" component={PositiveResult} />
          <Stack.Screen name="Upload" component={Upload} />
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen
            name="BluetoothNotification"
            component={BluetoothNotification}
          />
          <Stack.Screen name="IDMatch" component={IDMatch} />

          <Stack.Screen name="SymptomInfo" component={SymptomInfo} />
          <Stack.Screen
            name="AlphaPositiveResult"
            component={AlphaPositiveResult}
          />
          <Stack.Screen name="DataUpload" component={DataUpload} />
        </Stack.Navigator>
      </NavigationContainer>
    </Suspense>
  );
}

Source File: RootNavigator.tsx From rn-clean-architecture-template with MIT License

6 votes

RootNavigator: React.FC = () => {
  const isAuthorized = useSelector(
    ({authentication}: RootStoreState): boolean => authentication.isAuthorized,
  );

  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(signInLocally());
  }, [dispatch]);

  const renderStack = () => {
    if (isAuthorized) {
      return (
        <Stack.Screen
          component={AuthorizedNavigator}
          name="AuthorizedNavigator"
        />
      );
    }
    return (
      <Stack.Screen
        component={AuthenticationNavigator}
        name="AuthenticationNavigator"
      />
    );
  };
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {renderStack()}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Source File: App.tsx From gobarber-project with MIT License

6 votes

App: React.FC = () => {
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <NavigationContainer>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#312e38"
        translucent
      />
      <AppProvider>
        <View style={{ flex: 1, backgroundColor: '#312e38' }}>
          <Routes />
        </View>
      </AppProvider>
    </NavigationContainer>
  );
}

Source File: App.tsx From GoBarber with MIT License

6 votes

App: React.FC = () => {
  const { user } = useAuth();
  return (
    <NavigationContainer>
      <StatusBar
        barStyle="light-content"
        backgroundColor={user ? '#28262e' : '#312e38'}
      />
      <AppProvider>
        <Routes />
      </AppProvider>
    </NavigationContainer>
  );
}

Source File: index.tsx From expo-hamburger-menu-template with MIT License

6 votes

// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}

Source File: App.tsx From jellyfin-audio-player with MIT License

6 votes

export default function App(): JSX.Element {
    const colorScheme = useColorScheme();
    // const colorScheme = 'dark';
    const theme = themes[colorScheme || 'light'];

    useEffect(() => {
        async function setupTrackPlayer() {
            await TrackPlayer.setupPlayer();
            await TrackPlayer.updateOptions({
                capabilities: [
                    Capability.Play,
                    Capability.Pause,
                    Capability.SkipToNext,
                    Capability.SkipToPrevious,
                    Capability.Stop,
                    Capability.SeekTo,
                ],
                stopWithApp: true
            });
        }
        setupTrackPlayer();
    }, []);

    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistedStore}>
                <ColorSchemeContext.Provider value={theme}>
                    <NavigationContainer
                        theme={colorScheme === 'dark' ? DarkTheme : LightTheme}
                    >
                        <Routes />
                        <DownloadManager />
                    </NavigationContainer>
                </ColorSchemeContext.Provider>
            </PersistGate>
        </Provider>
    );
}

Source File: App.tsx From BitcoinWalletMobile with MIT License

6 votes

App = () => {

  useEffect(() => {
    SplashScreen.hide()
  }, [])

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer>
            <View style={{flex:1, backgroundColor:'#1A1E29'}}>
            <StatusBar backgroundColor="#090C14" barStyle="light-content"/>
                <Stack.Navigator mode="card" screenOptions={{...TransitionPresets.SlideFromRightIOS}} initialRouteName="Root" headerMode="none" >
                  <Stack.Screen name="Root" component={RootView} />
                  <Stack.Screen name="CreateStepOne" component={CreateStepOne} />
                  <Stack.Screen name="CreateStepTwo" component={CreateStepTwo} />
                  <Stack.Screen name="Restore" component={Restore} />
                  <Stack.Screen name="PickerView" component={PickerView} />
                  <Stack.Screen name="ScanQRCode" component={ScanQRCode} />
                  <Stack.Screen name="Send" component={Send} />
                </Stack.Navigator>
                </View>
              </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}

Source File: routes.tsx From ecoleta with MIT License

6 votes

Routes = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator 
        headerMode="none"
        screenOptions={{
          cardStyle: {
            backgroundColor: '#f0f0f5'
          }
        }}
      >
        <AppStack.Screen name="Home" component={Home} />
        <AppStack.Screen name="Points" component={Points} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

Source File: routes.tsx From NLW-1.0 with MIT License

6 votes

Routes = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator
        headerMode="none"
        screenOptions={{
          cardStyle: {
            backgroundColor: "#282a36",
          },
        }}
      >
        <AppStack.Screen name="Home" component={Home} />
        <AppStack.Screen name="Points" component={Points} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

Source File: App.tsx From gobarber-mobile with MIT License

6 votes

App: React.FC = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <NavigationContainer>
        <StatusBar barStyle="light-content" translucent />
        <AppProvider>
          <View style={{ backgroundColor: '#312e38', flex: 1 }}>
            <Routes />
          </View>
        </AppProvider>
      </NavigationContainer>
    </ThemeProvider>
  );
}

Source File: routes.tsx From happy with MIT License

6 votes

export default function Routes() {
  return (
    <NavigationContainer>
      <Navigator screenOptions={{ headerShown: false, cardStyle: { backgroundColor: '#f2f3f5' } }}>
        <Screen
          name="OrphanagesMap"
          component={OrphanagesMap}
        />

        <Screen
          name="OrphanageDetails"
          component={OrphanageDetails}
          options={{
            headerShown: true,
            header: () => <Header showCancel={false} title="Orfanato" />
          }}
        />

        <Screen
          name="SelectMapPosition"
          component={SelectMapPosition}
          options={{
            headerShown: true,
            header: () => <Header title="Selecione no mapa" />
          }}
        />

        <Screen
          name="OrphanageData"
          component={OrphanageData}
          options={{
            headerShown: true,
            header: () => <Header title="Informe os dados" />
          }}
        />
      </Navigator>
    </NavigationContainer>
  );
}

@react-navigation/native#NavigationContainer TypeScript Examples