_reactNativeRouterFlux.Actions.create is not a function

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.3
• react-native v0.45.1

simple code:

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="Start" component={Start} hideNavBar={true} duration={0}/>
    <Scene key="Login" component={Login} hideNavBar={true}  duration={0}/>
    <Scene key="ChatList" component={ChatList} duration={0}/>
  </Scene>
);

[aksonov]

It is wrong usage of RNRF.

1. Router should be TOP-LEVEL component.
2. render* functions should be passed to “Scene” not via refresh
3. You really should use Redux/Mobx for state management. If you want to dynamically switch from Start to Login and then to ChatList the best way is use ‘tabs’ container and Switch statement for v3 (and just Actions[KEY] for v4)

RNRF is not replacement for Redux/Mobx, it is just easy navigation. For some reasons many people try to use it as state management tool.

[abdurrahmanekr]

• My application starts with start.js :

...
componentWillMount() {
  this.isLoggedIn();
}

isLoggedIn() {
  isLoggedIn().then((res) => {
    if (res)
      Actions.ChatList({type: 'reset'});
    else
      Actions.Login({type: 'reset'});
  });
}
...

When we go to ChatList.js by using “type: reset” command, we can come back. (“Type: reset” command is not working in v4) I am updating the navbar with “Actions.refresh” in the ChatList.js file:

...
Actions.refresh({
  renderLeftButton: () => {
    return (
      ...
    );
  },
  renderRightButton: () => {
    return (
      ...
    );
  }
})
...

:-----------------v3.39.2--------------------😐:------------------v4.0.0-beta.3----------------:

 

• I need to use a view globally. I did this in the index.ios.js file. I do not know if a global view is added on router-flux. That’s why I did it in index.ios.js :

...
return (
  <View
    style={{ flex: 1 }}>
    <ConnectionBar
      show={this.state.connectionShow}
      type={this.state.connection}
      onPress={this.onClickConnectionStatus.bind(this)}/>

    <ConferenceCallPopupView
      name={this.state.conference.name}
      callHim={this.state.conference.callHim}
      callingMe={this.state.conference.callingMe}
      photo={this.state.conference.photo}
      onSelect={this.onClickConference.bind(this)}
      model={this.state.conference}
      show={this.state.conference.show}/>

    <MenuContext style={{ flex: 1}}>
      <StatusBar
        backgroundColor="#295870"
        barStyle="light-content"/>
      {/*routing*/}
      <Router>
        <Scene key="root">
          <Scene key="Start" component={Start} hideNavBar={true} duration={0}/>
          <Scene key="Login" component={Login} hideNavBar={true}  duration={0}/>
          <Scene key="ChatList" unmountScenes component={ChatList} duration={0}/>
        </Scene>
      </Router>
      {/*routing*/}
    </MenuContext>
  </View>
);
...