Synthetic scene stack (history) with React Native Router Flux

1.3k views Asked by At

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.

1

There are 1 answers

0
sealskej On

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