Merge pull request #4 from Dagic-zewdu/feature

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,7 @@ const App = () => {
         onPress={() => Keyboard.dismiss()}>
         <FloatingTextInput
           label="Test sinte"
-          error="Invalid klhfdg"
+          icon={<Icon name="clock" size={28} 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 : '');
@@ -70,7 +71,7 @@ const FloatingTextInput = ({
 
   const yVal = moveText.interpolate({
     inputRange: [0, 1],
-    outputRange: [4, -18],
+    outputRange: [4, -20],
   });
 
   const animStyle = {
@@ -94,11 +95,17 @@ const FloatingTextInput = ({
             style={{
               ...styles.label,
               ...labelStyle,
+              left: icon ? 20 : 15,
               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,
@@ -22,13 +23,15 @@ const styles = StyleSheet.create({
     fontSize: 13,
     height: 45,
     color: '#000',
+    justifyContent: 'center',
+    marginTop: 2,
   },
   label: {
     fontSize: 13,
     backgroundColor: '#fff',
   },
   animatedStyle: {
-    top: 11,
+    top: 13,
     left: 15,
     position: 'absolute',
     borderRadius: 90,
@@ -40,6 +43,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     paddingHorizontal: 10,
   },
+  iconContainer: {
+    position: 'absolute',
+    top: 11,
+    left: 5,
+  },
 });
 
 export default styles;