React Native Navigator renderScene called multiple times - react-native

I've been stumped for a while with RN Navigator trying to figure out why Navigator renders all the routes pushed in its stack.
Initially
<Navigator initialRoute={{name:"Route 1", index: 1}} />
Then upon issuing a navigator.push({ name : "Route 2", index: 2 }) the render() method of my component gets called which re-renders Navigator, which in turn calls renderScene.
After pushing the 2nd route and logging the route when renderScene gets called yields to:
Render() --> renderScene(),
{name:"Route 1", index: 1}
Render() --> renderScene(),
{name:"Route 2", index: 2}
Does anyone know why the renderScene() gets called as many times as there are routes inside the Navigator's stack? Is this is expected behaviour and if it is how can we speed up the rendering?
There is a significant performance hit when trying to render scenes of 5 routes before finally rendering the scene for the last pushed route, when in reality it should be calling render() once for rendering only the scene of the last pushed route.
Any help is greatly appreciated.
Thank you!
These are the relevant snippets:
nav.js
export function ListPage(){
return {
name: LIST_PAGE,
index: 1
}
}
Main App
<Navigator
ref={(ref) => this.navigator = navigator = ref}
initialRoute={nav.ListPage()}
renderScene={(route,navigator)=>this.renderListingsScene(route,navigator)}
/>
renderListingsScene(route, navigator){
console.log("renderScene()", route);
}

I had a similar problem (it was calling all routes I had defined at startup).
Once I removed the initialRouteStack from the Navigator Properties it stopped happening.
<Navigator
initialRoute={routes[0]}
//initialRouteStack={routes}
renderScene={ (route, navigator) => this._renderScene(route, navigator) }
/>

renderListingsScene must return a JSX code. You must return a <View> or another component in your renderScene. I think it re-render every scene because you are not providing any component as return value.

Related

React Navigation passing function as parameter

