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
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 router flux in my react native application.
I created some scenes in Route.
<Router>
<Scene key="root" hideNavBar={true} navigationBarStyle={{ backgroundColor: '#81b71a' }}>
<Scene key="auth">
<Scene key="login" component={LoginForm} title="Please Login" />
</Scene>
<Scene key="main" navigationBarStyle={{ backgroundColor: '#8fff1f' }}>
<Scene
key="mainScene1"
component={EmployeeList}
title="MainScene1"
/>
<Scene key="mainScene2" component={EmployeeCreate} title="MainScene1" />
<Scene key="MainScene3" component={EmployeeEdit} title="Edit Employee" />
</Scene>
</Scene>
</Router>
I want to navigate from mainScene3 to mainScene1 but getting error "Error: There is no route defined for key mainScene1. Must be one of: 'auth','main' "
How to tackle this issue? These two scene are in the same bucket.
Another query - How to navigate from login scene of auth to any scene say mainScene2 ? Is there any special method for that?
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!