Permalink
Browse files

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
  • Loading branch information...
ericvicenti authored and facebook-github-bot-9 committed Feb 5, 2016
1 parent 2f73ad0 commit a3085464f6ea36fc6b53cd0c711c048ffb1516f9
Showing with 2,504 additions and 0 deletions.
  1. +105 −0 Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js
  2. +82 −0 Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js
  3. +264 −0 Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js
  4. +65 −0 Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js
  5. +81 −0 Examples/UIExplorer/NavigationExperimental/NavigationExampleTabBar.js
  6. +129 −0 Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js
  7. +104 −0 Examples/UIExplorer/NavigationExperimental/NavigationTabsExample.js
  8. +1 −0 Examples/UIExplorer/UIExplorerList.ios.js
  9. +160 −0 Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
  10. +149 −0 Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js
  11. BIN Libraries/CustomComponents/NavigationExperimental/back_chevron.png
  12. +225 −0 Libraries/NavigationExperimental/NavigationAnimatedView.js
  13. +51 −0 Libraries/NavigationExperimental/NavigationContainer.js
  14. +41 −0 Libraries/NavigationExperimental/NavigationExperimental.js
  15. +86 −0 Libraries/NavigationExperimental/NavigationRootContainer.js
  16. +196 −0 Libraries/NavigationExperimental/NavigationState.js
  17. +63 −0 Libraries/NavigationExperimental/NavigationView.js
  18. +38 −0 Libraries/NavigationExperimental/Reducer/NavigationFindReducer.js
  19. +24 −0 Libraries/NavigationExperimental/Reducer/NavigationReducer.js
  20. +141 −0 Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js
  21. +143 −0 Libraries/NavigationExperimental/Reducer/NavigationTabsReducer.js
  22. +46 −0 Libraries/NavigationExperimental/Reducer/__tests__/NavigationFindReducer-test.js
  23. +197 −0 Libraries/NavigationExperimental/Reducer/__tests__/NavigationStackReducer-test.js
  24. +55 −0 Libraries/NavigationExperimental/Reducer/__tests__/NavigationTabsReducer-test.js
  25. +57 −0 Libraries/NavigationExperimental/__tests__/NavigationState-test.js
  26. +1 −0 Libraries/react-native/react-native.js
@@ -0,0 +1,105 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+ NavigationExperimental,
+ StyleSheet,
+ ScrollView,
+} = React;
+var NavigationExampleRow = require('./NavigationExampleRow');
+var {
+ AnimatedView: NavigationAnimatedView,
+ Card: NavigationCard,
+ RootContainer: NavigationRootContainer,
+ Reducer: NavigationReducer,
+ Header: NavigationHeader,
+} = NavigationExperimental;
+
+const NavigationBasicReducer = NavigationReducer.StackReducer({
+ initialStates: [
+ {key: 'First Route'}
+ ],
+ matchAction: action => true,
+ actionStateMap: actionString => ({key: actionString}),
+});
+
+class NavigationAnimatedExample extends React.Component {
+ componentWillMount() {
+ this._renderNavigated = this._renderNavigated.bind(this);
+ }
+ render() {
+ return (
+ <NavigationRootContainer
+ reducer={NavigationBasicReducer}
+ persistenceKey="NavigationAnimatedExampleState"
+ renderNavigation={this._renderNavigated}
+ />
+ );
+ }
+ _renderNavigated(navigationState, onNavigate) {
+ if (!navigationState) {
+ return null;
+ }
+ return (
+ <NavigationAnimatedView
+ navigationState={navigationState}
+ style={styles.animatedView}
+ renderOverlay={(position, layout) => (
+ <NavigationHeader
+ navigationState={navigationState}
+ position={position}
+ getTitle={state => state.key}
+ />
+ )}
+ renderScene={(state, index, position, layout) => (
+ <NavigationCard
+ key={state.key}
+ index={index}
+ navigationState={navigationState}
+ position={position}
+ layout={layout}>
+ <ScrollView style={styles.scrollView}>
+ <NavigationExampleRow
+ text={navigationState.children[navigationState.index].key}
+ />
+ <NavigationExampleRow
+ text="Push!"
+ onPress={() => {
+ onNavigate('Route #' + navigationState.children.length);
+ }}
+ />
+ <NavigationExampleRow
+ text="Exit Animated Nav Example"
+ onPress={this.props.onExampleExit}
+ />
+ </ScrollView>
+ </NavigationCard>
+ )}
+ />
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ animatedView: {
+ flex: 1,
+ },
+ scrollView: {
+ marginTop: 64
+ },
+});
+
+module.exports = NavigationAnimatedExample;
@@ -0,0 +1,82 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const React = require('react-native');
+const {
+ NavigationExperimental,
+ ScrollView,
+ StyleSheet,
+} = React;
+const NavigationExampleRow = require('./NavigationExampleRow');
+const {
+ RootContainer: NavigationRootContainer,
+ Reducer: NavigationReducer,
+} = NavigationExperimental;
+const StackReducer = NavigationReducer.StackReducer;
+
+const NavigationBasicReducer = StackReducer({
+ initialStates: [
+ {key: 'first_page'}
+ ],
+ matchAction: action => true,
+ actionStateMap: action => ({key: action}),
+});
+
+const NavigationBasicExample = React.createClass({
+ render: function() {
+ return (
+ <NavigationRootContainer
+ reducer={NavigationBasicReducer}
+ persistenceKey="NavigationBasicExampleState"
+ 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('page #' + navState.children.length);
+ }}
+ />
+ <NavigationExampleRow
+ text="pop"
+ onPress={() => {
+ onNavigate(StackReducer.PopAction());
+ }}
+ />
+ <NavigationExampleRow
+ text="Exit Basic Nav Example"
+ onPress={this.props.onExampleExit}
+ />
+ </ScrollView>
+ );
+ }}
+ />
+ );
+ },
+});
+
+const styles = StyleSheet.create({
+ topView: {
+ backgroundColor: '#E9E9EF',
+ flex: 1,
+ paddingTop: 30,
+ },
+});
+
+module.exports = NavigationBasicExample;
Oops, something went wrong.

0 comments on commit a308546

Please sign in to comment.