so i have lot of screen that have similar function eg:
ForgotPasswordCaptcha
ForgotUserIDCaptcha
RegisterCaptcha
these screens have same layout and functionality except they have different "Next" Button function in ForgotPassword users will be redirected into loginscreen, in ForgotUserID the user will be redirected into page that shows his userID. and in Register it will redirect user to Succes Page.
.
so the function that i create in navigator is handleOkay, and when i press the button in SomeReusableScreen it gives me this warning
Non-serializable values were found in the navigation state. Check:
forgotUserIDStackScreen > FUinputCASAScreen > params.handleOkay (Function)
This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params.
what i want to achieve is i to pass function as parameter in Stack navigator so the screen will just invoke that function to redirect/doing something with redux,
i dont know i should ignore this warning since in other screens it will handle redux sagas, set asyncstorage
so i have found the way to do what i wanted.
instead of passing the screen as component in Stack.Screen i pass it as child like this
<Stack.Screen
initialParams={{progress: 0.2}}
name={routes.nameofthisroute}
options={({navigation, route}) => ({
headerTitle: props => {
let currentProps = {navigation, route};
return <NavigationHeaderTwo {...currentProps} />;
},
...otherStyle,
})}>
{props => (
<PickMethodScreen handlePickMethod={handlePickMethod} {...props} />
)}
</Stack.Screen>
and i props some function and state from Stack Navigator and its written in this docs here
we can also create react context so component can consume it without having lot of props
I implemented a very simple example to clear the concept. You can pass function as a prop and can dispatch up to the parent component using the same props key. This way you can utilize reusable component.
//consider this your generic Component
function IButton(props){
//receive the method as props
//dispatch the method back to the parent
return (
<button onClick={()=>props.handleClick('hello')}>click me </button>
)
}
const App=()=>{
function handleOnClick(text){
alert(text);
}
return(
<div>
{/*pass the function as Prop*/}
<IButton handleClick={handleOnClick}/>
</div>
)
}
ReactDOM.render( < App / > , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

React Native: passing data between screens

I'm trying to create a small app, but have many questions)
I have 3 screen and use react-navigation to pass data. the scheme is following:
1) loading screen (fetch data and save it to AsyncStorage+handling data and save to obj1 for pickers)
(pass obj1)
2)main screen (get data,render pickers based on it, take selected values and pass them next)
(pass pickers selection+input)
3)some results(get data from Asyncstorage, some calculating and render results)
so I have two questions.
when I navigate back from 3) to 2) I have an error that screen2 need data, which was passed from screen1. yes - i've checked if this data pass to 3 and then to 2 when Back Button is pressed, and there is no error, but I'm sure this is bad solution
and second..trying to explain) on screen 3 some calculations made on pickers selection, so it hasn't problem. but rest of them needed get data from AsyncStorage and then convert it according to Picker values and render to ListView. Despite I'm putting getting from AS on componentWillMount it's still take much time so data for rendering is undefined. Of course I'm using states, but I think this is a bad logic of data handling..
UPD
so I'm trying pass data from child(screen) to parent(index.ios.js), where it define as first loading view( I'm using navigator's stack screens)
export default class App extends Component {
constructor(props) {
super(props);
};
}
myCallback(dataFromChild) {
console.log("yeah", dataFromChild);
}
render() {
return (
<LoadingScreen callbackFromParent={this.myCallback}/>
);
}
}
and LoadingScreen.js:
render() {
return(
<View style={{flex: 1, backgroundColor: '#dc143c', marginTop:20}}>
<Image
source={require('./WhiteLogo.png')}
style={{flex:3, height: undefined, width: undefined, marginLeft:20, marginRight:20}}
resizeMode="contain"
qwer={this.props.callbackFromParent('listInfo').bind(this)}
/>
<Spinner color='white' style={{flex:1}}/>
</View>
);
}
}
and I've got an error "Unhandled JS Exception: this.props.callbackFromParent is not a function"
AsyncStorage might not be the best solution for what you are trying. Using react-navigation for data delivery is not the best neither. I would suggest checking redux for storing states globally and delivering it to the pages when needed. There is also another way which is passing functions to the props of child components for pulling up any data from child to parent components. You can check this and this or the sample code is below.
Parent
class Parent extends Component {
updateState (data) {
this.setState(data);
}
render() {
<View>
<Child updateParentState={this.updateState.bind(this)} />
</View>
}
}
Child
class Child extends Component {
render() {
<View>
<Button title="Change" onPress={() => {this.props.updateParentState({name: 'test})}} />
</View>
}
}

React Native Navigator: Can I remove navigation gestures from a scene after a user action?

I want to disable the swipe from left pop gesture on the navigator after the side menu has been accessed within a scene. I don't want to disable it when the scene first renders, only when the side menu is open. I have an onOpen function I can call, but I don't know how to programatically change the navigation gestures without pushing another route.
I tried setting the configureScene prop of the navigator like this:
configureScene={() => {
return this.state.swipeBackNavigation ? FloatFromRight : Navigator.SceneConfigs.FloatFromRight;
}
and changing the state, but the component doesn't rerender
ideas would be appreciated
I believe you can just set gestures to null (effectively disabling it):
gestures: {}
I can't test this currently, but I suspect it will work (if I didn't screw up some syntax somewhere):
export default class Foo extends Component {
constructor(props){
super(props);
this.state = {
//initialize gestureChoice
gestureChoice: {},
}
}
disablePop(){
setState({ gestureChoice:{ gestures:{} } });
}
enablePop(){
setState({gestureChoice: ...Navigator.SceneConfigs.FloatFromRight});
}
render(){
return(
<Navigator
renderScene={(route, navigator) =>
return <SomeScene navigator={navigator} {...route.passprops} />
}
configureScene={(route, routeStack) =>
this.state.gestureChoice;
)}
/>
);
}
}
The idea being, you could use enablePop() and disablePop() whenever you would like.
This thread is probably helpful: https://github.com/facebook/react-native/issues/1014

Detect what specific page is open?

Pretty simple question.. does anyone have a solution for detecting what component is open in React Native? Treating a page like a component?
My solution right now is to use a global state manager like Redux or Mobx and just constantly update it with whatever component you have open.
In you're renderScene property of your Navigator, you have access to the route object. So you can pass that down into whatever component you need.
<Navigator
configureScene={() => Navigator.SceneConfigs.FadeAndroid}
style={styles.navigator}
initialRoute={{ title: 'Welcome' }}
renderScene={(route, navigator) => {
if (route.title === Welcome) {
return <Welcome navigator={navigator} route={route} />
// Now inside Welcome, if you do this.props.route.title
// you can access the current route name 'Welcome'
}
}}
/>

can't navigate to different screen using react-native-drawer with react-native-router-flux

I'm using react-native-router-flux for the Navigation system and using react-native-drawer for the sidebar. If an user clicks on menu item which is in the sidebar, I want to redirect user to different screen and close the Drawer. I'm using the following code snippets.
Actions.refresh({key: 'drawer', open: false}) to Close the Drawer
Actions.pageTwo.call() to Open the Second Page
Both are working without any problem if I'm using it in separate functions. But, If I trigger both the snippets from the same function. It is not working.
Thanks in Advance,
I have this scenario working for me with both libraries. At a high level I create a custom component to render the content of react-native-drawer which I pass a function to responsible for closing the drawer. Then when I press one of the drawer items I fire both a react-native-router-flux navigation action (in my case a PUSH) and I call the function passed in to close the drawer.
Here is what defining my drawer looks like. Remember DrawerNavigationConten is ultimately just a ListView or whatever implementation you prefer to render the drawer content.
class RootComponent extends Component {
...
closeDrawer() {
this.drawerRef.closeDrawer();
}
render() {
const drawerNavigationContent = (
<DrawerNavigationContent
closeDrawer={this.closeDrawer.bind(this)}
/>
);
return <Drawer
ref={(ref) => { this.drawer = ref; }}
content={drawerNavigationContent}
...
>
...here I define my react-native-router-flux scenes...
</Drawer>
);
}
...
}
Here are the important items in DrawerNavigationContent
import { Actions } from 'react-native-router-flux';
class DrawerNavigationContent extends Component {
...
navigate(location) {
Actions[location]();
this.props.closeDrawer();
}
...
render() {
...
<TouchableOpacity onPress={this.navigate(...some dynamic scene key...)}>
...
</TouchableOpacity>
...
}
}
I've worked with react-native-router-flux and had some issues with the drawer as well. If both scenes are children of the Drawer like so
<Scene key="navigationDrawer" component={NavigationDrawer}>
<Scene key="pageOne" component={PageOne}/>
<Scene key="pageTwo" component={PageTwo}/>
</Scene>
you can use Actions.pageTwo({key: 'navigationDrawer', open: false}) which should close the drawer upon navigation.
Otherwise you could use Actions.refresh({key: 'navigationDrawer', open: false) on PageTwo's componentWillMount or componentDidMount methods.