Merge pull request #126 from grahammendick/react-move

grahammendick · Apr 30, 2017 · 1fc63fc · 1fc63fc
2 parents bcc9482 + 4336d11
commit 1fc63fc
Show file tree

Hide file tree

Showing 23 changed files with 525 additions and 489 deletions.
diff --git a/NavigationReactNative/sample/gesture/Gesture.js b/NavigationReactNative/sample/gesture/Gesture.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import {Dimensions, View} from 'react-native';
-import {NavigationMotion, spring} from 'navigation-react-native';
+import {NavigationMotion} from 'navigation-react-native';
 
 export default ({stateNavigator}) => (
   <NavigationMotion
     startStateKey="scene"
-    unmountedStyle={{translate: spring(1)}}
-    mountedStyle={(state, {translate = 0}) => ({translate: spring(translate)})}
-    crumbStyle={{translate: spring(0)}}
+    unmountedStyle={{translate: 1}}
+    mountedStyle={(state, {translate = 0}) => ({translate})}
+    crumbStyle={{translate: 0}}
     style={{flex: 1}}
     stateNavigator={stateNavigator}>
     {({translate}, scene, url) => (

diff --git a/NavigationReactNative/sample/gesture/Scene.js b/NavigationReactNative/sample/gesture/Scene.js
@@ -5,13 +5,19 @@ import {NavigationBackAndroid, spring} from 'navigation-react-native';
 export default class Next extends React.Component {
   constructor(props) {
     super(props);
+    const {url, crumbs} = props.stateNavigator.stateContext;
+    this.url = url;
+    this.crumbs = crumbs;
     this.panResponder = PanResponder.create({
       onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder.bind(this),
       onPanResponderMove: this.handlePanResponderMove.bind(this),
       onPanResponderRelease: this.handlePanResponderEnd.bind(this),
       onPanResponderTerminate: this.handlePanResponderEnd.bind(this),
     });
   }
+  shouldComponentUpdate(props) {
+    return this.url === props.stateNavigator.stateContext.url;
+  }
   handleMoveShouldSetPanResponder(e, gestureState) {
     var {stateNavigator} = this.props; 
     return stateNavigator.canNavigateBack(1);
@@ -29,11 +35,10 @@ export default class Next extends React.Component {
   }
   render() {
     const {stateNavigator} = this.props;
-    const {url, crumbs} = stateNavigator.stateContext;
     return (
       <View
         style={[
-          {backgroundColor: crumbs.length % 2 === 0 ? '#036' : '#f36207'},
+          {backgroundColor: this.crumbs.length % 2 === 0 ? '#036' : '#f36207'},
           styles.scene
         ]}
         {...this.panResponder.panHandlers}
@@ -42,10 +47,10 @@ export default class Next extends React.Component {
         <TouchableHighlight
           underlayColor="transparent"
           onPress={() => {
-            if (url === stateNavigator.stateContext.url)
+            if (this.url === stateNavigator.stateContext.url)
               stateNavigator.navigate('scene');
         }}>
-          <Text style={styles.text}>Scene {crumbs.length}</Text>
+          <Text style={styles.text}>Scene {this.crumbs.length}</Text>
         </TouchableHighlight>
       </View>
     )

diff --git a/NavigationReactNative/sample/medley/Medley.js b/NavigationReactNative/sample/medley/Medley.js
@@ -10,7 +10,7 @@ export default ({stateNavigator}) => (
     crumbStyle={state => state.crumbStyle()}
     style={{flex: 1}}
     stateNavigator={stateNavigator}>
-    {({translateX  = 0, translateY = 0}, scene, url) => (
+    {({translateX = 0, translateY = 0}, scene, url) => (
       <View
         key={url}
         style={{

diff --git a/NavigationReactNative/sample/medley/Scene.js b/NavigationReactNative/sample/medley/Scene.js
@@ -9,33 +9,44 @@ const nextDirection = {
   West: 'North',
 };
 
-export default ({direction, color, stateNavigator}) => {
-  const {url, crumbs} = stateNavigator.stateContext;
-  return (
-    <View style={[
-      styles.scene,
-      {backgroundColor: color}
-    ]}>
-      <NavigationBackAndroid stateNavigator={stateNavigator} />
-      <TouchableHighlight
-        underlayColor={color}
-        onPress={() => {
-          if (url === stateNavigator.stateContext.url)
-            stateNavigator.navigate(`scene${nextDirection[direction]}`);
-      }}>
-        <Text style={styles.text}>{direction} {crumbs.length}</Text>
-      </TouchableHighlight>
-      {stateNavigator.canNavigateBack(1) && <TouchableHighlight
-        underlayColor={color}
-        onPress={() => {
-          if (url === stateNavigator.stateContext.url)
-            stateNavigator.navigateBack(1);
-      }}>
-        <Text style={styles.text}>Back</Text>
-      </TouchableHighlight>}
-    </View>
-  )
-};
+export default class Scene extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const {url, crumbs} = props.stateNavigator.stateContext;
+    this.url = url;
+    this.crumbs = crumbs;
+  }
+  shouldComponentUpdate(props) {
+    return this.url === props.stateNavigator.stateContext.url;
+  }
+  render() {
+    const {direction, color, stateNavigator} = this.props;
+    return (
+      <View style={[
+        styles.scene,
+        {backgroundColor: color}
+      ]}>
+        <NavigationBackAndroid stateNavigator={stateNavigator} />
+        <TouchableHighlight
+          underlayColor={color}
+          onPress={() => {
+            if (this.url === stateNavigator.stateContext.url)
+              stateNavigator.navigate(`scene${nextDirection[direction]}`);
+        }}>
+          <Text style={styles.text}>{direction} {this.crumbs.length}</Text>
+        </TouchableHighlight>
+        {stateNavigator.canNavigateBack(1) && <TouchableHighlight
+          underlayColor={color}
+          onPress={() => {
+            if (this.url === stateNavigator.stateContext.url)
+              stateNavigator.navigateBack(1);
+        }}>
+          <Text style={styles.text}>Back</Text>
+        </TouchableHighlight>}
+      </View>
+    )
+  }
+}
 
 const styles = StyleSheet.create({
   scene: {

diff --git a/NavigationReactNative/sample/medley/createStateNavigator.js b/NavigationReactNative/sample/medley/createStateNavigator.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import {StateNavigator} from 'navigation';
 import Scene from './Scene';
-import {spring} from 'navigation-react-native';
 
 export default () => {
   const stateNavigator = new StateNavigator([
@@ -17,20 +16,20 @@ export default () => {
   sceneSouth.renderScene = (data, moveScene) => <Scene direction="South" color="green" stateNavigator={stateNavigator}/>;
   sceneWest.renderScene = (data, moveScene) => <Scene direction="West" color="black" stateNavigator={stateNavigator}/>;
 
-  sceneNorth.unmountedStyle = () => ({translateY: spring(-1, {stiffness: 90})});
-  sceneEast.unmountedStyle = () => ({translateX: spring(1, {stiffness: 90})});
-  sceneSouth.unmountedStyle = () => ({translateY: spring(1, {stiffness: 90})});
-  sceneWest.unmountedStyle = () => ({translateX: spring(-1, {stiffness: 90})});
+  sceneNorth.unmountedStyle = () => ({translateY: -1});
+  sceneEast.unmountedStyle = () => ({translateX: 1});
+  sceneSouth.unmountedStyle = () => ({translateY: 1});
+  sceneWest.unmountedStyle = () => ({translateX: -1});
 
-  sceneNorth.mountedStyle = () => ({translateY: spring(0, {stiffness: 90})});
-  sceneEast.mountedStyle = () => ({translateX: spring(0, {stiffness: 90})});
-  sceneSouth.mountedStyle = () => ({translateY: spring(0, {stiffness: 90})});
-  sceneWest.mountedStyle = () => ({translateX: spring(0, {stiffness: 90})});
+  sceneNorth.mountedStyle = () => ({translateY: 0});
+  sceneEast.mountedStyle = () => ({translateX: 0});
+  sceneSouth.mountedStyle = () => ({translateY: 0});
+  sceneWest.mountedStyle = () => ({translateX: 0});
 
-  sceneNorth.crumbStyle = () => ({translateY: spring(-.3, {stiffness: 90})});
-  sceneEast.crumbStyle = () => ({translateX: spring(.3, {stiffness: 90})});
-  sceneSouth.crumbStyle = () => ({translateY: spring(.3, {stiffness: 90})});
-  sceneWest.crumbStyle = () => ({translateX: spring(-.3, {stiffness: 90})});
+  sceneNorth.crumbStyle = () => ({translateY: -.3});
+  sceneEast.crumbStyle = () => ({translateX: .3});
+  sceneSouth.crumbStyle = () => ({translateY: .3});
+  sceneWest.crumbStyle = () => ({translateX: -.3});
 
   return stateNavigator;
 }
diff --git a/NavigationReactNative/sample/twitter/Follows.js b/NavigationReactNative/sample/twitter/Follows.js
@@ -2,42 +2,51 @@ import React from 'react';
 import {StyleSheet, Text, Image, ListView, View, TouchableHighlight} from 'react-native';
 import Svg, {Path} from 'react-native-svg';
 
-export default ({follows, stateNavigator}) => {
-  const {url} = stateNavigator.stateContext;
-  const dataSource = new ListView
-    .DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
-    .cloneWithRows(follows);
-  return (
-    <ListView
-        dataSource={dataSource}
-        renderRow={({id, name, logo}) => (
-        <TouchableHighlight
-          underlayColor="white"
-          onPress={() => {
-            if (url === stateNavigator.stateContext.url)
-              stateNavigator.navigate('timeline', {id});
-        }}>
-          <View style={styles.follow}>
-            <Svg
-              style={styles.icon}
-              height="28"
-              width="28"
-              viewBox="0 0 46 72">
-              <Path
-                d="M29.986 9c-14.888 0-27 12.112-27 27s12.112 27 27 27 27-12.112 27-27-12.112-27-27-27zM42.09 47H17.882c-.757 0-.917-.93-.917-2.325 0-.975.325-2.052 1.393-2.616l.033-.022c.706-.429 4.002-1.314 6.945-2.012 1.645 1.861 3.465 2.325 4.651 2.325s3.006-.464 4.65-2.325c2.942.698 6.239 1.583 6.945 2.012.011.007.023.014.033.022 1.068.564 1.393 1.641 1.393 2.616C43.007 46.07 42.847 47 42.09 47zM29.986 23c6.147 0 6.284 6.715 6.284 6.715s.993.044.772 1.86c-.208 1.716-1.307 3.001-2.028 3.001 0 0-1.924 5.003-5.028 5.003s-5.028-5.003-5.028-5.003c-.721 0-1.82-1.285-2.028-3.001-.221-1.815.772-1.86.772-1.86s.347-5.331 3.244-5.677c1.025-.924 2.256-1.038 3.04-1.038z"
-                fill="rgb(29, 161, 242)"/>
-            </Svg>
-            <View>
-              <Image style={styles.logo} source={logo} />
-              <View style={styles.details}>
-              <Text style={styles.name}>{name}</Text>
-              <Text>followed you.</Text>
+export default class Follows extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.url = props.stateNavigator.stateContext.url;
+  }
+  shouldComponentUpdate(props) {
+    return this.url === props.stateNavigator.stateContext.url;
+  }
+  render() {
+    const {follows, stateNavigator} = this.props;
+    const dataSource = new ListView
+      .DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
+      .cloneWithRows(follows);
+    return (
+      <ListView
+          dataSource={dataSource}
+          renderRow={({id, name, logo}) => (
+          <TouchableHighlight
+            underlayColor="white"
+            onPress={() => {
+              if (this.url === stateNavigator.stateContext.url)
+                stateNavigator.navigate('timeline', {id});
+          }}>
+            <View style={styles.follow}>
+              <Svg
+                style={styles.icon}
+                height="28"
+                width="28"
+                viewBox="0 0 46 72">
+                <Path
+                  d="M29.986 9c-14.888 0-27 12.112-27 27s12.112 27 27 27 27-12.112 27-27-12.112-27-27-27zM42.09 47H17.882c-.757 0-.917-.93-.917-2.325 0-.975.325-2.052 1.393-2.616l.033-.022c.706-.429 4.002-1.314 6.945-2.012 1.645 1.861 3.465 2.325 4.651 2.325s3.006-.464 4.65-2.325c2.942.698 6.239 1.583 6.945 2.012.011.007.023.014.033.022 1.068.564 1.393 1.641 1.393 2.616C43.007 46.07 42.847 47 42.09 47zM29.986 23c6.147 0 6.284 6.715 6.284 6.715s.993.044.772 1.86c-.208 1.716-1.307 3.001-2.028 3.001 0 0-1.924 5.003-5.028 5.003s-5.028-5.003-5.028-5.003c-.721 0-1.82-1.285-2.028-3.001-.221-1.815.772-1.86.772-1.86s.347-5.331 3.244-5.677c1.025-.924 2.256-1.038 3.04-1.038z"
+                  fill="rgb(29, 161, 242)"/>
+              </Svg>
+              <View>
+                <Image style={styles.logo} source={logo} />
+                <View style={styles.details}>
+                <Text style={styles.name}>{name}</Text>
+                <Text>followed you.</Text>
+                </View>
               </View>
             </View>
-          </View>
-      </TouchableHighlight>
-    )} />
-  );
+        </TouchableHighlight>
+      )} />
+    );
+  }
 };
 
 const styles = StyleSheet.create({

diff --git a/NavigationReactNative/sample/twitter/Home.android.js b/NavigationReactNative/sample/twitter/Home.android.js
@@ -4,11 +4,23 @@ import TabBar from './TabBar';
 import Tweets from './Tweets';
 import Follows from './Follows';
 
-export default ({tweets, follows, stateNavigator}) => (
-  <ScrollableTabView
-    prerenderingSiblingsNumber={1}
-    renderTabBar={() => <TabBar stateNavigator={stateNavigator} />}>
-    <Tweets tweets={tweets} stateNavigator={stateNavigator} tabLabel="Timeline" />
-    <Follows follows={follows} stateNavigator={stateNavigator} tabLabel="Notification" />
-  </ScrollableTabView>
-);
+export default class Home extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.url = props.stateNavigator.stateContext.url;
+  }
+  shouldComponentUpdate(props) {
+    return this.url === props.stateNavigator.stateContext.url;
+  }
+  render() {
+    const {tweets, follows, stateNavigator} = this.props;
+    return (
+      <ScrollableTabView
+        prerenderingSiblingsNumber={1}
+        renderTabBar={() => <TabBar stateNavigator={stateNavigator} />}>
+        <Tweets tweets={tweets} stateNavigator={stateNavigator} tabLabel="Timeline" />
+        <Follows follows={follows} stateNavigator={stateNavigator} tabLabel="Notification" />
+      </ScrollableTabView>
+    );
+  }
+};
diff --git a/NavigationReactNative/sample/twitter/Home.ios.js b/NavigationReactNative/sample/twitter/Home.ios.js
@@ -2,16 +2,28 @@ import React from 'react';
 import {StyleSheet, Text, ScrollView, View} from 'react-native';
 import Tweets from './Tweets';
 
-export default ({tweets, stateNavigator}) => (
-  <View style={{flex: 1}}>
-    <View style={styles.banner}>
-      <Text style={styles.title}>Home</Text>
-    </View>
-    <ScrollView style={styles.view}>
-      <Tweets tweets={tweets} stateNavigator={stateNavigator} />
-    </ScrollView>
-  </View>
-);
+export default class Home extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.url = props.stateNavigator.stateContext.url;
+  }
+  shouldComponentUpdate(props) {
+    return this.url === props.stateNavigator.stateContext.url;
+  }
+  render() {
+    const {tweets, stateNavigator} = this.props;
+    return (
+      <View style={{flex: 1}}>
+        <View style={styles.banner}>
+          <Text style={styles.title}>Home</Text>
+        </View>
+        <ScrollView style={styles.view}>
+          <Tweets tweets={tweets} stateNavigator={stateNavigator} />
+        </ScrollView>
+      </View>
+    );
+  }
+};
 
 const styles = StyleSheet.create({
   banner: {