Text Box Icon

App.tsx

@@ -1,6 +1,8 @@
 import {View, TouchableWithoutFeedback, Keyboard} from 'react-native';
 import React from 'react';
 import FloatingTextInput from './src/floatingTextInput';
+// @ts-ignore
+import Icon from 'react-native-vector-icons/EvilIcons';
 
 const App = () => {
   return (
@@ -10,7 +12,8 @@ const App = () => {
         onPress={() => Keyboard.dismiss()}>
         <FloatingTextInput
           label="Test sinte"
-          error="Invalid klhfdg"
+          error="Invalid Input"
+          icon={<Icon name="clock"  size={30} color="#900"  />}
           onChangeText={text => console.log(text)}
         />
       </TouchableWithoutFeedback>

android/app/src/main/java/com/floatinginputs/MainApplication.java

@@ -12,7 +12,6 @@
 import com.floatinginputs.newarchitecture.MainApplicationReactNativeHost;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
-import com.oblador.vectoricons.VectorIconsPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -29,7 +28,6 @@ protected List<ReactPackage> getPackages() {
       // Packages that cannot be autolinked yet can be added manually here, for
       // example:
       // packages.add(new MyReactNativePackage());
-      packages.add(new VectorIconsPackage());
       return packages;
     }
 

package.json

@@ -9,8 +9,9 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-native-community/cli-platform-android": "^9.3.1",
     "react": "18.1.0",
-    "react-native": "0.70.4",
+    "react-native": "^0.70.5",
     "react-native-vector-icons": "^9.2.0"
   },
   "devDependencies": {
@@ -21,6 +22,7 @@
     "@types/jest": "^26.0.23",
     "@types/react": "^18.0.21",
     "@types/react-native": "^0.70.6",
+    "@types/react-native-vector-icons": "^6.4.12",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",

src/floatingTextInput/index.tsx

@@ -30,6 +30,7 @@ const FloatingTextInput = ({
   labelColor = '#111',
   labelStyle = {},
   inputStyle = {},
+  icon,
   ...props
 }: Props) => {
   const [val, setValue] = useState(props.value ? props.value : '');
@@ -93,12 +94,20 @@ const FloatingTextInput = ({
           <Text
             style={{
               ...styles.label,
+              ...styles.animatedStyle, left: icon ? 30 : 15,
               ...labelStyle,
               color: error ? 'red' : labelColor,
             }}>
             {label}
           </Text>
         </Animated.View>
+        {
+                    icon ?
+                        <View style={styles.iconContainer}>
+                            {icon}
+                        </View> :
+                        <React.Fragment></React.Fragment>
+                }
         <TextInput
           style={{...styles.input, ...inputStyle}}
           value={val}

src/floatingTextInput/style.ts

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#bdbdbd',
     borderRadius: 2,
+    paddingLeft: 35,
   },
   icon: {
     width: 40,
@@ -40,6 +41,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     paddingHorizontal: 10,
   },
+  iconContainer: {
+    position: "absolute",
+    top: 11,
+    left: 5,
+}
 });
 
 export default styles;