I am trying to trigger a function whenever a specific route within a router loads. I am using react-native-router-flux 2.x and ReactNative 0.21 (Can't update to 3.x right now).
For example below I just want to trigger a function whenever screen2 is loaded. Is this possible? I tried using onPush but it didn't seem to work.
The reason I need this is because I cannot use componentDidMount, componentWillMount for the screen2 component as it will only load the first time the component is called. I need a function to trigger every time the route is selected. Thanks!
<Route name="screen1" initial={!needSignIn}>
<Router footer={TabBar} hideNavBar={true} >
<Route name="screen1" hideNavBar={true} title="Screen1" schema="tab" component={Screen1} />
<Route onPush={()=>{console.log("onPush is called!");}} name="screen2" hideNavBar={true} title="Screen2" schema="tab" component={Screen2} />
<Route name="screen3" hideNavBar={true} title="Screen2" schema="tab" component={Screen3} />
</Router>
</Route>
The only events that can fire events with react-native-router-flux are onLeft and onRight see documentation. The only to fire off functions are lifecycle functions. You said that component(Did/Will)Mount wont work, what about the others, like componentWillReceiveProps? Use componentWillMount for the first render, and componentWillReceiveProps for every other render.
Related
In React Native using react-native-router-flux, when I try to hide the nav bar all the components disappear.
Here is my code :
<Router>
<Stack key="root" >
<Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
<Scene key="signup" component={Signup} title="Signup" />
</Stack>
</Router>
I tried other alternative solutions but still have the same problem.
Here is how it looks without using the hideNavBar property.
after looking through your snack, i realise that the parent <View /> component under App.js seem to be causing the issue without any error flags. by removing it, the components have reappeared. i would suggest that you add the css styling to each Scene separately, which would also give you granular control. or you probably have to rework your components in order to have a base styling theme. this is the updated snack.
using ^4.2.0 of react-native-router-flux, i am able to replicate your above example without any issue of components disappearing upon setting hideNavBar prop to true. as i do not have the code to your components, i am using a basic View with a Button for navigating between the stack's scenes.
i have included a snack here so that you can take a look and see what went wrong. :)
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)
I am looking React Native Router flux and did everything I want, except Camera.
The structure of Router is like this.
<Router ...>
<Scene tabs>
<Scene /> // Scene1
<Scene /> // Scene2
</Scene>
</Router>
Scene2 is QR Scanner.
And if app is running, both scene1 and scene2 loaded at same time, and camera always working even though I am at Scene1.
So My devices blows and it seems to explode.
How can I stop camera when I am working on Scene1?
Please use onEnter/onExit function together with Actions.refs.YOUR_CAMERA_SCENE to start/stop camera like this:
<Router ...>
<Scene tabs>
<Scene /> // Scene1
<Scene key='QR' onEnter={()=>Actions.refs.QR.startCamera()} onExit={()=>Actions.refs.QR.stopCamera()} /> // Scene2
</Scene>
</Router>
And your QR React Component should have startCamera and stopCamera methods.
I'm trying to create a dynamic drawer in react-native-router-flux.
I Mean when I changed the Scenes drawer can detect which scene in now activated and can update itself by new data.
I have a Component in my drawer that calls in App.js
<Drawer
key={'drawer'}
contentComponent = {() => <DrawerLayout language={this.state.language} />}
drawerPosition= {this.state.rightOrLeft}
<Stack key={'root'} hideNavBar>
<Scene key={'splash'} component={Splash} initial/>
<Scene key={'login'} component={Login} />
<Scene key={'home'} component={Home} />
<Scene key={'about'} component={About} />
</Stack>
</Drawer>
I wish I could explain my dream correctly !!!
If you are using redux you can retain state and fetch the current scene from store and play around with it.
If you are not using redux, you can still get to do it without it. One option is to do the following:
use contentComponent in DrawerNavigator and fetch the content from a separate js file.
contentComponent: props => <SideBar {...props} />
Now you need global variable declare in App.js name as currentScene and set your home page as default.
Now lets join all in sideBar.js, on click of every menu item change the global variable value to the selected menu.
Based on the value of current scene in SideBar.js change menuItems List.
One good example is react native base kitchen sink example app. Read the code in it follow the four steps once you are familiarise with it and you will be done.
https://github.com/GeekyAnts/NativeBase-KitchenSink
I tried to use drawer on my project where I use NativeBase and react-native-router in it. Everything works except that the button inside header is not functional(I can't tap this certain button). This issue only happen if I wrap my Main Page inside <Scene key="draw">, here is my code:
App.js
<Scene key="draw" component={SideMenu} open={false} hideNavBar={true}>
<Scene key='main' component={Home} hideNavBar={true}/>
</Scene>
Header on main
<Left>
<Button transparent onPress={()=>Alert.alert("burger tapped")}>
<Icon name='menu' />
</Button>
</Left>
My purpose is when I tap the button, it will open the drawer but the button is not functional at all when I do the code like above example. How can I fix this?
The common workaround is to put header component from nativebase into each container component(screen). This approach even implemented into their boilerplate for the Ignite.
The other way is to to push custom NavBar as a prop to the scene component. Modify the built-in NavBar to use nativebase components instead of the default:
import CustomNavBar from './CustomNavBar';
import Main from './Components/Main';
<Router>
<Scene
component={Main}
key="main"
type={ActionConst.RESET}
navBar={CustomNavBar}
/>
</Router>
Good luck!
NativeBase showcases this with its NativeBase-KitchenSink
This should answer your question