_reactNativeRouterFlux.Actions.create is not a function

[abdurrahmanekr]

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]

Sorry, this way is not supported yet. Could you try

const App = () =>
<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" component={ChatList} duration={0}/>
  </Scene>
</Router>

P.S. duration is not supported because new ReactNavigation doesn't support it. The best way is to make root scene as 'tabs' (add 'tabs' attribute and 'hideTabBar')

[abdurrahmanekr]

It's worked but when I switch from v3.39.2 to v.4.0.0-beta.*, I get a lot of errors. When will the document be ready for v4?
The major problem I'm facing: Router is running and all the Scene constructors are running. How do I avoid it? Thank you

[aksonov]

You may add 'lazy' attribute to 'tabs' Scene to avoid constructing of inactive scenes. Any PR about documentation is welcome.

[aksonov]

For now I'm going to collect 'breaking changes' topic comparing v3 and v4. So your feedback is very welcome.

[abdurrahmanekr]

Ok. The other major problem I'm facing :

• Actions.refresh not working (renderLeftButton, renderTitle, ..)
• ComponentWillMount and componentWillUnmount are running when the setState update is in the file where the Router is located.
  If i encounter other problems i will inform you

[aksonov]

1. Check Example, Actions.refresh works for Login.js page. Passing renderLeftButton to 'refresh' is definitely anti-pattern - renderLeftButton is 'function' already and could be flexible enough.
2. Could you clarify? You definitely should not use setState within Router...

[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>
);
...

[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.