Permalink
Browse files

Kill NavigationExperimental Containers

Summary:
The containers in NavigationExperimental are not appropraite because the state should be held by the app's architecture, be it redux, flux, or simple component state.

This diff moves the examples over to simple component state, but there are several other examples of how to use NavigationAnimatedView and the navigation reducers with redux:

- https://github.com/jlyman/RN-NavigationExperimental-Redux-Example
- Switching the f8 app with redux to navigation experimental: fbsamples/f8app#14

Reviewed By: hedgerwang

Differential Revision: D3219911

fb-gh-sync-id: eb0b323e2c165c32027fbd00dc6197ad441d6552
fbshipit-source-id: eb0b323e2c165c32027fbd00dc6197ad441d6552
  • Loading branch information...
ericvicenti authored and Facebook Github Bot 4 committed May 5, 2016
1 parent a412fd1 commit 14eb427a8061e0c904ace022535070150c6872d4
Showing with 413 additions and 610 deletions.
  1. +25 −22 Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
  2. +48 −39 Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js
  3. +27 −19 Examples/UIExplorer/NavigationExperimental/NavigationCardStackExample.js
  4. +29 −27 Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js
  5. +15 −14 Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.js
  6. +18 −14 Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js
  7. +36 −28 Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.js
  8. +44 −33 Examples/UIExplorer/NavigationExperimental/NavigationTicTacToeExample.js
  9. +8 −3 Examples/UIExplorer/UIExplorerActions.js
  10. +66 −68 Examples/UIExplorer/UIExplorerApp.android.js
  11. +51 −44 Examples/UIExplorer/UIExplorerApp.ios.js
  12. +7 −10 Examples/UIExplorer/UIExplorerExampleList.js
  13. +5 −8 Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
  14. +5 −2 Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
  15. +18 −11 Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js
  16. +9 −4 Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js
  17. +0 −3 Libraries/NavigationExperimental/NavigationAnimatedView.js
  18. +0 −53 Libraries/NavigationExperimental/NavigationContainer.js
  19. +0 −6 Libraries/NavigationExperimental/NavigationExperimental.js
  20. +0 −191 Libraries/NavigationExperimental/NavigationRootContainer.js
  21. +1 −2 Libraries/NavigationExperimental/NavigationView.js
  22. +1 −9 Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js
