Synthetic scene stack (history) with React Native Router Flux

Question

Is there any way how to synthetically define scene stack (history) with React Native Router Flux? Let's say I have an app, where the user can naturally navigate from A –> B –> C. I'd like to initiate app on scene C, which has the same history as natural behavior (A -> B -> C), so user navigates back to B from initially opened scene C.

EDIT: I guess it should be somehow achievable by using Redux Persist, but I've found this related issue.

Highland

Can you confirm if this will be the first screen of the app? – Kuster

Yes, C would be the first screen of the app. – Highland

This is possible with ex-navigation where you can provide a navigation stack and index of the stack to show via immediatelyresetstack method. Couldn't find any such thing in react native router flux. – Kuster

One way I could think of is, use "react-native-splash-screen" for splash screen of the app. And inside componentDidMount of A based on some global check of app start, push B and similarly inside componentDidMount of B based on same check, push C. You can then remove the splash screen in componentDidMount of scene C (this splash library allows you to run the app behind splash screen and remove it anywhere you want) and also change the global variable of app start so that they don't get pushed when you use them again inside app with some other flow. Will that work for you? – Kuster

did you try this? – Kuster

No, I haven't since I don't want to pre-initialise stack (B and A screen) before C pops to B. I'll give a try to ex-navigation – Highland

@irfan-ayaz Could you provide example code for ex-navigation, please? – Highland

github.com/exponent/ex-navigation – Kuster

I can try and get it to work with ex-navigation if you are interested in that. – Kuster

Sure, please try. – Highland

@IrfanAyaz I've already tried to get ex-navigation and redux-persist working, but I'm getting store.subscribe is not function error with this code gist.github.com/sealskej/c7580d4fe34760b4ae5767487e5d1755 – Highland

I managed to do it with ex-navigation and immediatelyResetStack here gist.github.com/sealskej/a981e61d52567bcfeeacc9ade3ab3e0c Thanks @IrfanAyaz! – Highland

But it pre-initialise B and A, so their componentDidMount() and render() are called after stack reset. – Highland

Do i get the bounty then? if your problem is resolved? – Kuster

@IrfanAyaz Thank you, it's a good and working advice, but unfortunately it doesn't apply to the original question related to RN Router Flux. – Highland

Great that you got it working! – Kuster

Can I do the same with the new React Navigation (reactnavigation.org)? – Highland

Answer 1

I managed to do it with a fake empty initial scene. It's very hacky solution and animation from C to B still doesn't work correctly.

import React, {Component} from "react";
import {AppRegistry} from "react-native";
import {Scene, Router, Actions, ActionConst} from "react-native-router-flux";
import A from "./A";
import B from "./B";
import C from "./C";

class App extends React.Component {
  componentDidMount() {
    const params = {
      onBack: () => Actions.b({
        direction: 'fade',
        onBack: () => Actions.a({
          direction: 'fade'
        })
      }),
      duration: 0
    };
    Actions.c(params);
  }

  render() {
    return (
        <Router>
          <Scene key="root" style={{paddingTop: 60}}>
            <Scene key="empty"
                   component={class extends Component{render() {return null}}}
                   />
            <Scene key="a" component={A} title='A' type={ActionConst.RESET}/>
            <Scene key="b" component={B} title='B'/>
            <Scene key="c" component={C} title='C'/>
          </Scene>
        </Router>
    )
  }
}

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

Highland