I have the next React Native Router Flux Router code:
<Scene key="home" component={Modal}>
<Scene key="search">
<Scene key="unfiltered" component={Unfiltered} />
<Scene key="filtered" component={Filtered} />
</Scene>
<Scene key="menu">
<Scene key="menu1" component={Menu1} />
<Scene key="menu2" component={Menu2} />
</Scene>
<Scene key="calendar" component={Calendar} />
</Scene>
The problem is that when I call route Actions.menu() with two nested routes menu1 and menu2 from route search.unfiltered, nothing happens (for the first call I see action RNRF push and focus).
But if I call Actions.calendar() it's ok, as if I only call a menu1 within menu.
I also tried this solution:
<Scene key="menu1" component="menu1">
<Scene key="menu2" component="menu2" />
</Scene>
It works for menu1, but if I want to push to menu2 nothing happens.
How properly create modal that contains nested routes?
The answer is to move menu into "Search" scene, because the RNRF supports only one nested scene if the parent scene is Modal component.
Related
My problem is sending param to Child Scene in React Native Router Flux.
This is my Router.js :
<Router>
<Stack key="root" hideNavBar>
<Scene key='anotherScreen' component={anotherScreen} initial> </Scene>
<Drawer key= 'DrawerMenu' contentComponent={DrawerScreen} drawerWidth={250} drawerPosition='left'>
<Scene key= 'tabBar' tabs
activeBackgroundColor='orange'
activeTintColor= 'purple'
inactiveBackgroundColor='grey'>
<Scene key= 'Home' title='Home'>
<Scene key='HomeScreen' title='HomeScreen' component={HomeScreen} ></Scene>
</Scene>
<Scene key= 'One' title='One'>
<Scene key='ScreenOne' title='One' component={ScreenOne} ></Scene>
</Scene>
<Scene key= 'Two' title='Two'>
<Scene key='ScreenTwo' title='ScreenTwo' component={ScreenTwo} ></Scene>
</Scene>
</Scene>
</Drawer>
</Stack>
</Router>
So, as you see there is one Scene which name is "anotherScreen" and other parent scene "tabBar" which includes 3 child scenes.
I want to send params from "anotherScreen" to child scene of "tabBar", for example "HomeScreen". But I cannot reach "HomeScreen" with Actions function. So, I cannot send my params to it. I can only reach parent Scene that is "Home".
I know I cannot route "anotherScreen" to "HomeScreen", I can only route to "Home" but then how can I send my params to it ?
I am using react-native-router-flux react native library for navigation but type Property not working
<Route name="error" component={Error} title="Error" type="reset"/>
it give error like
_this2[type] is not a function.
react-native-router-flux version 4.0.0-beta.28
The thing is type should use in <Scene> not in <Route>
here the working example
import { Router, Scene, Actions } from 'react-native-router-flux';
<Router>
<Scene key="root">
<Scene key="login" component={LoginForm} hideNavBar={'true'} initial={true} />
<Scene key="signin" component={SigninForm} />
<Scene
type="reset"
key="dashboard"
component={NavigationView}
initial={props.isLogin}
hideNavBar={'true'}
/>
</Scene>
</Router>
well there is other way:
remove type from scene and use it as a param when moving to other screen.
Actions.error({ type:'reset' });
or
Actions.reset('KEY'); // this one is work, i just tested now.
or you can replace see this
https://github.com/aksonov/react-native-router-flux/issues/467
you can pass js files as
<Router hideNavBar={true}>
<Stack key="root" hideNavBar={true}>
<Scene key="splashscreen" component={SplashScreen} title="SplashScreen" initial={true}></Scene>
</Stack>
</Router>
and whichever page you want to go you can pass
Actions.splashscreen()
(need to pass key written in scene)
How can I display the login page if the user is not authorized or a list of items?
I'm using react-native-router-flux
<Router>
<Scene key="user">
<Scene key="register1" component={RegisterStep1} title="register1"/>
<Scene key="register2" component={RegisterStep2} title="register2"/>
<Scene key="register3" component={RegisterStep3} title="register3"/>
<Scene key="login" component={Login} title="Login"/>
</Scene>
<Scene key="items" type={ActionConst.REPLACE}>
<Scene key="list" component={ItemList} title="Items list"/>
<Scene key="detail" component={ItemDetail} title="Item detail"/>
</Scene>
</Router>
is it right?
I should go to login Scene or items -> list Scene.
You can check if the user is authorized in the componentWillMount or componentDidMount lifecycle methods of your main component(The one that has the Router component) and call Actions.items() after everything goes well. Otherwise go to the login screen.
Also I recommend two things:
-Put your scenes inside a root scene as recommended by react-native-router-flux
-Set one of your screens as initial (with the prop of the scene: initial={true} so that the user can see something before your lifecycle method does its work.
Component Init is hiding behind Navigation Bar after implementing Drawer to NavBar. Without Drawer I could easily add some paddingTop to Route (root) component and the problem would get solved.
<Router renderLeftButton={this.navBarButton}>
<Scene
key="drawer"
component={DrawerComponent}
open={false}
>
<Scene key="main" >
<Scene key="index" component={Init} title="First page!" />
<Scene key="counter" component={Counter} title="Counter" />
<Scene key="posts" component={Posts} title="Posts" />
</Scene>
</Scene>
</Router>
If I add paddingTop on root for global padding, it gives back extra padding on both Navbar and Coponent.
I do get the desired result by adding paddingTop to each children Scenes but that would be hectic. e.g.
<Scene key="index" component={Init} title="First page!" sceneStyle={{paddingTop: 64}} />
I have yet to see a solution that does not use any type of paddingTop to solve this issue. However, instead of adding the styles to each scene, you can add it to the Router that will apply to every scene.
<Router renderLeftButton={this.navBarButton} sceneStyle={{ paddingTop: 65 }}>
<Scene />
<Scene />
</Router>
I have two sub scene in my react-native-router-flux Router like
<Router>
<Scene key="root" ... >
<Scene key="login" ... />
<Scene key="parent" component={drawer}>
<Scene key="page1" ... />
<Scene key="page2" ... />
</Scene>
</Scene>
</Router>
Now, I'm in login scene. If I want to call page2, I'm using the following snippet.
Actions.parent()
Actions.page2()
It is working. But, Before rendering the page2 It is executing the page1 also, Since it is the initial element. How to open page2 without executing the page1?
Thanks in Advance,
Try this -
import { Actions, ActionConst } from 'react-native-router-flux';
<Button onPress={() => {
Actions.parent({type:ActionConst.RESET});
Actions.page2();
}}>