Setting useNativeDriver explicitly.

Author: halilb

lib/BaseInput.js

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

lib/Jiro.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 import {
   Animated,
   Easing,
@@ -8,9 +8,9 @@ import {
   TouchableWithoutFeedback,
   View,
   StyleSheet,
-} from 'react-native';
+} from "react-native";
 
-import BaseInput from './BaseInput';
+import BaseInput from "./BaseInput";
 
 export default class Jiro extends BaseInput {
   static propTypes = {
@@ -20,7 +20,7 @@ export default class Jiro extends BaseInput {
   };
 
   static defaultProps = {
-    borderColor: 'red',
+    borderColor: "red",
     inputPadding: 16,
     height: 48,
   };
@@ -45,19 +45,22 @@ export default class Jiro extends BaseInput {
         toValue: animationValue,
         eaasing: Easing.bezier(0.2, 1, 0.3, 1),
         duration: 200,
+        useNativeDriver: false,
       }
     );
     const borderHeightAnimation = Animated.timing(this.state.borderHeightAnim, {
       toValue: animationValue,
       eaasing: Easing.ease,
       duration: 200,
+      useNativeDriver: false,
     });
     const labelPositionAnimation = Animated.timing(
       this.state.labelPositionAnim,
       {
         toValue: animationValue,
         eaasing: Easing.ease,
         duration: 200,
+        useNativeDriver: false,
       }
     );
 
@@ -135,7 +138,7 @@ export default class Jiro extends BaseInput {
           onBlur={this._onBlur}
           onChange={this._onChange}
           onFocus={this._onFocus}
-          underlineColorAndroid={'transparent'}
+          underlineColorAndroid={"transparent"}
         />
         <TouchableWithoutFeedback onPress={this.focus}>
           <Animated.View
@@ -144,15 +147,16 @@ export default class Jiro extends BaseInput {
               {
                 bottom: labelPositionAnim.interpolate({
                   inputRange: [0, 1],
-                  outputRange: [inputPadding / 2, inputHeight + inputPadding / 4],
+                  outputRange: [
+                    inputPadding / 2,
+                    inputHeight + inputPadding / 4,
+                  ],
                 }),
                 left: inputPadding,
               },
             ]}
           >
-            <Text style={[styles.label, labelStyle]}>
-              {label}
-            </Text>
+            <Text style={[styles.label, labelStyle]}>{label}</Text>
           </Animated.View>
         </TouchableWithoutFeedback>
       </View>
@@ -162,24 +166,24 @@ export default class Jiro extends BaseInput {
 
 const styles = StyleSheet.create({
   labelContainer: {
-    position: 'absolute',
-    backgroundColor: 'transparent',
+    position: "absolute",
+    backgroundColor: "transparent",
   },
   label: {
     fontSize: 13,
-    fontWeight: 'bold',
-    color: '#6a7989',
+    fontWeight: "bold",
+    color: "#6a7989",
   },
   textInput: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     padding: 0,
-    color: 'black',
+    color: "black",
     fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
   },
   border: {
-    position: 'absolute',
+    position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,