reza completed Custom Text Input

src/components/CustomTextInput/index.js

@@ -1,37 +1,51 @@
 import React, {useState} from 'react';
-import {TextInput, View, Text, Dimensions} from 'react-native';
+import {TextInput, View, Text, Dimensions, StyleSheet} from 'react-native';
 
-const FloatingLabelInput = ({label}) => {
+const FloatingLabelInput = ({
+  label,
+  textAlign,
+  direction,
+  onInputChange,
+  labelBackgroundColor,
+  onChangeText,
+  value,
+  ...props
+}) => {
   const [isFocused, setIsFocused] = useState(false);
-
-  const labelStyle = {
-    position: 'absolute',
-    right: 10,
-    backgroundColor : '#eee',
-    zIndex: 100,
-    paddingHorizontal : 5,
-    top: !isFocused ? '50%' : 0,
-    fontSize: !isFocused ? Dimensions.get('window').width / 25 : 14,
-    transform: [{translateY: -Dimensions.get('window').width / 35}],
-    color: !isFocused ? '#000' : '#000',
-  };
+  const styles = StyleSheet.create({
+    labelStyle: {
+      position: 'absolute',
+      right: 15,
+      backgroundColor: labelBackgroundColor,
+      zIndex : 100,
+      paddingHorizontal: 5,
+      textAlign: 'center',
+      top: !isFocused ? '50%' : 0,
+      fontSize: !isFocused ? Dimensions.get('window').width / 25 : 14,
+      transform: [{translateY: -Dimensions.get('window').width / 35}],
+      color: !isFocused ? '#000' : '#6CBE44',
+      // transition: Transitions.all(Transitions.)
+    },
+    inputStyle: {
+      fontSize: Dimensions.get('window').width / 25,
+      color: '#000',
+      borderWidth: 0.5,
+      borderColor: isFocused ? '#6CBE44' : '#555',
+      borderRadius: 10,
+      padding: 10,
+      direction: direction,
+      textAlign: textAlign,
+    },
+  });
   return (
     <View style={{marginTop: 18}}>
-      <Text style={labelStyle}>{label}</Text>
+      <Text style={styles.labelStyle}>{label}</Text>
       <TextInput
-        // {...props}
-        style={{
-          // height: 26,
-          fontSize: Dimensions.get('window').width / 25,
-          color: '#000',
-          borderWidth: 0.5,
-          borderColor: '#555',
-          borderRadius: 10,
-          padding: 10,
-          textAlign: 'right'
-        }}
+        {...props}
+        style={styles.inputStyle}
+        onChangeText={text => onChangeText(text)}
         onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
+        onBlur={() => (value ? setIsFocused(true) : setIsFocused(false))}
       />
     </View>
   );

src/views/Home/index.js

@@ -1,11 +1,24 @@
-import React from 'react';
-import {View} from 'react-native';
+import React, {useState} from 'react';
+import {View, Text} from 'react-native';
 import CustomTextInput from '../../components/CustomTextInput/index';
 
 function Home({}) {
+  const [firstName, setFirstName] = useState('');
   return (
     <View>
-      <CustomTextInput label="نام" />
+      <CustomTextInput
+        label="نام"
+        textAlign="right"
+        direction="rtl"
+        labelBackgroundColor="#eee"
+        onChangeText={setFirstName}
+        value={firstName}
+        name="firstName"
+        numberOfLines={1}
+        multiline={false}
+        inlineLeftImage="heart"
+      />
+      <Text>{firstName}</Text>
     </View>
   );
 }