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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
TabNavigator = createBottomTabNavigator({ HomeStack, CoursesStack, ProjectsStack, })
Example #11
Source File: MainTabNavigator.js From pineapple-reactNative with MIT License | 5 votes |
tabNavigator = createBottomTabNavigator({
HomeStack,
CartStack,
// ProductStack,
// LinksStack,
ProfileStack,
// SettingsStack,
})