@react-navigation/native#NavigationContainer JavaScript Examples

App = () => {
  return (
    <AppProvider>
      <NavigationContainer ref={navigationRef}>
        <View style={styles.app}>
          <Menu />
          <Content />
        </View>
      </NavigationContainer>
    </AppProvider>
  );
}

export default function App() {
  return (
    <PaperProvider theme={DarkTheme}>
      <UserProvider>
        <UserContext.Consumer>
          {(value) => {
            return (
              <NavigationContainer
                linking={linking}
                fallback={<Text>Loading...</Text>}>
                <StatusBar
                  backgroundColor={DarkTheme.colors.background}
                  barStyle="light-content"
                />
                <MainAppStack />
              </NavigationContainer>
            );
          }}
        </UserContext.Consumer>
      </UserProvider>
    </PaperProvider>
  );
}

App = () => (
  <Root>
    <Provider store={store}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
              if (route.name === 'Checkout') {
                return <Ionicons name="ios-cart" size={size} color={color} />;
              } else if (route.name === 'Orders') {
                return <Ionicons name="ios-archive" size={size} color={color} />;
              } else if (route.name === 'Settings') {
                return <Ionicons name="ios-settings" size={size} color={color} />;
              }
            },
          })}
          tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
          }}
        >
          <Tab.Screen name="Checkout" component={CheckoutScreen} />
          <Tab.Screen name="Orders" component={OrdersScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  </Root>
)

function RootScreen() {
  const { theme } = React.useContext(ThemeContext)
  return (
    <NavigationContainer theme={theme === 'light' ? DefaultTheme : DarkTheme}>
      <RootStack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: 'transparent' },
          cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
          gestureEnabled: true,
          gestureDirection: 'vertical'
        }}
        mode="modal"
      >
        <RootStack.Screen name="Tab" component={MyTabs} />
        <RootStack.Screen name="SignModal" component={SignScreens} />
      </RootStack.Navigator>
    </NavigationContainer>
  )
}

App = () => {
  useEffect(() => {
    console.disableYellowBox = true;
    if (Platform.OS == 'android') {
      SplashScreen.hide();
    }
  }, []);

  return (
    <Suspense fallback={null}>
      <Root>
        <SafeAreaView style={styles.container}>
          <PaperProvider>
            <AppStateProvider>
              <NavigationContainer theme={theme}>
                <AppNavigator />
                <PushNotification />
                <DropdownAlert ref={(ref) => DropDownHolder.setDropDown(ref)} />
              </NavigationContainer>
            </AppStateProvider>
          </PaperProvider>
        </SafeAreaView>
      </Root>
    </Suspense>
  );
}

export default function Routes() {
  return (
    <NavigationContainer>

      <AppStack.Navigator screenOptions={{ headerShown: false }}>
        <AppStack.Screen name="Incidents" component={Incidents} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>

    </NavigationContainer>
  );
}

export default function App() {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return null;
  }
  return (
    <NavigationContainer independent>
      <PaperProvider theme={theme}>
        <UserContextProvider>
          <OfflineContextProvider>
            <MainNavigation />
          </OfflineContextProvider>
        </UserContextProvider>
      </PaperProvider>
    </NavigationContainer>

  );
}

export default function Routes() {
  return (
    <NavigationContainer>
      <AppStack.Navigator screenOptions={ {headerShown: false} }>
        <AppStack.Screen name="Incidents" component={Incidents} />
        <AppStack.Screen name="Detail" component={Detail} />
      </AppStack.Navigator>
    </NavigationContainer>
  )
}

function AppNavigator(props) {
  return (
    <NavigationContainer>
      <Root />
      <NfcPromptAndroid />
      <Toast />
    </NavigationContainer>
  );
}

export default function index() {
  return (
    <NavigationContainer>
      <AppProvider>
        <App />
      </AppProvider>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <PubNubProvider client={pubnub}>
        <Stack.Navigator headerMode="none">
          <Stack.Screen name="EmojiPicker" component={EmojiPickerView} />
          <Stack.Screen name="Chat" component={ChatView} />
        </Stack.Navigator>
      </PubNubProvider>
    </NavigationContainer>
  );
}

