Merge pull request #21 from AlexGustafsson/coherent-animation

Made animations coherent as per iOS spec.

Author: MikaelCarpenter

components/NavBarContent.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var React = require('react-native');
-var tweenState = require('react-tween-state'); // Animate header
+var Animated = require('Animated');
+var Easing = require('Easing');
 
 var NavButton = require('./NavButton');
 
@@ -14,26 +15,26 @@ var {
 
 var NavBarContent = React.createClass({
 
-  mixins: [tweenState.Mixin],
-
   getInitialState: function() {
     return {
-      opacity: this.props.willDisappear ? 1 : 0
+      opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0)
     };
   },
 
   componentWillReceiveProps: function(newProps) {
     if (newProps.route !== this.props.route) {
-      this.setState({
-        opacity: this.props.willDisappear ? 1 : 0
-      });
+      this.state.opacity.setValue(this.props.willDisappear ? 1 : 0);
 
       setTimeout(() => {
-        this.tweenState('opacity', {
-          easing: tweenState.easingTypes.easeInOutQuad,
-          duration: 200,
-          endValue: 1
-        });
+        Animated.timing(
+          this.state.opacity,
+          {
+            fromValue: this.props.willDisappear ? 1 : 0,
+            toValue: this.props.willDisappear ? 0 : 1,
+            duration: 300,
+            easing: Easing.easeOutQuad
+          }
+        ).start();
       }, 0);
     }
   },
@@ -54,7 +55,7 @@ var NavBarContent = React.createClass({
 
   render() {
     var transitionStyle = {
-      opacity: this.getTweeningValue('opacity'),
+      opacity: this.state.opacity,
     };
 
     var leftCorner;
@@ -128,11 +129,11 @@ var NavBarContent = React.createClass({
     var color = this.props.borderColor ? this.props.borderColor : null;
 
     return (
-      <View style={[styles.navbar, transitionStyle, this.props.route.headerStyle,{borderBottomWidth: width, borderColor: color}, trans]}>
+      <Animated.View style={[styles.navbar, transitionStyle, this.props.route.headerStyle,{borderBottomWidth: width, borderColor: color}, trans]}>
         {leftCorner}
         {titleComponent}
         {rightCorner}
-      </View>
+      </Animated.View>
     );
   }
 });

index.js

@@ -26,12 +26,7 @@ var Router = React.createClass({
     }
   },
 
-  /*
-   * This changes the title in the navigation bar
-   * It should preferrably be called for "onWillFocus" instad >
-   * > but a recent update to React Native seems to break the animation
-   */
-  onDidFocus: function(route) {
+  onWillFocus: function(route) {
     this.setState({ route: route });
   },
 
@@ -45,7 +40,7 @@ var Router = React.createClass({
     route.index = this.state.route.index + 1 || 1;
     navigator.push(route);
   },
-  
+
   replaceRoute: function(route) {
     route.index = this.state.route.index + 0 || 0;
     this.refs.navigator.replace(route);
@@ -209,7 +204,7 @@ var Router = React.createClass({
         initialRoute={this.props.firstRoute}
         navigationBar={navigationBar}
         renderScene={this.renderScene}
-        onDidFocus={this.onDidFocus}
+        onWillFocus={this.onWillFocus}
       />
     )
   }

package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/MikaelCarpenter/gb-native-router",
   "dependencies": {
-    "react-tween-state": "^0.1.x"
+    
   },
   "peerDependencies": {
     "react-native": "^0.12.0"