react-navigation-tabs#createBottomTabNavigator JavaScript Examples

The following examples show how to use react-navigation-tabs#createBottomTabNavigator. 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: MainTabNavigator.js    From expo-soundcloud-clone with MIT License 6 votes vote down vote up 
tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    StreamStack,
    SettingsStack
  },
  {
    tabBarComponent: props => (
      <TabBarComponent
        {...props}
        style={{
          backgroundColor: Colors.tabBar,
          shadowColor: "#fff",
          overflow: "visible",
          shadowOffset: {
            width: 0,
            height: -2
          },
          shadowOpacity: 0.25,
          shadowRadius: 3.84,

          elevation: 2
        }}
      />
    ),
    tabBarOptions: {
      showLabel: false
    }
  }
)
Example #2
Source File: App.js    From geometry_3d with MIT License 6 votes vote down vote up 
AppBottomNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons name="ios-home" size={24} color={tintColor} />
        ),
      },
    },
    Items: {
      screen: SavedItemScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons name="ios-albums" size={24} color={tintColor} />
        ),
      },
    },
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Ionicons name="ios-contact" size={24} color={tintColor} />
        ),
      },
    },
  },
  {
    headerMode: "none",
    initialRouteName: "Home",
    backBehavior: "order",
    //tabBarComponent: (props) => <CustomTabBar {...props} />,
  }
)
Example #3
Source File: MainNavigator.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
tabNavigator = (screenProps) => createBottomTabNavigator({
  HomeStack: HomeStack(screenProps),
  SearchStack: SearchStack(screenProps),
  NotificationsStack: NotificationsStack(screenProps),
  DatingStack: DatingStack(screenProps),
  ProfileStack: ProfileStack(screenProps),
}, {
  tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: '#F9F9F9',
    },
  },
  tabBarComponent: props => (
    <BottomTabBar
      {...props}
      style={{
        backgroundColor: props.screenProps.theme.colors.backgroundPrimary,
      }}
    />
  ),
})
Example #4
Source File: App.js    From BedTimeStoriesPart7 with MIT License 6 votes vote down vote up 
TabNavigator = createBottomTabNavigator({
  WriteStory: WriteStoryScreen,
  ReadStory: ReadStoryScreen
},
{
  defaultNavigationOptions: ({navigation})=>({
    tabBarIcon: ()=>{
      const routeName = navigation.state.routeName;
      console.log(routeName)
      if(routeName === "WriteStory"){
        return(
          <Image
          source={require("./assets/write.png")}
          style={{width:40, height:40}}
        />
        )
        
      }
      else if(routeName === "ReadStory"){
        return(
          <Image
          source={require("./assets/read.png")}
          style={{width:40, height:40}}
        />)
        
      }
    }
  })
}
  )
Example #5
Source File: App.js    From Wily_Authentication with MIT License 6 votes vote down vote up 
TabNavigator = createBottomTabNavigator({
  Transaction: {screen: TransactionScreen},
  Search: {screen: SearchScreen},
},
{
  defaultNavigationOptions: ({navigation})=>({
    tabBarIcon: ()=>{
      const routeName = navigation.state.routeName;
      console.log(routeName)
      if(routeName === "Transaction"){
        return(
          <Image
          source={require("./assets/book.png")}
          style={{width:40, height:40}}
        />
        )

      }
      else if(routeName === "Search"){
        return(
          <Image
          source={require("./assets/searchingbook.png")}
          style={{width:40, height:40}}
        />)

      }
    }
  })
}
)
Example #6
Source File: AppTabNavigator.js    From barter-app-stage-10 with MIT License 6 votes vote down vote up 
AppTabNavigator = createBottomTabNavigator({
  HomeScreen : {
    screen: AppStackNavigator,
    navigationOptions :{
      tabBarIcon :   <Image source={require("../assets/home-icon.png")} style={{width:20, height:20}}/>,
      tabBarLabel : "HomeScreen",
    }
  },
  BookRequest: {
    screen: Exchange,
    navigationOptions :{
      tabBarIcon :<Image source={require("../assets/ads-icon.png")} style={{width:20, height:20,}} />,
      tabBarLabel : "Exchange",
    }
  }
})
Example #7
Source File: App.js    From barter-app-stage-5 with MIT License 6 votes vote down vote up 
TabNavigator = createBottomTabNavigator({
    HomeScreen: {screen: HomeScreen},
    Exchange: {screen: Exchange},
  },
  {
    defaultNavigationOptions: ({navigation})=>({
      tabBarIcon: ()=>{
        const routeName = navigation.state.routeName;
        if(routeName === "HomeScreen"){
          return(
            <Image
            source={require("./assets/home-icon.png")}
            style={{width:20, height:20}}
          />
          )

        }
        else if(routeName === "Exchange"){
          return(
            <Image
            source={require("./assets/ads-icon.png")}
            style={{width:20, height:20,}}
          />)

        }
      }
    })
  }
)
Example #8
Source File: AppTabNavigator.js    From book-santa-stage-10 with MIT License 6 votes vote down vote up 
AppTabNavigator = createBottomTabNavigator({
  DonateBooks : {
    screen: AppStackNavigator,
    navigationOptions :{
      tabBarIcon : <Image source={require("../assets/request-list.png")} style={{width:20, height:20}}/>,
      tabBarLabel : "Donate Books",
    }
  },
  BookRequest: {
    screen: BookRequestScreen,
    navigationOptions :{
      tabBarIcon : <Image source={require("../assets/request-book.png")} style={{width:20, height:20}}/>,
      tabBarLabel : "Book Request",
    }
  }
})
Example #9
Source File: App.js    From searchBar with MIT License 6 votes vote down vote up 
TabNavigator = createBottomTabNavigator({
  Transaction: {screen: TransactionScreen},
  Search: {screen: SearchScreen},
},
{
  defaultNavigationOptions: ({navigation})=>({
    tabBarIcon: ()=>{
      const routeName = navigation.state.routeName;
      console.log(routeName)
      if(routeName === "Transaction"){
        return(
          <Image
          source={require("./assets/book.png")}
          style={{width:40, height:40}}
        />
        )
        
      }
      else if(routeName === "Search"){
        return(
          <Image
          source={require("./assets/searchingbook.png")}
          style={{width:40, height:40}}
        />)
        
      }
    }
  })
}
)
Example #10
Source File: TabNavigator.js    From 4noobs-mobile with MIT License 5 votes vote down vote up 
TabNavigator = createBottomTabNavigator({
  HomeStack,
  CoursesStack,
  ProjectsStack,
})
Example #11
Source File: MainTabNavigator.js    From pineapple-reactNative with MIT License 5 votes vote down vote up 
tabNavigator = createBottomTabNavigator({
  HomeStack,
  CartStack,
  // ProductStack,
  // LinksStack,
  ProfileStack,
  // SettingsStack,
})