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
Related
Is there any way to set the background image for the React native redux router flux scene.
<Router getSceneStyle={() => ({ backgroundColor: 'transparent' })}>
<Scene>
<Scene key="root" hideNavBar={true} initial={!this.props.isLoggedIn}>
<Scene key="login" component={Login} initial={true} />
<Scene key="signup" component={Signup} title="Register" />
</Scene>
<Scene key="app" hideNavBar={true} initial={this.props.isLoggedIn}>
<Scene key="home" component={Home} />
</Scene>
I have search but didn't found any solution to set the background image for the redux router flux any help will be appreciated
THanks in advance
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 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.
I'm using react-native-router-flux for navigation in my react-native app.
I've got this in my router.js file --
render() {
return (
<Router navigationBarStyle={styles.navBar}
titleStyle={styles.navBarTitle}
>
<Scene key="modal" component={Modal}>
<Scene key="drawer" component={Drawer} open={false} type="replace">
<Scene key="home" component={Home} title="HOME" hideNavBar type="replace" />
<Scene key="myorder" component={MyOrder} title="MY ORDERS" type="replace" />
<Scene key="bookachef" component={BookAChef} title="BOOK A CHEF" type="replace" />
<Scene key="offers" component={Offers} title="OFFERS" type="replace" />
<Scene key="terms" component={Terms} title="TERMS & CONDITIONS" />
<Scene key="mywishlist" component={MyWishlist} title="WISHLIST" type="replace" />
<Scene key="myaddresses" component={MyAddresses} title="Addresses" type="replace" />
<Scene key="faq" component={FAQ} title="FAQ" type="replace" />
<Scene key="aboutus" component={AboutUs} title="About Us" type="replace" />
</Scene>
<Scene key="auth" initial>
<Scene key="login" panHandlers={null} component={Login} title="Login" hideNavBar={true} />
<Scene key="signup" panHandlers={null} component={SignUp} title="SignUp" hideNavBar={true} />
<Scene key="terms" panHandlers={null} component={Terms} title="TERMS & CONDITIONS" />
</Scene>
<Scene key="popUpImagePicker" panHandlers={null} component={PopUpImagePicker} title="PopUpImagePicker" hideNavBar={true} />
</Scene>
</Router>
);
}
Now, after login, I want to have the usual flow i.e. to open the app with the drawer. The problem is, I can open the "Home" screen by
Actions.drawer() .
But I cannot open the drawer even by Actions.refresh({key: "drawer", open: true}) or by sliding from the screen. What am I doing wrong, I cannot figure that out.
I'm using "react-native-router-flux": "^3.41.0"
To navigate to the home scene after the login, you can call Actions.drawer(), but before you have landed in any of the scenes within the drawer scene, the sliding from the screen would not work, because your Drawer component hasn't get mounted to the screen yet.
As for not be able to slide the drawer out, try removing the type="replace" props on your drawer scene.
As for calling Actions.refresh({ key: 'drawer', open: true }) is not bringing out the drawer component issue, make sure in your Drawer component, you are setting the open props, you can take a look at the RNRF's v3 drawer example, if you forgot to setting the open props, your Actions.refresh will update the navigationState but won't be able to control the open/close state of the drawer component.
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!