new: Animated colors are customizable now

Author: WrathChaos

example/.eslintrc.js

@@ -1,4 +1,77 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: "@react-native-community",
+  parser: "@typescript-eslint/parser",
+  plugins: ["import", "eslint-plugin-import", "@typescript-eslint"],
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx",
+          ".d.ts",
+          ".android.js",
+          ".android.jsx",
+          ".android.ts",
+          ".android.tsx",
+          ".ios.js",
+          ".ios.jsx",
+          ".ios.ts",
+          ".ios.tsx",
+          ".web.js",
+          ".web.jsx",
+          ".web.ts",
+          ".web.tsx",
+        ],
+      },
+    },
+  },
+  rules: {
+    quotes: [
+      "error",
+      "double",
+      {
+        avoidEscape: true,
+      },
+    ],
+    "max-len": ["error", 120],
+    "@typescript-eslint/ban-ts-comment": 2,
+    "@typescript-eslint/no-explicit-any": 2,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
+    "react-native/no-unused-styles": 2,
+    "react-native/split-platform-components": 2,
+    "react-native/no-inline-styles": 0,
+    "react-native/no-color-literals": 0,
+    "react-native/no-raw-text": 0,
+    "import/no-extraneous-dependencies": 2,
+    "import/extensions": ["error", "never", { svg: "always" }],
+    "import/no-named-as-default-member": 2,
+    "import/order": ["error", { "newlines-between": "always" }],
+    "import/no-duplicates": 2,
+    "import/no-useless-path-segments": 2,
+    "import/no-cycle": 2,
+    "import/prefer-default-export": 0,
+    "import/no-anonymous-default-export": 0,
+    "import/named": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "import/namespace": 0,
+    "import/default": 0,
+    "import/no-named-as-default": 0,
+    "import/no-unused-modules": 0,
+    "import/no-deprecated": 0,
+    "@typescript-eslint/indent": 0,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": [
+      "error",
+      { additionalHooks: "(useMemoOne)" },
+    ],
+    "jest/no-identical-title": 2,
+    "jest/valid-expect": 2,
+    camelcase: 2,
+    "prefer-destructuring": 2,
+    "no-nested-ternary": 2,
+  },
 };

example/App.tsx

@@ -21,7 +21,7 @@ const App = () => {
         justifyContent: "space-evenly",
       }}
     >
-      <InteractiveTextInput />
+      <InteractiveTextInput mainColor="red" />
       <InteractiveTextInput placeholder="Password" secureTextEntry enableIcon />
       <InteractiveTextInput />
     </SafeAreaView>

example/lib/InteractiveTextInput.style.ts

@@ -1,10 +1,26 @@
-import { ViewStyle, TextStyle, StyleSheet } from "react-native";
+import { ViewStyle, Dimensions, StyleSheet } from "react-native";
 import { ImageStyle } from "react-native-fast-image";
+const { width: ScreenWidth } = Dimensions.get("screen");
 
 interface Style {
   container: ViewStyle;
 }
 
+export const _textInputStyle = (borderColor: any): ViewStyle => ({
+  height: 50,
+  width: ScreenWidth * 0.9,
+  borderWidth: 1,
+  paddingLeft: 16,
+  borderRadius: 8,
+  paddingRight: 16,
+  borderColor: borderColor,
+  justifyContent: "center",
+  backgroundColor: "#eceef5",
+});
+
 export default StyleSheet.create<Style>({
-  container: {},
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
 });

example/lib/InteractiveTextInput.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import {
-  Dimensions,
   StyleProp,
   TextInput,
   TextInputProps,
@@ -9,28 +8,35 @@ import {
   Image,
   TouchableOpacity,
   View,
+  TextStyle,
 } from "react-native";
 /**
  * ? Local Imports
  */
-import styles from "./InteractiveTextInput.style";
+import styles, { _textInputStyle } from "./InteractiveTextInput.style";
 
-const { width: ScreenWidth } = Dimensions.get("screen");
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
-const SUCCESS_COLOR = "#008FEB";
+const MAIN_COLOR = "#008FEB";
 const ORIGINAL_COLOR = "transparent";
-const ORIGINAL_VALUE = 0;
-const SUCCESS_VALUE = 1;
 const PLACEHOLDER_COLOR = "#757575";
+const ORIGINAL_VALUE = 0;
+const ANIMATED_VALUE = 1;
 
 type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
 
 interface IInteractiveTextInputProps extends TextInputProps {
   style?: CustomStyleProp;
+  textInputStyle?: CustomTextStyleProp;
   ImageComponent?: any;
   IconComponent?: any;
   enableIcon?: boolean;
+  mainColor?: string;
+  originalColor?: string;
+  animatedPlaceholderTextColor?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 interface IState {}
@@ -58,7 +64,7 @@ export default class InteractiveTextInput extends React.Component<
   showFocusColor = () => {
     Animated.timing(this.interpolatedColor, {
       duration: 450,
-      toValue: SUCCESS_VALUE,
+      toValue: ANIMATED_VALUE,
       useNativeDriver: false,
     }).start();
   };
@@ -97,43 +103,40 @@ export default class InteractiveTextInput extends React.Component<
   };
 
   renderAnimatedTextInput = () => {
+    const mainColor = this.props.mainColor || MAIN_COLOR;
+    const originalColor = this.props.originalColor || ORIGINAL_COLOR;
+    const animatedPlaceholderTextColor =
+      this.props.animatedPlaceholderTextColor || PLACEHOLDER_COLOR;
+
     let borderColor = this.interpolatedColor.interpolate({
-      inputRange: [ORIGINAL_VALUE, SUCCESS_VALUE],
-      outputRange: [ORIGINAL_COLOR, SUCCESS_COLOR],
+      inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
+      outputRange: [originalColor, mainColor],
     });
     let placeholderTextColor = this.interpolatedColor.interpolate({
-      inputRange: [ORIGINAL_VALUE, SUCCESS_VALUE],
-      outputRange: [PLACEHOLDER_COLOR, SUCCESS_COLOR],
+      inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
+      outputRange: [animatedPlaceholderTextColor, mainColor],
     });
     return (
       <AnimatedTextInput
-        style={{
-          height: 50,
-          width: ScreenWidth * 0.9,
-          backgroundColor: "#eceef5",
-          paddingLeft: 16,
-          paddingRight: 16,
-          borderRadius: 8,
-          justifyContent: "center",
-          borderWidth: 1,
-          borderColor: borderColor,
-        }}
         placeholderTextColor={placeholderTextColor}
         placeholder="Email"
+        {...this.props}
+        style={[_textInputStyle(borderColor), this.props.textInputStyle]}
         onFocus={() => {
           this.showFocusColor();
+          this.props.onFocus && this.props.onFocus();
         }}
         onBlur={() => {
           this.showOriginColor();
+          this.props.onBlur && this.props.onBlur();
         }}
-        {...this.props}
       />
     );
   };
 
   render() {
     return (
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
+      <View style={styles.container}>
         {this.renderAnimatedTextInput()}
         {this.renderIcon()}
       </View>