@react-navigation/native#getFocusedRouteNameFromRoute JavaScript Examples

The following examples show how to use @react-navigation/native#getFocusedRouteNameFromRoute. 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: CollectionsListScreen.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
CollectionsListScreen = ({ route, collectionsCounter, navigation }) => (
  <SafeAreaView style={styles.root}>
    <CollectionsIndexHeader
      showNewCollectionButton={getFocusedRouteNameFromRoute(route) !== ROUTES.COLLECTIONS.REPORTS}
      navigation={navigation}
    />
    <Tab.Navigator
      initialRouteName={ROUTES.COLLECTIONS.REPORTS}
      tabBarOptions={{
        labelStyle: styles.tabText,
        indicatorStyle: {
          backgroundColor: Colors.collectionYellow,
        },
      }}
    >
      <Tab.Screen
        name={ROUTES.COLLECTIONS.REPORTS}
        options={{
          title: `${collectionsCounter.preBuiltCount} Reports`,
        }}
        component={CollectionsIndexPrebuilt}
      />
      <Tab.Screen
        name={ROUTES.COLLECTIONS.BUILDS}
        options={{
          title: `${collectionsCounter.customCount} My Collections`,
        }}
        component={CollectionsIndexCustom}
      />
    </Tab.Navigator>
  </SafeAreaView>
)
Example #2
Source File: App.js    From InstagramClone with Apache License 2.0 5 votes vote down vote up 
render() {
    const { loggedIn, loaded } = this.state;
    if (!loaded) {
      return (
        <Image style={container.splash} source={logo} />
      )
    }

    if (!loggedIn) {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Register" component={RegisterScreen} navigation={this.props.navigation} options={{ headerShown: false }} />
            <Stack.Screen name="Login" navigation={this.props.navigation} component={LoginScreen} options={{ headerShown: false }} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

    return (
      <Provider store={store}>
        <NavigationContainer >
          <Stack.Navigator initialRouteName="Main">
            <Stack.Screen key={Date.now()} name="Main" component={MainScreen} navigation={this.props.navigation} options={({ route }) => {
              const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';

              switch (routeName) {
                case 'Camera': {
                  return {
                    headerTitle: 'Camera',
                  };
                }
                case 'chat': {
                  return {
                    headerTitle: 'Chat',
                  };
                }
                case 'Profile': {
                  return {
                    headerTitle: 'Profile',
                  };
                }
                case 'Search': {
                  return {
                    headerTitle: 'Search',
                  };
                }
                case 'Feed':
                default: {
                  return {
                    headerTitle: 'Instagram',
                  };
                }
              }
            }}
            />
            <Stack.Screen key={Date.now()} name="Save" component={SaveScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="video" component={SaveScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Post" component={PostScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Chat" component={ChatScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="ChatList" component={ChatListScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Edit" component={EditScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Profile" component={ProfileScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Comment" component={CommentScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="ProfileOther" component={ProfileScreen} navigation={this.props.navigation} />
            <Stack.Screen key={Date.now()} name="Blocked" component={BlockedScreen} navigation={this.props.navigation} options={{ headerShown: false }} />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    )
  }
Example #3
Source File: App.js    From Get-Placed-App with MIT License 4 votes vote down vote up 
MainTabScreen = () => {
  const [isFirstLaunch, setIsFirstLaunch] = useState(null);
  useEffect(() => {
    AsyncStorage.getItem('alreadyLaunched').then(value => {
      console.log(value);
      if (value == null) {
        AsyncStorage.setItem('alreadyLaunched', 'true');
        setIsFirstLaunch(true);
      }
      else {
        setIsFirstLaunch(false)
      }
    })
  }, []);

  if (isFirstLaunch == null) {
    return null;
  } else if (isFirstLaunch == true) {
    return (
      <>
        <StatusBar backgroundColor='#000' barStyle='light-content' />
        <NavigationContainer>
          <HomeStack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: '#002223',
              },
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold'
              }
            }}
          >
            <HomeStack.Screen
              name="Onboarding"
              component={OnboardingScreen}
              options={({ route }) => ({
                header: () => null,
              })}

            />
            <HomeStack.Screen
              name="Resources"
              component={HomeStackScreen}
              options={({ route }) => {
                // backgroundColor: "#002223";


                const routeName = getFocusedRouteNameFromRoute(route) ?? 'Resources';

                switch (routeName) {
                  case 'Job List': {
                    return {
                      headerTitle: 'Job List',
                    };
                  }
                  case 'Blog': {
                    return {
                      headerTitle: 'Blog',
                    };
                  }
                  case 'Resources': {
                    return {
                      headerTitle: 'Resources',
                    };
                  }
                  case 'Profile':
                  default: {
                    return {
                      headerTitle: 'Profile',
                    };
                  }
                }

              }}

            />
            <HomeStack.Screen name="Create" component={Create} options={{
              title: 'Create',
            }} />

            <HomeStack.Screen name="Resource-Detail" component={ResourceDetail} options={{
              title: 'Resource Detail',
            }} />
            <HomeStack.Screen name="Job List" component={JobList} options={{
              headerLeft: () => (
                <Icon.Button name="ios-menu" size={25} backgroundColor="#002223" ></Icon.Button>
              )
            }} />
            <HomeStack.Screen name="Job-Detail" component={JobDetail} options={{
              title: 'Job Detail',
            }} />
            <HomeStack.Screen name="Blog-Detail" component={BlogDetail} options={{
              title: 'Blog Detail',
            }} />

          </HomeStack.Navigator>
        </NavigationContainer>
      </>
    );
  }
  else {
    return (
      <>
        <StatusBar backgroundColor='#000' barStyle='light-content' />
        <NavigationContainer>
          <HomeStack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: '#002223',
              },
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold'
              }
            }}
          >
            <HomeStack.Screen
              name="Resources"
              component={HomeStackScreen}
              options={({ route }) => {
                // backgroundColor: "#002223";


                const routeName = getFocusedRouteNameFromRoute(route) ?? 'Resources';

                switch (routeName) {
                  case 'Job List': {
                    return {
                      headerTitle: 'Job List',
                    };
                  }
                  case 'Blog': {
                    return {
                      headerTitle: 'Blog',
                    };
                  }
                  case 'Resources': {
                    return {
                      headerTitle: 'Resources',
                    };
                  }
                  case 'Profile':
                  default: {
                    return {
                      headerTitle: 'Profile',
                    };
                  }
                }

              }}

            />
            <HomeStack.Screen name="Create" component={Create} options={{
              title: 'Create',
            }} />

            <HomeStack.Screen name="Resource-Detail" component={ResourceDetail} options={{
              title: 'Resource Detail',
            }} />
            <HomeStack.Screen name="Job List" component={JobList} options={{
              headerLeft: () => (
                <Icon.Button name="ios-menu" size={25} backgroundColor="#002223" ></Icon.Button>
              )
            }} />
            <HomeStack.Screen name="Job-Detail" component={JobDetail} options={{
              title: 'Job Detail',
            }} />
            <HomeStack.Screen name="Blog-Detail" component={BlogDetail} options={{
              title: 'Blog Detail',
            }} />

          </HomeStack.Navigator>
        </NavigationContainer>
      </>
    )
  }

}