React-native-router-flux: Cannot update during an existing state transition

Created on 18 Jul 2017  ·  16Comments  ·  Source: aksonov/react-native-router-flux

I'm sorry for this newbie question but I can't understand what's happening.

This is my code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

import {
  Scene,
  Router,
  Actions
} from 'react-native-router-flux';

class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="home" component={Home} title="Home"/> 
          <Scene key="details" component={Details} title="Details"/>
        </Scene>
      </Router>
    );
  }
}

class Home extends Component {
  render() {
    return (
      <View style={styles.container_home}>
        <Text style={styles.welcome}>
          Home Screen
        </Text>
        <Button
          onPress={()=>Actions.details()}
          title="Details"
          color="#ffffff"
        />
      </View>
    );
  }
}

class Details extends Component {
  render() {
    return (
      <View style={styles.container_details}>
        <Text style={styles.welcome}>
          Details Screen
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container_home: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  container_details: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'#FFC300'
  },
});

AppRegistry.registerComponent('react_native_router_flux', () => App);

And I am getting this message when I save with Hot Reloading:

screen shot 2017-07-18 at 3 43 32 pm

Thanks in advance!

picture necsoft
👍2

Most helpful comment

@aksonov would you mind commenting on this? What do you mean with top-level App as stateless component? I'm getting the same error as above and it is coming from mobx form the stacktrace.

picture compojoom on 21 Jul 2017
👍2

All 16 comments

It could be React Navigation issue. Could you please rework your example with ReactNavigation only and check.

aksonov picture aksonov on 18 Jul 2017

I've tried with this similar code and it doesn't happen:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';

import { StackNavigator } from 'react-navigation';

class HomeScreen extends Component {

    static navigationOptions = {
        title: 'Home',
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container_home}>
            <Text style={styles.welcome}>
            Home Screen
            </Text>
            <Button
            onPress={() => navigate('Details')}
            title="Details"
            color="#ffffff"
            />
            </View>
        );
    }
}

class DetailsScreen extends Component {

    static navigationOptions = {
        title: 'Details',
    };

    render() {
        return (
            <View style={styles.container_details}>
            <Text style={styles.welcome}>
            Details Screen
            </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container_home: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#333333',
    },
    container_details: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'gray',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'#FFC300'
    },
});

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

AppRegistry.registerComponent('react_navigation_test', () => SimpleApp);
necsoft picture necsoft on 18 Jul 2017

In case of me it this warning have next stacktrace:

reactConsoleErrorHandler ExceptionsManager.js:71
console.error YellowBox.js:67
printWarning warning.js:36
warning warning.js:60
getInternalInstanceReadyForUpdate ReactNativeStack-dev.js:1535
enqueueForceUpdate ReactNativeStack-dev.js:1552
ReactComponent.forceUpdate react.development.js:185
(anonymous) native.js:621
Reaction.runReaction mobx.js:2935
runReactionsHelper mobx.js:3062
reactionScheduler mobx.js:3040
(anonymous) mobx.js:3069
batchedUpdates ReactNativeStack-dev.js:2106
batchedUpdates$1 ReactNativeStack-dev.js:1465
reactionScheduler mobx.js:3069
runReactions mobx.js:3045
endBatch mobx.js:2602
endAction mobx.js:903
executeAction mobx.js:870
res mobx.js:858
NavigationStore.dispatch navigationStore.js:134
set navigationStore.js:76
Router Router.js:279
StatelessComponent.render ReactNativeStack-dev.js:1610
(anonymous) ReactNativeStack-dev.js:1881
measureLifeCyclePerf ReactNativeStack-dev.js:1625
_renderValidatedComponentWithoutOwnerOrContext ReactNativeStack-dev.js:1880
_renderValidatedComponent ReactNativeStack-dev.js:1890
_updateRenderedComponent ReactNativeStack-dev.js:1854
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
updateChildren ReactNativeStack-dev.js:2677
_reconcilerUpdateChildren ReactNativeStack-dev.js:2817
_updateChildren ReactNativeStack-dev.js:2852
updateChildren ReactNativeStack-dev.js:2849
receiveComponent ReactNativeStack-dev.js:2915
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
updateChildren ReactNativeStack-dev.js:2677
_reconcilerUpdateChildren ReactNativeStack-dev.js:2817
_updateChildren ReactNativeStack-dev.js:2852
updateChildren ReactNativeStack-dev.js:2849
receiveComponent ReactNativeStack-dev.js:2915
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
updateChildren ReactNativeStack-dev.js:2677
_reconcilerUpdateChildren ReactNativeStack-dev.js:2817
_updateChildren ReactNativeStack-dev.js:2852
updateChildren ReactNativeStack-dev.js:2849
receiveComponent ReactNativeStack-dev.js:2915
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
receiveComponent ReactNativeStack-dev.js:1784
receiveComponent ReactNativeStack-dev.js:1349
_updateRenderedComponentWithNextElement ReactNativeStack-dev.js:1859
_updateRenderedComponent ReactNativeStack-dev.js:1855
_performComponentUpdate ReactNativeStack-dev.js:1838
updateComponent ReactNativeStack-dev.js:1819
performUpdateIfNecessary ReactNativeStack-dev.js:1787
performUpdateIfNecessary ReactNativeStack-dev.js:1357
runBatchedUpdates ReactNativeStack-dev.js:1483
perform ReactNativeStack-dev.js:1391
perform ReactNativeStack-dev.js:1391
perform ReactNativeStack-dev.js:1460
flushBatchedUpdates ReactNativeStack-dev.js:1491
closeAll ReactNativeStack-dev.js:1421
perform ReactNativeStack-dev.js:1397
batchedUpdates ReactNativeStack-dev.js:2106
enqueueUpdate$1 ReactNativeStack-dev.js:1496
enqueueUpdate ReactNativeStack-dev.js:1525
enqueueSetState ReactNativeStack-dev.js:1571
ReactComponent.setState react.development.js:167
onStateChange connectAdvanced.js:222
dispatch createStore.js:186
(anonymous) redux-logger.js:1
(anonymous) middleware.js:72
dispatch applyMiddleware.js:45
(anonymous) utils.js:265
(anonymous) proc.js:491
exec scheduler.js:25
flush scheduler.js:66
asap scheduler.js:39
(anonymous) channel.js:197
emit channel.js:38
(anonymous) middleware.js:73
(anonymous) persistStore.js:55
complete getStoredState.js:73
(anonymous) getStoredState.js:52
(anonymous) AsyncStorage.js:86
__invokeCallback MessageQueue.js:301
(anonymous) MessageQueue.js:118
__guard MessageQueue.js:228
invokeCallbackAndReturnFlushedQueue MessageQueue.js:117
(anonymous) debuggerWorker.js:71

