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.
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'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
In my app, the authentication is not the first screen to be shown. The home page contains a list of item that a user can browse through and see the details of an individual item. In order, to subscribe to that item, I need to redirect the user to the accounts tab. In case user is logged in, I want to show the profile tab otherwise the login page which has is part of an auth stack of pages.
So how can I do that using react-native-router-flux, I have tried the following approach as per my understanding and it isn't working. I am new to react-native and struggling with this flow.
If there is another library which can help me to achieve this desired behavior, I would love to try it out.
Routing.tsx
<Router>
<Scene key="root" hideNavBar>
<Tabs key="tabbar" swipeEnabled tabBarStyle={styles.tabBar} showLabel={false} lazy>
<Scene key="homeTab" title="Home" iconName="ios-home" icon={TabIcon} hideNavBar>
<Scene key="home" component={Home} title="Home Page" initial />
<Scene key="details" component={ContentDetail} />
</Scene>
<Scene key="account" component={Splash} hideNavBar title="Profile" iconName="ios-person" icon={TabIcon}>
<Scene key="profileTab" title="Profile" iconName="ios-person" icon={TabIcon} hideNavBar>
<Scene key="profile" component={Profile} initial />
</Scene>
<Scene key="authTab" title="Account" iconName="ios-person" icon={TabIcon} hideNavBar>
<Scene key="login" component={Login} initial />
<Scene key="signup" component={Signup} />
<Scene key="verifyTac" component={VerifyTac} />
</Scene>
</Scene>
<Scene key="settingTab" title="Settings" iconName="ios-settings" icon={TabIcon} hideNavBar>
<Scene key="accInfo" component={AccountInfo} title="Account Info Page" initial />
</Scene>
</Tabs>
<Scene
key="search"
component={Search}
modal
hideNavBar
/>
</Scene>
</Router>
Splash.tsx
class Splash extends React.Component<Props, {}> {
constructor(props: Props) {
super(props);
}
componentDidMount() {
if (this.props.user && this.props.user.accessToken) Actions.replace('profileTab');
else Actions.replace('authTab');
}
render() {
console.log(' Splash props: ', this.props);
return <View></View>
}
}
const mapStateToProps = state => {
return {
user: state.authReducer
}
}
export default connect(mapStateToProps)(Splash);
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!