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.

Can you confirm if this will be the first screen of the app? — Irfan Ayaz, Dec 29 '16 at 14:30
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. — Irfan Ayaz, Dec 30 '16 at 10:51
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? — Irfan Ayaz, Dec 30 '16 at 10:56
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` — sealskej, Jan 05 '17 at 14:05
@irfan-ayaz Could you provide example code for `ex-navigation`, please? — sealskej, Jan 05 '17 at 16:59
I can try and get it to work with ex-navigation if you are interested in that. — Irfan Ayaz, Jan 08 '17 at 19:30
@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 https://gist.github.com/sealskej/c7580d4fe34760b4ae5767487e5d1755 — sealskej, Jan 09 '17 at 15:14
I managed to do it with `ex-navigation` and `immediatelyResetStack` here https://gist.github.com/sealskej/a981e61d52567bcfeeacc9ade3ab3e0c Thanks @IrfanAyaz! — sealskej, Jan 10 '17 at 11:29
But it pre-initialise B and A, so their `componentDidMount()` and `render()` are called after stack reset. — sealskej, Jan 10 '17 at 11:51
@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. — sealskej, Jan 13 '17 at 09:30
Can I do the same with the new React Navigation (https://reactnavigation.org)? — sealskej, Feb 01 '17 at 22:00

score 1 · Answer 1 · answered Jan 06 '17 at 17:37

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

Synthetic scene stack (history) with React Native Router Flux

1 Answers1