i can't remove text under TabIcon in TabBar of react-native-router-flux. It is screen of my TabBar:
enter image description here
And it is my code of router:
const TabBar = ({focused}) => (
<View>
<Icon name="search" type="MaterialIcons" style={{fontSize: 28, color: focused ? 'red': 'white'}} />
</View>
)
export default () => (
<Router>
<Scene hideNavBar>
<Scene key="tabbar" tabs tabBarStyle={{backgroundColor: '#000'}}>
<Scene key="list" title="Ahlo" component={List} hideNavBar icon={TabBar} />
<Scene key="search" component={search} hideNavBar icon={TabBar} />
<Scene key="account" component={account} hideNavBar icon={TabBar} />
</Scene>
<Scene key="article" component={article} />
<Scene key="comment" component={comment} />
<Scene key="register" component={register} />
<Scene key="auth" component={auth} />
</Scene>
</Router>
)
In every tutorials i see that text under TabIcon is missing but i have it. What do i do wrong here?
You can try by adding the showLabel props to parent or particular child Scene to false, (By default its value is true)
So your tabbar Scene code will be like:
<Scene key="tabbar" showLabel={false} tabs tabBarStyle={{backgroundColor: "#000"}}>
<Scene key="list" component={List} showLabel={false} hideNavBar icon={TabBar} />
<Scene key="search" component={search} showLabel={false} hideNavBar icon={TabBar} />
<Scene key="account" component={account} showLabel={false} hideNavBar icon={TabBar} />
</Scene>
Hope this will help.
Related
I want to add top and bottom tabs in my application using react native router flux. Now i am able to add either top or bottom tab.
I tried to use tabBarPosition={'top'} and tabBarPosition={'bottom'} for the same scene.
<Router>
<Scene key='root' headerMode={'none'}>
<Scene key='auth' headerMode={'none'}>
<Scene key='login' component={LoginForm} title="Please Login" initial />
</Scene>
<Scene
key='main'
headerMode={'screen'}
tabs
tabBarPosition={'bottom'}
tabBarStyle={{ color: '#FFFFFF' }}
>
<Scene
onLeft={() => Actions.profile()}
leftTitle='Profile'
onRight={() => Actions.events()}
rightTitle='Events'
key='home'
component={Home}
title='Home'
icon={TabIcon}
initial
/>
<Scene
key='profile'
rightTitle='Message'
component={Profile}
title='Profile'
icon={TabIcon}
/>
<Scene
key='events'
rightTitle='Message'
component={Events}
title='Events'
icon={TabIcon}
/>
</Scene>
</Scene>
</Router>
''''
I'm trying to pass some data from my button
<Button
text="Explore"
elementStyles={secondaryButton}
onPress={() => Actions.dashboard({
demoMode: true,
})}
testID="button-explore"
/>
which is located in Example.js, to Dashboard.js
Here is my router stack located under App.js
<Stack key="root" hideNavBar>
<Scene key="splash" initial component={SplashScreen} />
....
<Scene key="example" component={example} />
....
<Tabs key="tabbar" hideNavBar tabBarPosition="bottom" showLabel={false} tabBarStyle={styles.tabBar} swipeEnabled={false} animationEnabled={false}>
<Scene key="dashboard" hideNavBar title="Dashboard" component={Dashboard} icon={TabBarItem} defaultIcon={Config.HOME_ICON_NAME} />
<Scene key="history" hideNavBar title="Stats" component={History} icon={TabBarItem} defaultIcon={Config.STATS_ICON_NAME} />
<Scene key="rewards" hideNavBar title="Points" component={Rewards} icon={TabBarItem} defaultIcon={Config.REWARDS_ICON_NAME} />
<Scene key="profile" hideNavBar title="Profile" component={Profile} icon={TabBarItem} defaultIcon={Config.PROFILE_ICON_NAME} />
</Tabs>
/>
</Stack>
When I call this.props.demoMode under dashboard I get undefined.
hi try to add _ befor the second screen key
onPress={() => Actions._dashboard({
demoMode: true,
})}
something like that but if it doesn't work remove your node module folder change the router flux version , npm i again and you will be fine
I am using react-native with react-native-router-flux and I want to use both Drawer sidemenu and also tabbar. But it only shows the one I put on top. My code is below. If I put Drawer first then it only shows Drawer.
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { Router, Scene, Stack, Tabs, Drawer } from 'react-native-router-flux';
import ScarletScreen from './component/ScarletScreen';
import ProfileScreen from './component/ProfileScreen';
import WhiteScreen from './component/WhiteScreen';
import BlackScreen from './component/BlackScreen';
import SideMenu from './component/SideMenu';
const TabIcon = ({ selected, title }) => { return (
<Text style={{color: selected ? 'red' :'black'}}>{title}</Text> ); }
export default class App extends React.Component { render() {
return (
<Router>
<Scene key="root" hideNavBar>
{/* Drawer and it's scenes */}
<Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
<Scene key="main">
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
initial
/>
<Scene
key="profile"
component={ProfileScreen}
title="Profile"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
<Scene
key="black"
component={BlackScreen}
title="Black Screen"
/>
</Scene>
</Drawer>
{/* Tab and it's scenes */}
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
</Scene>
{/* Tab and it's scenes */}
<Scene key="um" title="UM" icon={TabIcon}>
<Scene
key="white"
component={WhiteScreen}
title="White"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
</Scene>
</Router>
); } }
If I put tabbar first, then it shows the tabbar only and the hamburger menu icon is gone.
{/* Tab and it's scenes */}
<Tabs
key="tabbar"
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
{/* Tab and it's scenes */}
<Scene key="osu" title="OSU" icon={TabIcon}>
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
</Scene>
{/* Tab and it's scenes */}
<Scene key="um" title="UM" icon={TabIcon}>
<Scene
key="white"
component={WhiteScreen}
title="White"
/>
<Scene
key="black"
component={BlackScreen}
title="Black"
/>
</Scene>
</Tabs>
{/* Drawer and it's scenes */}
<Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
<Scene key="main">
<Scene
key="scarlet"
component={ScarletScreen}
title="Scarlet Screen"
initial
/>
<Scene
key="profile"
component={ProfileScreen}
title="Profile"
/>
<Scene
key="white"
component={WhiteScreen}
title="White Screen"
/>
<Scene
key="black"
component={BlackScreen}
title="Black Screen"
/>
</Scene>
</Drawer>
I use create-react-native-app to create my react-native app
I am trying to add a Tabbar to my project but it's not working. I only want the Tabbar to show in my homeScreen.js scene, and there I want a tabbar which will open up my discoverScreen.js, how would I go about changing my code to make this work?
render(){
return (
<Router>
<Scene key="root">
<Scene
key="tabbar"
tabs
tabBarStyle={{ backgroundColor: '#FFFFFF' }}
>
<Scene key="Discover" title="Discover" icon={TabIcon}>
<Scene key="discoverScreen"
component={DiscoverScreen}
title="DiscoverScreen"
initial
/>
</Scene>
</Scene>
<Scene key="login"
component={LoginView}
title="Login"
direction="vertical"
hideNavBar
/>
<Scene key="register"
component={Register}
title="Register"
direction="vertical"
hideNavBar
/>
<Scene key="firstScreen"
component={FirstScreen}
title="FirstScreen"
direction="vertical"
hideNavBar
initial
/>
<Scene key="discoverScreen"
component={DiscoverScreen}
title="DiscoverScreen"
direction="vertical"
type="reset"
/>
<Scene key="loginScreen"
component={LoginScreen}
title="LoginScreen"
direction="vertical"
hideNavBar
/>
<Scene key="homeScreen"
component={HomeScreen}
title="HomeScreen"
/>
</Scene>
</Router>
);
}
}
Thankful for any help!
I'm using react-native-router-flux in my app and want to pass in paths to png images for my TabIcon components. I know I could just make a different tab icon component for each tab, but these icons would be exactly the same except for the image source and I want to find a DRY way to accomplish my goal. Where in my scenes can I pass in the image path?
Here is my TabIcon component:
const TabIcon = ({ selected, title, image }) => {
const tabStyle = selected ? styles.selected : styles.unselected
return (
<View style={tabStyle}>
<Image
style={{height: 35, width: 35}}
source={require(image)}
/>
</View>
)
}
My scenes:
const Scenes = Actions.create(
<Scene key='root'>
<Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
<Scene key='tab1' title='Feed' icon={TabIcon}>
<Scene
key='Feed'
component={Feed}
title='Feed'
initial={true}
/>
</Scene>
<Scene key='tab2' title='Create' icon={TabIcon}>
<Scene
key='Create'
component={Create}
title='Create'
/>
</Scene>
<Scene key='tab3' title='Leaderboard' icon={TabIcon}>
<Scene
key='leaderboard'
component={Leaderboard}
title='Leaderboard'
/>
</Scene>
</Scene>
</Scene>
)
EDIT
I have tried passing in the image like so
const Scenes = Actions.create(
<Scene key='root'>
<Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
//HERE
<Scene key='tab1' title='Feed' icon={TabIcon} image={'../images/feed.png'}>
<Scene
key='matchupsFeed'
component={MatchupsFeed}
title='Feed'
initial={true}
/>
</Scene>
...
...
...
Within my TabIcon component if I console.log(image) it prints out "../images/feed.png" but I get this error in the simulator:
Unknown named module: '../images/feed.png'
After taking a look at this SO question, I figured it out:
const TabIcon = ({ selected, title, image }) => {
const selectColor = selected ? '#ED1B25' : '#FFF'
return (
<View style={[styles.tabStyle, {borderBottomColor: selectColor}]}>
<Image
style={{height: 35, width: 35}}
// Change HERE
source={image}
/>
</View>
)
}
Scenes
const Scenes = Actions.create(
<Scene key='root'>
<Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
//Change HERE
<Scene key='tab1' title='Feed' icon={TabIcon} image={require('../images/feed.png')}>