@@ -37,10 +37,9 @@ const {
Card: NavigationCard,
Header: NavigationHeader,
Reducer: NavigationReducer,
RootContainer: NavigationRootContainer,
} = NavigationExperimental;
const NavigationBasicReducer = NavigationReducer.StackReducer({
const ExampleReducer = NavigationReducer.StackReducer({
getPushedReducerForAction: (action) => {
if (action.type === 'push') {
return (state) => state || {key: action.key};
@@ -58,37 +57,41 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
});
class NavigationAnimatedExample extends React.Component {
constructor(props, context) {
super(props, context);
this.state = ExampleReducer();
}
componentWillMount() {
this._renderCard = this._renderCard.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this._renderNavigation = this._renderNavigation.bind(this);
this._renderScene = this._renderScene.bind(this);
this._renderTitleComponent = this._renderTitleComponent.bind(this);
this._handleAction = this._handleAction.bind(this);
}
render() {
return (
<NavigationRootContainer
reducer={NavigationBasicReducer}
ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
persistenceKey="NavigationAnimExampleState"
renderNavigation={this._renderNavigation}
/>
);
_handleAction(action): boolean {
if (!action) {
return false;
}
const newState = ExampleReducer(this.state, action);
if (newState === this.state) {
return false;
}
this.setState(newState);
return true;
}
handleBackAction() {
return (
this.navRootContainer &&
this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
);
handleBackAction(): boolean {
return this._handleAction({ type: 'BackAction', });
}
_renderNavigation(navigationState, onNavigate) {
if (!navigationState) {
return null;
}
render() {
return (
<NavigationAnimatedView
navigationState={navigationState}
navigationState={this.state}
style={styles.animatedView}
onNavigate={this._handleAction}
renderOverlay={this._renderHeader}
applyAnimation={(pos, navState) => {
Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
@@ -1,4 +1,11 @@
/**
* Copyright (c) 2013-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.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@@ -22,12 +29,10 @@ const {
} = ReactNative;
const NavigationExampleRow = require('./NavigationExampleRow');
const {
RootContainer: NavigationRootContainer,
Reducer: NavigationReducer,
} = NavigationExperimental;
const StackReducer = NavigationReducer.StackReducer;
const NavigationBasicReducer = NavigationReducer.StackReducer({
const ExampleReducer = NavigationReducer.StackReducer({
getPushedReducerForAction: (action) => {
if (action.type === 'push') {
return (state) => state || {key: action.key};
@@ -45,47 +50,51 @@ const NavigationBasicReducer = NavigationReducer.StackReducer({
});
const NavigationBasicExample = React.createClass({
getInitialState: function() {
return ExampleReducer();
},
render: function() {
return (
<NavigationRootContainer
reducer={NavigationBasicReducer}
persistenceKey="NavigationBasicExampleState"
ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
renderNavigation={(navState, onNavigate) => {
if (!navState) { return null; }
return (
<ScrollView style={styles.topView}>
<NavigationExampleRow
text={`Current page: ${navState.children[navState.index].key}`}
/>
<NavigationExampleRow
text={`Push page #${navState.children.length}`}
onPress={() => {
onNavigate({ type: 'push', key: 'page #' + navState.children.length });
}}
/>
<NavigationExampleRow
text="pop"
onPress={() => {
onNavigate(NavigationRootContainer.getBackAction());
}}
/>
<NavigationExampleRow
text="Exit Basic Nav Example"
onPress={this.props.onExampleExit}
/>
</ScrollView>
);
}}
/>
<ScrollView style={styles.topView}>
<NavigationExampleRow
text={`Current page: ${this.state.children[this.state.index].key}`}
/>
<NavigationExampleRow
text={`Push page #${this.state.children.length}`}
onPress={() => {
this._handleAction({ type: 'push', key: 'page #' + this.state.children.length });
}}
/>
<NavigationExampleRow
text="pop"
onPress={() => {
this._handleAction({ type: 'BackAction' });
}}
/>
<NavigationExampleRow
text="Exit Basic Nav Example"
onPress={this.props.onExampleExit}
/>
</ScrollView>
);
},
handleBackAction: function() {
return (
this.navRootContainer &&
this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
);
_handleAction(action) {
if (!action) {
return false;
}
const newState = ExampleReducer(this.state, action);
if (newState === this.state) {
return false;
}
this.setState(newState);
return true;
},
handleBackAction() {
return this._handleAction({ type: 'BackAction' });
},
});
@@ -33,18 +33,15 @@ const {
const {
CardStack: NavigationCardStack,
StateUtils: NavigationStateUtils,
RootContainer: NavigationRootContainer,
} = NavigationExperimental;
function createReducer(initialState) {
return (currentState, action) => {
return (currentState = initialState, action) => {
switch (action.type) {
case 'RootContainerInitialAction':
return initialState;
case 'push':
return NavigationStateUtils.push(currentState, {key: action.key});
case 'BackAction':
case 'back':
case 'pop':
return currentState.index > 0 ?
@@ -67,37 +64,48 @@ class NavigationCardStackExample extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {isHorizontal: true};
this.state = {
isHorizontal: true,
navState: ExampleReducer(undefined, {}),
};
}
componentWillMount() {
this._renderNavigation = this._renderNavigation.bind(this);
this._renderScene = this._renderScene.bind(this);
this._toggleDirection = this._toggleDirection.bind(this);
this._handleAction = this._handleAction.bind(this);
}
render() {
return (
<NavigationRootContainer
reducer={ExampleReducer}
renderNavigation={this._renderNavigation}
style={styles.main}
/>
);
}
_renderNavigation(navigationState, onNavigate) {
return (
<NavigationCardStack
direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
navigationState={navigationState}
onNavigate={onNavigate}
navigationState={this.state.navState}
onNavigate={this._handleAction}
renderScene={this._renderScene}
style={styles.main}
/>
);
}
_handleAction(action): boolean {
if (!action) {
return false;
}
const newState = ExampleReducer(this.state.navState, action);
if (newState === this.state.navState) {
return false;
}
this.setState({
navState: newState,
});
return true;
}
handleBackAction(): boolean {
return this._handleAction({ type: 'BackAction', });
}
_renderScene(/*NavigationSceneRendererProps*/ props) {
return (
<ScrollView style={styles.scrollView}>
@@ -36,10 +36,8 @@ const {
const {
CardStack: NavigationCardStack,
Container: NavigationContainer,
Header: NavigationHeader,
Reducer: NavigationReducer,
RootContainer: NavigationRootContainer,
View: NavigationView,
} = NavigationExperimental;
@@ -177,6 +175,7 @@ class ExampleTabScreen extends React.Component {
<NavigationCardStack
style={styles.tabContent}
navigationState={this.props.navigationState}
onNavigate={this.props.onNavigate}
renderOverlay={this._renderHeader}
renderScene={this._renderScene}
/>
@@ -225,40 +224,42 @@ class ExampleTabScreen extends React.Component {
);
}
}
ExampleTabScreen = NavigationContainer.create(ExampleTabScreen);
class NavigationCompositionExample extends React.Component {
navRootContainer: NavigationRootContainer;
render() {
return (
<NavigationRootContainer
reducer={ExampleAppReducer}
persistenceKey="NavigationCompositionState"
ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
renderNavigation={this.renderApp.bind(this)}
/>
);
state: NavigationParentState;
constructor() {
super();
this.state = ExampleAppReducer(undefined, {});
}
handleAction(action: Object): boolean {
if (!action) {
return false;
}
const newState = ExampleAppReducer(this.state, action);
if (newState === this.state) {
return false;
}
this.setState(newState);
return true;
}
handleBackAction(): boolean {
return (
this.navRootContainer &&
this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
);
return this.handleAction({ type: 'BackAction' });
}
renderApp(navigationState: NavigationParentState, onNavigate: Function) {
if (!navigationState) {
render() {
if (!this.state) {
return null;
}
return (
<View style={styles.topView}>
<ExampleMainView
navigationState={navigationState}
navigationState={this.state}
onExampleExit={this.props.onExampleExit}
onNavigate={this.handleAction.bind(this)}
/>
<NavigationExampleTabBar
tabs={navigationState.children}
index={navigationState.index}
tabs={this.state.children}
index={this.state.index}
onNavigate={this.handleAction.bind(this)}
/>
</View>
);
@@ -267,15 +268,18 @@ class NavigationCompositionExample extends React.Component {
class ExampleMainView extends React.Component {
_renderScene: NavigationSceneRenderer;
_handleNavigation: Function;
componentWillMount() {
this._renderScene = this._renderScene.bind(this);
this._handleNavigation = this._handleNavigation.bind(this);
}
render() {
return (
<NavigationView
navigationState={this.props.navigationState}
onNavigate={this._handleNavigation}
style={styles.tabsContent}
renderScene={this._renderScene}
/>
@@ -288,12 +292,12 @@ class ExampleMainView extends React.Component {
<ExampleTabScreen
key={'tab_screen' + scene.key}
navigationState={scene.navigationState}
onNavigate={this._handleNavigation.bind(this, scene.key)}
onNavigate={this._handleNavigation}
/>
);
}
_handleNavigation(tabKey, action) {
_handleNavigation(action: Object) {
if (ExampleExitAction.match(action)) {
this.props.onExampleExit();
return;
@@ -302,8 +306,6 @@ class ExampleMainView extends React.Component {
}
}
ExampleMainView = NavigationContainer.create(ExampleMainView);
const styles = StyleSheet.create({
topView: {
flex: 1,
Oops, something went wrong.

0 comments on commit 14eb427

Please sign in to comment.