Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Synthetic scene stack (history) with React Native Router Flux

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.

like image 567
sealskej Avatar asked Dec 25 '16 11:12

sealskej


1 Answers

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);
like image 54
sealskej Avatar answered Oct 14 '22 21:10

sealskej