UlfR picture UlfR on 19 Jul 2017

It is strange why I can't reproduce it with Example project, can you? Anyway error is gone when you make top-level App as stateless component, please check

aksonov picture aksonov on 19 Jul 2017

Confirm. There are no warns, if top-level component with Router in render is stateless and rendered only once.

UlfR picture UlfR on 19 Jul 2017
👎4

I'm sorry but I don't understand what do you mean with stateless render. How can I avoid that message in my example?

necsoft picture necsoft on 19 Jul 2017

@aksonov would you mind commenting on this? What do you mean with top-level App as stateless component? I'm getting the same error as above and it is coming from mobx form the stacktrace.

compojoom picture compojoom on 21 Jul 2017
👍2

Check react docs about stateless components and check Example project:
const App = () => <Router>...

aksonov picture aksonov on 21 Jul 2017
👍1

This is working now:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

import {
  Scene,
  Router,
  Actions
} from 'react-native-router-flux';

const App = () => {
    return (
      <Router>
        <Scene key="root">
          <Scene key="home" component={Home} title="Home"/> 
          <Scene key="details" component={Details} title="Details"/>
        </Scene>
      </Router>
    );
}



class Home extends Component {
  render() {
    return (
      <View style={styles.container_home}>
        <Text style={styles.welcome}>
          Home Screen
        </Text>
        <Button
          onPress={()=>Actions.details()}
          title="Details"
          color="#ffffff"
        />
      </View>
    );
  }
}

class Details extends Component {
  render() {
    return (
      <View style={styles.container_details}>
        <Text style={styles.welcome}>
          Details Screen
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container_home: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  container_details: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'#FFC300'
  },
});

AppRegistry.registerComponent('react_native_router_flux', () => App);
necsoft picture necsoft on 22 Jul 2017
👍1

I don't understand what I'm doing wrong.

This is my original code:

class App extends Component {

    renderBackButton(nav) {
       ...
        return nav.navigationState.index ? (
                <TouchableOpacity onPress={onPress} style={styles.backButtonStyle}>
                    {button}

                </TouchableOpacity>
            ) : null;
    }

    render() {
        let owner = this.props.owner, loggedIn;
        try {
            if (owner.user.user_id) {
                loggedIn = true;
            }
        }
        catch (e) {
            loggedIn = false;
        }

        return (
            <Router>
                <Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
                    <Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
                           initial={loggedIn ? false : true}
                           title="Login or register"/>
                    <Scene key="login" hideNavBar={true} component={Login} title="Login"/>
                    <Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
....
                </Scene>
            </Router>
        )
    }
}

const selector = (state) => {
    return {
        owner: state.owner
    }
};

export default connect(selector, actionCreators)(App);

And this is what I transformed it to:

