react-native/Libraries/NavigationExperimental/NavigationRootContainer.js
Eric Vicenti a3085464f6 NavigationExperimental
Summary:
A new API to unify internal navigation. Also addresses a highly-rated community 'pain': https://productpains.com/post/react-native/better-navigator-api-and-docs/

Offers the following improvements:

- Redux-style navigation logic is easy to reason about
- Navigation state can be easily saved and restored through refreshes
- Declarative navigation views can be implemented in native or JS
- Animations and gestures are isolated and now use the Animated library

public

Reviewed By: hedgerwang

Differential Revision: D2798048

fb-gh-sync-id: 88027ef9ead8a80afa38354252bc377455cc6dbb
2016-02-05 14:26:35 -08:00

87 lines
2.1 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule NavigationRootContainer
* @flow
*/
'use strict';
var AsyncStorage = require('AsyncStorage');
var React = require('React');
import type {
NavigationState,
NavigationReducer
} from 'NavigationState';
type NavigationRenderer = (
navigationState: NavigationState,
onNavigate: Function
) => ReactElement;
type Props = {
renderNavigation: NavigationRenderer;
reducer: NavigationReducer;
persistenceKey: ?string;
};
class NavigationRootContainer extends React.Component {
props: Props;
constructor(props: Props) {
super(props);
this.handleNavigation = this.handleNavigation.bind(this);
let navState = null;
if (!this.props.persistenceKey) {
navState = this.props.reducer(null, null);
}
this.state = { navState };
}
componentDidMount() {
if (this.props.persistenceKey) {
AsyncStorage.getItem(this.props.persistenceKey, (err, storedString) => {
if (err || !storedString) {
this.setState({
navState: this.props.reducer(null, null),
});
return;
}
this.setState({
navState: JSON.parse(storedString),
});
});
}
}
getChildContext(): Object {
return {
onNavigate: this.handleNavigation,
};
}
handleNavigation(action: Object) {
const navState = this.props.reducer(this.state.navState, action);
this.setState({
navState,
});
if (this.props.persistenceKey) {
AsyncStorage.setItem(this.props.persistenceKey, JSON.stringify(navState));
}
}
render(): ReactElement {
var navigation = this.props.renderNavigation(
this.state.navState,
this.handleNavigation
);
return navigation;
}
}
NavigationRootContainer.childContextTypes = {
onNavigate: React.PropTypes.func,
};
module.exports = NavigationRootContainer;