From 3bf7d8da4b27d5c39ee022b016c371cc6203534c Mon Sep 17 00:00:00 2001
From: RezaAshrafi77 <ashrafimirreza98@gmail.com>
Date: Wed, 6 Oct 2021 11:23:21 +0330
Subject: [PATCH] reza completed Custom Text Input

---
 android/app/src/main/res/drawable/heart.png | Bin 0 -> 678 bytes
 src/components/CustomTextInput/index.js     |  68 ++++++++++++--------
 src/views/Home/index.js                     |  19 +++++-
 3 files changed, 57 insertions(+), 30 deletions(-)
 create mode 100644 android/app/src/main/res/drawable/heart.png

diff --git a/android/app/src/main/res/drawable/heart.png b/android/app/src/main/res/drawable/heart.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2760cc3379ddf88cdc4912b6b6d698399b847bf
GIT binary patch
literal 678
zcmV;X0$KfuP)<h;3K|Lk000e1NJLTq000yK000pP1^@s6-9(JO00004b3#c}2nYxW
zd<bNS00001b5ch_0Itp)=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!~g&e!~vBn
z4jTXf0xL;GK~y+Tt&}@xRY4Gj|K0mYu8GlTL=;i%6=Kw05W!xswY9ReR2y4+dpj#Z
z1Pcq%K!}A{#55K{nj~UwFgGOkb;fUYPvT89QG)+rm~&>%%+7Ozt$j5qNJU%4{8NQ$
zL#iE?tUw&4ku$tY+Fazj!V4e$Zhmhs@r|U?P`va=>TM_{MW|+D>*A-E$+o!Rf~V+b
zGN%DOBxDKr3AQ|I3LYWOzJJOmdz2|G<dvb!`x|bOks?LbX~N*Ku5kJW|8#Kp;l3YF
znxoR>!)!2!#kUv{{rCkAB^r{_@bRo0#Pr=%s;DZC+!=NF4W3H%5ITr-)4@)=(QnJ@
zM-oNV#xQcC5xe23O<aX86V-&&I0>C7l{;ZW$8dPm<Nr^fd4ak|>#fUrEoi;e91x71
zHzitoMb>UIF+WPp0T7vl?ixN?3dO=JpN|Z}_TdcYZ<T`mVPBr*ruhhYjcHggEAWDV
zl#4gF5%v^szRnhZLGj{>L^D*QyVsv5SyXQ`wOxHU&bFuiU%)bC>XZUPW1Vt@glntw
zQhiKe?g>W?b28~nJ}7@J!N%Cky*yG=kIAfsFer?kO=@<T$?^4phtYFcu{<NKe3Y7V
z>8Bl_0rqWHw)9?sjoG#-K@GhVz?r8TxhPgY!|Q1bY~dxF!n<#a*b<kYx|V7l#xEw*
zLHu&~C$MhCyE~-LCOM^598sL&s@enlZ;BT@)~Lo7`8DS^&0dgx0;Ov1r;gKic>n+a
M07*qoM6N<$f_EJ+p#T5?

literal 0
HcmV?d00001

diff --git a/src/components/CustomTextInput/index.js b/src/components/CustomTextInput/index.js
index 26ea779..38f4063 100644
--- a/src/components/CustomTextInput/index.js
+++ b/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>
   );
diff --git a/src/views/Home/index.js b/src/views/Home/index.js
index 20eea71..5bcc076 100644
--- a/src/views/Home/index.js
+++ b/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>
   );
 }