const App = (owner) => {

    console.log(owner);
    let loggedIn;
    try {
        if (owner.user.user_id) {
            loggedIn = true;
        }
    }
    catch (e) {
        loggedIn = false;
    }
    return (
        <Router>
            <Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
                <Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
                       initial={loggedIn ? false : true}
                       title="Login or register"/>
                <Scene key="login" hideNavBar={true} component={Login} title="Login"/>
                <Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
......
            </Scene>
        </Router>
    )
}

class BlaBla extends Component {
    render() {
        return <App owner={this.props.owner}/>
    }
}

const selector = (state) => {
    return {
        owner: state.owner
    }
};

export default connect(selector, actionCreators)(BlaBla);

Any idea what I'm doing wrong?

compojoom picture compojoom on 22 Jul 2017

See code above

22 июля 2017 г., в 13:05, Daniel Dimitrov notifications@github.com написал(а):

I don't understand what I'm doing wrong.

This is my original code:

class App extends Component {

renderBackButton(nav) {
   ...
    return nav.navigationState.index ? (
            <TouchableOpacity onPress={onPress} style={styles.backButtonStyle}>
                {button}

            </TouchableOpacity>
        ) : null;
}

render() {
    let owner = this.props.owner, loggedIn;
    try {
        if (owner.user.user_id) {
            loggedIn = true;
        }
    }
    catch (e) {
        loggedIn = false;
    }

    return (
        <Router>
            <Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
                <Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
                       initial={loggedIn ? false : true}
                       title="Login or register"/>
                <Scene key="login" hideNavBar={true} component={Login} title="Login"/>
                <Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>

....


)
}
}

const selector = (state) => {
return {
owner: state.owner
}
};

export default connect(selector, actionCreators)(App);
And this is what I transformed it to:

const App = (owner) => {

console.log(owner);
let loggedIn;
try {
if (owner.user.user_id) {
loggedIn = true;
}
}
catch (e) {
loggedIn = false;
}
return (

initial={loggedIn ? false : true}
title="Login or register"/>


......


)
}

class BlaBla extends Component {
render() {
return
}
}

const selector = (state) => {
return {
owner: state.owner
}
};

export default connect(selector, actionCreators)(BlaBla);
Any idea what I'm doing wrong?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

aksonov picture aksonov on 22 Jul 2017

@aksonov - I just did a little digging. Would you mind explaining why does the component need to be stateless?

I have an App component that initialises my state, loads the redux store and then passes it to the mainApp which renders the scenes.
The mainApp needs to know about part of the state in order to decide which scene to render first. So I'm connecting my mainApp to redux and passing it the part of the state it's interested in. The second that part of the state changes - I get the error. If I connect my component to redux, but subscribe to an empty state - then no error...
Why is it now a problem to have a state? one way around this is to pass the state as Prop to my mainApp like:

Then I can read the part of the state I'm interested in and set which scene to render first, but I don't understand why is it now no go to connect the router to the state in v4? My code worked fine with v3.

compojoom picture compojoom on 2 Aug 2017
👍1

I am having the same problem. As suggested rewriting it as stateless component is no option for me because I pass props down from another component.

Stophface picture Stophface on 16 Aug 2017

@Stophface Maybe you need to reconsider architecture of your app. react-navigation, for example, provides only static methods to create navigators - you don't have any way to pass props from other components runtime.

aksonov picture aksonov on 16 Aug 2017

@aksonov Basically I am writing this https://www.grok-interactive.com/blog/react-native-selection-list/ inside a DrawerNavigation from react navigation as a contentComponent. When I am, lets say, two screens "deep" as shown in the example, I need to close the DrawerNavigation on a Press of a Button. That only works when I pass down the props of this.props.navigation in order to call onRight={() => navigate('DrawerClose')}.

Stophface picture Stophface on 17 Aug 2017

This is working now:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

import {
  Scene,
  Router,
  Actions
} from 'react-native-router-flux';

const App = () => {
    return (
      <Router>
        <Scene key="root">
          <Scene key="home" component={Home} title="Home"/> 
          <Scene key="details" component={Details} title="Details"/>
        </Scene>
      </Router>
    );
}



class Home extends Component {
  render() {
    return (
      <View style={styles.container_home}>
        <Text style={styles.welcome}>
          Home Screen
        </Text>
        <Button
          onPress={()=>Actions.details()}
          title="Details"
          color="#ffffff"
        />
      </View>
    );
  }
}

class Details extends Component {
  render() {
    return (
      <View style={styles.container_details}>
        <Text style={styles.welcome}>
          Details Screen
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container_home: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  container_details: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'#FFC300'
  },
});

AppRegistry.registerComponent('react_native_router_flux', () => App);

What was the issue ? Kindly explain !

AliYar-Khan picture AliYar-Khan on 23 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xnog picture xnog  ·  3Comments
tonypeng picture tonypeng  ·  3Comments
maphongba008 picture maphongba008  ·  3Comments
willmcclellan picture willmcclellan  ·  3Comments
booboothefool picture booboothefool  ·  3Comments