@react-navigation/native#NavigationContainer TypeScript Examples

The following examples show how to use @react-navigation/native#NavigationContainer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: LoadAssets.tsx    From react-native-meetio with MIT License 7 votes vote down vote up 
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>
  );
}
Example #2
Source File: routes.tsx    From NextLevelWeek with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: AppNavigator.tsx    From lexicon with MIT License 6 votes vote down vote up 
export default function AppNavigator() {
  const { colorScheme } = useColorScheme();
  const darkMode = colorScheme === 'dark';

  return (
    <>
      <StatusBar style={darkMode ? 'light' : 'dark'} />
      <NavigationContainer theme={darkMode ? DarkTheme : DefaultTheme}>
        <RootStackNavigator />
      </NavigationContainer>
    </>
  );
}
Example #4
Source File: App.tsx    From react-native-scroll-bottom-sheet with MIT License 6 votes vote down vote up 
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>
  );
}
Example #5
Source File: Share.test.tsx    From lets-fork-native with MIT License 6 votes vote down vote up 
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)
})
Example #6
Source File: App.tsx    From reanimated-bottom-sheet-navigator with MIT License 6 votes vote down vote up 
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>
  );
}
Example #7
Source File: App.tsx    From react-native-ios-context-menu with MIT License 6 votes vote down vote up 
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>
  );
}
Example #8
Source File: App.tsx    From react-native-jigsaw with MIT License 6 votes vote down vote up 
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>
  );
}
Example #9
Source File: Navigation.tsx    From react-native-typescript-starter with MIT License 6 votes vote down vote up 
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>
    );
}
Example #10
Source File: RootNavigator.tsx    From react-native-crypto-wallet-app with MIT License 6 votes vote down vote up 
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>
  );
}
Example #11
Source File: App.tsx    From online-groceries-app with MIT License 6 votes vote down vote up 
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>
    </>
  );
}
Example #12
Source File: AppStack.tsx    From nlw2-proffy with MIT License 6 votes vote down vote up 
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>
    )

}
Example #13
Source File: Navigator.tsx    From react-native-template with MIT License 6 votes vote down vote up 
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>
  )
}
Example #14
Source File: routes.tsx    From nlw-ecoleta with MIT License 6 votes vote down vote up 
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>
    );
}
Example #15
Source File: index.tsx    From bext with MIT License 6 votes vote down vote up 
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>
  );
}
Example #16
Source File: App.tsx    From RNWCShop with GNU General Public License v3.0 6 votes vote down vote up 
export default function App(): JSX.Element {
  return (
    <Provider store={createStore(cartReducer)}>
      <SafeAreaView style={{ flex: 1 }}>
        <NavigationContainer>
          <NavigationStacks />
        </NavigationContainer>
      </SafeAreaView>
    </Provider>
  );
}
Example #17
Source File: index.tsx    From react-native-woocommerce with MIT License 6 votes vote down vote up 
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>
  );
}
Example #18
Source File: App.tsx    From iotc-cpm-sample with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <PaperProvider theme={theme}>
      <AuthProvider>
        <ConfigProvider>
          <UIProvider>
            <NavigationContainer>
              <StatusBar backgroundColor="#00B1FF" />
              <Login />
              <Registration />
              <Main />
            </NavigationContainer>
          </UIProvider>
        </ConfigProvider>
      </AuthProvider>
    </PaperProvider>
  );
}
Example #19
Source File: App.tsx    From ito-app with GNU General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #20
Source File: RootNavigator.tsx    From rn-clean-architecture-template with MIT License 6 votes vote down vote up 
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>
  );
}
Example #21
Source File: App.tsx    From gobarber-project with MIT License 6 votes vote down vote up 
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>
  );
}
Example #22
Source File: App.tsx    From GoBarber with MIT License 6 votes vote down vote up 
App: React.FC = () => {
  const { user } = useAuth();
  return (
    <NavigationContainer>
      <StatusBar
        barStyle="light-content"
        backgroundColor={user ? '#28262e' : '#312e38'}
      />
      <AppProvider>
        <Routes />
      </AppProvider>
    </NavigationContainer>
  );
}
Example #23
Source File: index.tsx    From expo-hamburger-menu-template with MIT License 6 votes vote down vote up 
// 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>
  );
}
Example #24
Source File: App.tsx    From jellyfin-audio-player with MIT License 6 votes vote down vote up 
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>
    );
}
Example #25
Source File: App.tsx    From BitcoinWalletMobile with MIT License 6 votes vote down vote up 
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>
  );
}
Example #26
Source File: routes.tsx    From ecoleta with MIT License 6 votes vote down vote up 
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>
  );
}
Example #27
Source File: routes.tsx    From NLW-1.0 with MIT License 6 votes vote down vote up 
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>
  );
}
Example #28
Source File: App.tsx    From gobarber-mobile with MIT License 6 votes vote down vote up 
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>
  );
}
Example #29
Source File: routes.tsx    From happy with MIT License 6 votes vote down vote up 
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>
  );
}