export default function App() {
  let [fontsLoaded] = useFonts({
    "FlameSans-Regular": require("./app/assets/fonts/FlameSans-Regular.ttf"),
    "Flame-Regular": require("./app/assets/fonts/Flame-Regular.ttf"),
    "Flame-Bold": require("./app/assets/fonts/Flame-Bold.ttf"),
    Nunito_400Regular,
    Nunito_700Bold,
    Nunito_900Black,
    Righteous_400Regular,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <SafeAreaProvider>
        <HeroesProvider>
          <NavigationContainer>
            <HomeNavigation />
          </NavigationContainer>
        </HeroesProvider>
      </SafeAreaProvider>
    );
  }
}

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

  return (
    <NavigationContainer>
      <AppNavigator />
      <OfflineNotice />
    </NavigationContainer>
  );
}

App = (props) => {
  const linking = {
    prefixes: [Linking.makeUrl('/'), Constants.manifest.extra.firebaseUrlPrefix],
    config: {
      initialRouteName: 'HomePage',
      screens: {
        PlayImporterPage: 'customPlays/:uuid', // Legacy, keeping it because there are generated URL out there
        DrillImporterPage: 'custom/:source/:uuid', // source can be drill or play
        DrillPage: 'drills/:id',
      },
    },
  };

  return (
    <ReduxProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PaperProvider>
          <NavigationContainer
            linking={linking}
            fallback={<ActivityIndicator animating color={theme.MAIN_COLOR} style={{ top: '45%' }} size="large" />}
          >
            <Navigation />
          </NavigationContainer>
          <FlashMessage position="bottom" />
        </PaperProvider>
      </PersistGate>
    </ReduxProvider>
  );
}

function LoadingScreen() {
  const ref = useRef();
  const loginStatus = useSelector((state) => state.user.loginStatus);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log('loginStatus', loginStatus);

    async function getAsyncData() {
      //Get User data
      let data = await AsyncStorage.getItem('data');

      console.log(data);
      //Update redux state
      dispatch(updateUser(data));
    }

    CustomSplashScreen.hide();

    getAsyncData();
  });

  if (loginStatus === -1) {
    // We haven't finished checking for the user logged in or not
    return <View style={styles.container} />;
  }

  ref && ref.current && ref.current.animateNextTransition();

  return (
    <NavigationContainer>
      <Transitioning.View ref={ref} transition={TRANSITION} style={styles.transitionContainer}>
        {loginStatus === 1 && <MainNavigator />}
        {loginStatus === 0 && <AuthNavigator />}
      </Transitioning.View>
    </NavigationContainer>
  );
}

StoryPage = props => {
  const StoryScreen = () => <Story {...props} />
  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="home">
          <Stack.Screen
            name="home"
            options={{
              title: props.title,
              headerStyle: styles.headerStyle,
              headerTitleStyle: styles.title,
              headerTitleAlign: 'left'
            }}
            component={StoryScreen}
          />

          {props.screens &&
            props.screens.map(({ name, screen }) => (
              <Stack.Screen
                key={name}
                name={name}
                component={screen ? screen : LinkedScreen}
              />
            ))}
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  )
}

export default function App() {
	useEffect(() => {
		if (Text.defaultProps == null) Text.defaultProps = {};
		Text.defaultProps.allowFontScaling = false;
	}, []);

	return (
		<Provider store={store}>
			<PersistGate persistor={persistor}>
				<NavigationContainer>
					<Root />
				</NavigationContainer>
			</PersistGate>
		</Provider>
	);
}

export default function App() {
	const [user, setUser] = useState();
	const [isReady, setIsReady] = useState(false);

	const restoreUser = async () => {
		const user = await authStorage.getUser();
		if (user) setUser(user);
	};

	if (!isReady)
		return (
			<AppLoading
				startAsync={restoreUser}
				onFinish={() => setIsReady(true)}
			/>
		);

	return (
		<AuthContext.Provider value={{ user, setUser }}>
			<OfflineNotice />
			<NavigationContainer ref={navigationRef} theme={navigationTheme}>
				{user ? <AppNavigator /> : <AuthNavigator />}
			</NavigationContainer>
		</AuthContext.Provider>
	);
}

describe('<FitnessPage />', () => {
  it('renders correctly', async () => {
    const drill = store.getState().drills[0];

    const Stack = createStackNavigator();
    const { toJSON } = render(
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="FitnessPage" component={FitnessPage} initialParams={{ drill }} />
        </Stack.Navigator>
      </NavigationContainer>,
    );
    expect(toJSON()).toMatchSnapshot();
  });
});

