Skip to content

Instantly share code, notes, and snippets.

@shawn-kb

shawn-kb/navigator.js

Created November 21, 2018 22:24
Show Gist options
  • Save shawn-kb/03e4894ec9b2596da58e1d28cbd75b3d to your computer and use it in GitHub Desktop.
Save shawn-kb/03e4894ec9b2596da58e1d28cbd75b3d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shawn-kb created this gist Nov 21, 2018.
    90 changes: 90 additions & 0 deletions navigator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    // in my MainTabNavigator

    import RainMapScreen from '../screens/RainMapScreen';
    import GroupMessageHistoryScreen from '../screens/GroupMessageHistoryScreen';
    import GroupDrawer from './GroupDrawer'

    export default createBottomTabNavigator(
    {
    GroupDrawer: {
    screen: GroupDrawer,
    },
    Messages: {
    screen: GroupMessageHistoryScreen,
    },
    Rain: {
    screen: RainMapScreen,
    },
    },

    {
    navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
    const { routeName } = navigation.state;
    let iconName;
    switch (routeName) {
    case 'Summary':
    iconName = Platform.OS === 'ios'
    ? `ios-information-circle${focused ? '' : '-outline'}`
    : 'md-information-circle';
    break;
    case 'SelectGroup':
    iconName = Platform.OS === 'ios'
    ? `ios-link${focused ? '' : '-outline'}`
    : 'md-link';
    break;
    case 'Settings':
    iconName = Platform.OS === 'ios'
    ? `ios-options${focused ? '' : '-outline'}`
    : 'md-options';
    }
    return (
    <Ionicons
    name={iconName}
    size={28}
    style={{ marginBottom: -3 }}
    color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
    />
    );
    },
    }),
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    }
    );

    // -------------------- DIFFERENT FILE -------------------------------

    // in my GroupDrawer
    import { createDrawerNavigator } from 'react-navigation';

    import SummaryScreen from '../screens/SummaryScreen'
    import SettingsScreen from '../screens/SettingsScreen';
    import GroupHelpScreen from '../screens/GroupHelpScreen'
    import ContactScreen from '../screens/ContactScreen'



    const GroupDrawer = createDrawerNavigator ({
    Summary: {
    screen: SummaryScreen,
    navigationOptions: {title: 'Summary'},
    },
    Profile: {
    screen: SettingsScreen,
    navigationOptions: {title: 'profile'},
    },
    Contact: {
    screen: ContactScreen,
    navigationOptions: {title: 'contact'},
    },
    Help: {
    screen: GroupHelpScreen,
    navigationOptions: {title: 'help'},
    },


    });

    export default GroupDrawer;