Merge pull request halilb#42 from Grivel-l/nativeDrivers

Native drivers support added for Kohana

Author: halilb

README.md

@@ -118,6 +118,7 @@ const kohanaInput = (
     iconColor={'#f4d29a'}
     labelStyle={{ color: '#91627b' }}
     inputStyle={{ color: '#91627b' }}
+    useNativeDriver={true}
   />
 );
 ```

lib/BaseInput.js

@@ -101,6 +101,7 @@ export default class BaseInput extends Component {
       toValue: isActive ? 1 : 0,
       duration: this.props.animationDuration,
       easing: this.props.easing,
+      useNativeDriver: this.useNativeDriver || false
     }).start();
   }
 

lib/Kohana.js

@@ -38,6 +38,7 @@ export default class Kohana extends BaseInput {
   static defaultProps = {
     easing: Easing.bezier(0.2, 1, 0.3, 1),
     iconSize: 25,
+    useNativeDriver: false
   };
 
   render() {
@@ -63,10 +64,12 @@ export default class Kohana extends BaseInput {
             style={{
               justifyContent: 'center',
               padding: PADDING,
-              marginLeft: focusedAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [-15 - iconSize, 0],
-              }),
+              transform: [{
+                translateX: focusedAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [-15 - iconSize, 0],
+                })
+              }],
             }}
           >
             <Icon name={iconName} color={iconColor} size={iconSize} />
@@ -77,10 +80,13 @@ export default class Kohana extends BaseInput {
             style={{
               position: 'absolute',
               top: PADDING,
-              left: focusedAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [PADDING, 80],
-              }),
+              left: 0,
+              transform: [{
+                translateX: focusedAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [PADDING, 80],
+                })
+              }],
               opacity: focusedAnim.interpolate({
                 inputRange: [0, 1],
                 outputRange: [1, 0],
@@ -98,7 +104,10 @@ export default class Kohana extends BaseInput {
           style={[styles.textInput, inputStyle]}
           value={value}
           onBlur={this._onBlur}
-          onFocus={this._onFocus}
+          onFocus={event => {
+            this.useNativeDriver = this.props.useNativeDriver;
+            this._onFocus(event);
+          }}
           onChange={this._onChange}
           underlineColorAndroid={'transparent'}
         />