export default function App() {
  const [assetsLoaded, setAssetLoaded] = useState(false);

  /* Loading custom fonts in async */
  const _loadAssetsAsync = async () => {
    await Font.loadAsync(customFonts);
    setAssetLoaded(true);
  };

  useEffect(() => {
    _loadAssetsAsync();
  });

  return assetsLoaded ? (
    <NavigationContainer>
      <StatusBar barStyle="light-content"></StatusBar>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="Featured"
      >
        <Stack.Screen name="Featured" component={Tabs} />
        <Stack.Screen name="EventDetail" component={EventDetail} />
      </Stack.Navigator>
    </NavigationContainer>
  ) : (
    <ActivityIndicator size="small"></ActivityIndicator>
  );
}

App = () => (
  <>
    <StatusBar
      barStyle="light-content"
      backgroundColor={MyTheme.colors.primary}
    />
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: MyTheme.colors.primary,
          },
          headerTintColor: '#fff',
        }}>
        <Stack.Screen name="Pokédex" component={List} />
        <Stack.Screen name="Pokémon" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  </>
)

App: () => React$Node = () => {


  if (Platform.OS === 'android') {
    // Calling the permission function
    const granted = PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
      {
        title: 'Bluetooth Permissions',
        message: 'We need access to bluetooth permissions',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      // Permission Granted
      console.log('granted');
    }
  }
  return (
    <>
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="BLEDevices" component={BLEList} />
            <Stack.Screen name="BLEServices" component={BLEservices} />
            <Stack.Screen
              name="BLECharacteristics"
              component={BLEservicecharacteristics}
            />
            <Stack.Screen
              name="BLECharacteristic"
              component={BLECharacteristic}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    </>
  );
}

App = () => {
  return (
    <NavigationContainer theme={theme}>
      <StatusBar barStyle="light-content" backgroundColor="#f4511e" />
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: 'white',
        }}>
        <Stack.Screen name="Pokedex" component={Home} />
        <Stack.Screen name="Pokemon" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Router = () => {
  const {authData, loading, signIn, signOut} = useContext(AuthContext);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (nextAppState !== "active") {
      signOut();
    }
  };

  if (loading) {
    return ( <Loading /> );
  }
  return (
    <NavigationContainer>
      {authData ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

function Router() {
  useEffect(() => {
    SplashScreen.hide();
  });
  return (
    <NavigationContainer>
      {Platform.OS === 'ios' ? (
        <View style={styles.iosContainerStyle}>
          <StatusBar
            translucent
            backgroundColor="#1d9b54"
            barStyle="light-content"
          />
        </View>
      ) : (
        <StatusBar backgroundColor="#1d9b54" barStyle="light-content" />
      )}
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Tabs" component={Tabs} />
        <Stack.Screen name="Post" component={Post} />
        <Stack.Screen name="SearchResults" component={SearchResults} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function Routes() {
  return (
    <NavigationContainer>

      <AppStack.Navigator screenOptions={{ headerShown: false }}>
        <AppStack.Screen name="Incidents" component={ Incidents }/>
        <AppStack.Screen name="Details" component={ Details }/>
      </AppStack.Navigator>

    </NavigationContainer>
  )
}

export default function App() {

  const onLayout = (e)  => {
    const {width, height} = Dimensions.get('window')
    console.log(width, height)
  }

  return (
    <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Home" component={Home} options={{ headerLeft: null }} />
          <Stack.Screen name="Fridge" component={Fridge} />
          <Stack.Screen name="Scanner" component={Scanner} />
          <Stack.Screen name="ShoppingCart" component={ShoppingCart} />
          <Stack.Screen name="Inside your Fridge" component={Inside}/>
          </Stack.Navigator>
    </NavigationContainer>
  );


}

App = () => {
  const [isLoading, setIsLoading] = React.useState(true);


  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 500);
  }, []);

  if (isLoading) {
    return (<LoadingScreen />);
  } else {
    return (
      <NavigationContainer>
        <TabLayout/>
      </NavigationContainer>
    );
  }
}

App = () => {
  const [isLoading, setIsLoading] = React.useState(true);


  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 500);
  }, []);

  if (isLoading) {
    return (<LoadingScreen />);
  } else {
    return (
      <NavigationContainer>
        <TabLayout/>
      </NavigationContainer>
    );
  }
}