React Navigation Files

Root.js

const AppNavigator = createStackNavigator(
  {
    TabHome: {
      screen: AppTabs,
      navigationOptions: ({navigation}) => {
        console.log('navigation-:', navigation);
        // let {routeName} = navigation.state.routes[navigation.state.index];
        // console.log('routeName', routeName);
        // let title;
        // if (routeName === 'Home') {
        //   title = 'الرئيسية';
        // } else if (routeName === 'Browse') {
        //   title = 'الأقسام';
        // } else if (routeName === 'Search') {
        //   title = 'البحث';
        // } else if (routeName === 'Radio') {
        //   title = 'البومات';
        // } else if (routeName === 'Library') {
        //   title = 'مكتبتي';
        // }
        // return {
        //   title,
        // };
      },
      .....,
      .....,
      .....,
    },
    
    const Drawer = createDrawerNavigator(
  {
    App: {screen: AppNavigator},
    .....,
    .....,
)
}




const Root = createSwitchNavigator({
  App: Drawer, // the App stack,
});

export default createAppContainer(Root);

Tab.js

const {isLogin} = store.getState().user;
console.log('isLogin', isLogin);

const LoginTabs = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'الرئيسية',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'الأقسام',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'البحث',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'البومات',
      },
    },
    Library: isLogin && {
      screen: YourLibrary,
      navigationOptions: {
        tabBarLabel: 'مكتبتي',
      },
    },
    // Library: {
    //   screen: YourLibrary,
    //   navigationOptions: {
    //     tabBarLabel: 'مكتبتي',
    //   },
    // },
  },
  {
  
    swipeEnabled: true,
    lazy: false,
    defaultNavigationOptions: ({navigation}) => ({
      headerLeft: (
        <View>
          <Button transparent onPress={() => navigation.navigate('DrawerOpen')}>
            <Icon name="menu" style={styles.styles} />
          </Button>
        </View>
      ),
      tabBarIcon: ({focused, tintColor}) => {
        const {routeName} = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = 'ios-home';
        } else if (routeName === 'Browse') {
          iconName = 'ios-globe';
        } else if (routeName === 'Radio') {
          iconName = 'ios-radio';
        } else if (routeName === 'Library') {
          iconName = 'ios-albums';
        } else if (routeName === 'Search') {
          iconName = 'ios-search';
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      style: {
        backgroundColor: '#fff',
        flexDirection: `${I18nManager.isRTL ? 'row' : 'row-reverse'}`,
      },
      activeTintColor: '#ff4865',
    },
  },
);

      
      
const AppTabs = createAppContainer(LoginTabs);
export default AppTabs;