added color transition animation

Author: cnilton

README.md

@@ -44,7 +44,7 @@ yarn add [email protected]
 
 - OBS. 2: if you don't want to use the new react-native-reanimated v2, **do not** upgrade to this version, install version 1.3.4 and [email protected]
 
-# Version 1.3.4 **react-native-reanimated v1**
+# Version 1.3.4 or lower **react-native-reanimated v1**
 
 - Last stable version of this lib with Software-Mansion react-native-reanimated v1.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-floating-label-input",
   "description": "A simple and customizable React Native TextInput with it's placeholder always shown.",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "main": "index.tsx",
   "private": false,
   "repository": {

src/index.tsx

@@ -19,7 +19,7 @@ import {
   TouchableWithoutFeedback,
   LayoutChangeEvent,
 } from 'react-native';
-import Animated, { EasingNode, timing } from 'react-native-reanimated';
+import Animated, { EasingNode, timing, interpolateColors } from 'react-native-reanimated';
 import { styles } from './styles';
 
 import makeVisibleWhite from './assets/make_visible_white.png';
@@ -215,6 +215,8 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     ...customLabelStyles,
   };
 
+  const [fontColorAnimated] = useState(new Animated.Value(0));
+
   const [fontSizeAnimated] = useState(
     new Animated.Value(
       isFocused
@@ -253,27 +255,23 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
   );
 
   useEffect(() => {
-    if (!staticLabel) {
       if (isFocused === undefined) {
         if (value !== '' || isFocusedState) {
           setIsFocused(true);
         } else if (value === '' || value === null) {
           setIsFocused(false);
         }
       }
-    }
   }, [value]);
 
   useEffect(() => {
-    if (!staticLabel) {
       if (isFocused !== undefined) {
         if (value !== '' || isFocused) {
           setIsFocused(true);
         } else {
           setIsFocused(false);
         }
       }
-    }
   }, [isFocused, value]);
 
   useEffect(() => {
@@ -289,7 +287,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
       }
     } else {
       animateBlur();
-    }
+  }
   }, [isFocusedState]);
 
   useImperativeHandle(ref, () => ({
@@ -300,7 +298,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
       inputRef.current.blur();
     },
   }));
-
+  
   useEffect(() => {
     if (
       !staticLabel &&
@@ -339,7 +337,19 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
           duration: animationDuration ? animationDuration : 300,
           easing: EasingNode.linear,
         }),
+        timing(fontColorAnimated, {
+          toValue: 1,
+          duration: animationDuration ? animationDuration : 300,
+          easing: EasingNode.linear,
+        }),
       ]).start();
+    }else if(staticLabel &&
+      isFocusedState){
+        Animated.timing(fontColorAnimated, {
+          toValue: 1,
+          duration: animationDuration ? animationDuration : 300,
+          easing: EasingNode.linear,
+        }).start();
     }
   }, [halfTop]);
 
@@ -377,13 +387,23 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
           duration: animationDuration ? animationDuration : 300,
           easing: EasingNode.linear,
         }),
+        timing(fontColorAnimated, {
+          toValue: 1,
+          duration: animationDuration ? animationDuration : 300,
+          easing: EasingNode.linear,
+        }),
       ]).start();
+    }else{
+      Animated.timing(fontColorAnimated, {
+        toValue: 1,
+        duration: animationDuration ? animationDuration : 300,
+        easing: EasingNode.linear,
+      }).start();
     }
   }
 
   function animateBlur() {
     if (!staticLabel) {
-      // Animated.parallel([
       ReactAnimated.parallel([
         // @ts-ignore
         timing(leftAnimated, {
@@ -409,7 +429,18 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
           duration: animationDuration ? animationDuration : 300,
           easing: EasingNode.linear,
         }),
+        timing(fontColorAnimated, {
+          toValue: 0,
+          duration: animationDuration ? animationDuration : 300,
+          easing: EasingNode.linear,
+        }),
       ]).start();
+    }else{
+      Animated.timing(fontColorAnimated, {
+        toValue: 0,
+        duration: animationDuration ? animationDuration : 300,
+        easing: EasingNode.linear,
+      }).start();
     }
   }
 
@@ -463,6 +494,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     ? customShowPasswordImage || makeVisibleWhite
     : customHidePasswordImage || makeInvisibleWhite;
 
+
   const style: TextStyle = {
     ...setGlobalStyles?.labelStyles,
     ...labelStyles,
@@ -474,9 +506,10 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
       : !isFocusedState
       ? customLabelStyles.fontSizeBlurred
       : customLabelStyles.fontSizeFocused,
-    color: !isFocusedState
-      ? customLabelStyles.colorBlurred
-      : customLabelStyles.colorFocused,
+    color: interpolateColors(fontColorAnimated, {
+      inputRange: [0, 1],
+      outputColorRange: [customLabelStyles.colorBlurred,customLabelStyles.colorFocused]
+    }),
     alignSelf: 'center',
     position: 'absolute',
     flex: 1,