documented native driver for Kohana

Author: halilb

Example/TextInputEffectsExample.js

@@ -173,6 +173,7 @@ export default class TextInputEffectsExample extends Component {
             iconSize={40}
             labelStyle={{ marginTop: 8, color: '#91627b' }}
             inputStyle={{ color: '#91627b' }}
+            useNativeDriver
           />
           <Kohana
             style={[styles.input, { backgroundColor: '#f9f5ed' }]}
@@ -183,6 +184,7 @@ export default class TextInputEffectsExample extends Component {
             iconColor={'#f4d29a'}
             labelStyle={{ color: '#91627b' }}
             inputStyle={{ color: '#91627b' }}
+            useNativeDriver
           />
         </View>
         <View style={[styles.card2, { backgroundColor: '#d0efe0' }]}>

README.md

@@ -104,6 +104,7 @@ const fumiInput = (
 
 ![](screenshots/kohana.gif)
 
+Kohana supports [Animated Native Driver](https://facebook.github.io/react-native/docs/animations.html#using-the-native-driver). You can use native driver by passing `useNativeDriver`.
 
 ```js
 import MaterialsIcon from 'react-native-vector-icons/MaterialIcons';
@@ -118,7 +119,7 @@ const kohanaInput = (
     iconColor={'#f4d29a'}
     labelStyle={{ color: '#91627b' }}
     inputStyle={{ color: '#91627b' }}
-    useNativeDriver={true}
+    useNativeDriver
   />
 );
 ```

lib/BaseInput.js

@@ -12,6 +12,8 @@ export default class BaseInput extends Component {
     labelStyle: Text.propTypes.style,
     easing: PropTypes.func,
     animationDuration: PropTypes.number,
+    useNativeDriver: PropTypes.bool,
+
     editable: PropTypes.bool,
 
     /* those are TextInput props which are overridden
@@ -96,12 +98,13 @@ export default class BaseInput extends Component {
   }
 
   _toggle(isActive) {
+    const { animationDuration, easing, useNativeDriver } = this.props;
     this.isActive = isActive;
     Animated.timing(this.state.focusedAnim, {
       toValue: isActive ? 1 : 0,
-      duration: this.props.animationDuration,
-      easing: this.props.easing,
-      useNativeDriver: this.useNativeDriver || false
+      duration: animationDuration,
+      easing,
+      useNativeDriver,
     }).start();
   }