tried to fix secure textentry padding rror

App.js

@@ -3,35 +3,12 @@ import Screen from "./app/screens/Screen";
 import AppPicker from "./app/components/AppPicker";
 import AppTextInput from "./app/components/AppTextInput";
 import LoginScreen from "./app/screens/auth/LoginScreen";
-import WelcomeScreen from "./app/screens/WelcomeScreen";
+import WelcomeScreen from "./app/screens/main/WelcomeScreen";
 
 export default function App() {
-  const categories = [
-    {
-      label: "Furniture",
-      value: 1,
-    },
-    {
-      label: "Clothing",
-      value: 2,
-    },
-    {
-      label: "Cameras",
-      value: 3,
-    },
-  ];
-  const [category, setCategory] = useState(categories[0]);
   return (
-    // <>
-    // <LoginScreen/>
-    <WelcomeScreen />
-    //   <Screen>
-    //     <AppPicker
-    //       selectedItem={category}
-    //       onSelectItem = {(item) => setCategory(item)}
-    //       items={categories} placeholder="Category" icon="apps" />
-    //     <AppTextInput icon="email" placeholder="Email" />
-    //   </Screen>
-    // </>
+    <>
+      <LoginScreen />
+    </>
   );
 }

app/components/AppTextInput.js

@@ -1,36 +1,44 @@
-import React from 'react'
-import { View, Text, StyleSheet, Platform } from 'react-native'
+import React from "react";
+import { View, Text, StyleSheet, Platform } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { TextInput } from 'react-native-gesture-handler';
+import { TextInput } from "react-native-gesture-handler";
 
+import defaultStyles from "../config/styles";
 
-import defaultStyles  from "../config/styles";
-
-export default function AppTextInput({icon, placeholder, ...otherProps}) {
-    return (
-        <View style={styles.container}>
-            {icon && <MaterialCommunityIcons name={icon} size={20} color={defaultStyles.colors.medium} style={ styles.icon}/>}
-            <TextInput style={defaultStyles.text} placeholder={placeholder} {...otherProps}/>
-
-        </View>
-    )
+export default function AppTextInput({ icon, placeholder, ...otherProps }) {
+  return (
+    <View style={styles.container}>
+      {icon && (
+        <MaterialCommunityIcons
+          name={icon}
+          size={20}
+          color={defaultStyles.colors.medium}
+          style={styles.icon}
+        />
+      )}
+      <TextInput
+        style={defaultStyles.text}
+        placeholder={placeholder}
+        {...otherProps}
+      />
+    </View>
+  );
 }
 const styles = StyleSheet.create({
-    container: {
-        backgroundColor: defaultStyles.colors.light,
-        borderRadius: 25,
-        flexDirection: "row",
-        width: "100%",
-        padding: 15,
-        marginVertical: 10
-
-    },
-    textInput: {
-        fontSize: 18,
-        fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
-        color: defaultStyles.colors.dark,
-    },
-    icon: {
-        marginRight: 10
-    }
-})
+  container: {
+    backgroundColor: defaultStyles.colors.light,
+    borderRadius: 25,
+    flexDirection: "row",
+    width: "100%",
+    padding: 15,
+    marginVertical: 10,
+  },
+  textInput: {
+    fontSize: 18,
+    fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
+    color: defaultStyles.colors.dark,
+  },
+  icon: {
+    marginRight: 10,
+  },
+});

app/screens/WelcomeScreen.js

@@ -50,16 +50,18 @@ const styles = StyleSheet.create({
     paddingTop: StatusBar.length + 100,
   },
   bottom_cta: {
-    flex: 1,
+    flex: 0.5,
     flexDirection: "column",
   },
   btn_red: {
     backgroundColor: "#fc5c65",
     flex: 1,
+    // height: 50,
   },
   btn_green: {
     backgroundColor: "#4ecdc4",
     flex: 1,
+    // height: 50,
   },
 });
 export default WelcomeScreen;

app/screens/auth/LoginScreen.js

@@ -28,7 +28,7 @@ export default function LoginScreen() {
         {({ handleChange, handleSubmit, errors, setFieldTouched, touched }) => (
           <>
             <AppTextInput
-              placeholder="email"
+              placeholder="Email"
               icon="email"
               autoCapitalize="none"
               onChangeText={handleChange("email")}
@@ -41,19 +41,18 @@ export default function LoginScreen() {
             />
             <ErrorMessage visible={touched.email} error={errors.email} />
             <AppTextInput
-              placeholder="Password"
-              icon="lock"
               autoCapitalize="none"
               autoCorrect={false}
-              onBlur={() => {
-                setFieldTouched("password");
-              }}
-              textContentType="emailAddress"
+              placeholder="Password"
+              icon="lock"
               textContentType="password"
               secureTextEntry
               onChangeText={handleChange("password")}
+              onBlur={() => {
+                setFieldTouched("password");
+              }}
             />
-            <ErrorMessage visible = {touched.password} error={errors.password} />
+            <ErrorMessage visible={touched.password} error={errors.password} />
             <AppButton title="Login" onPress={handleSubmit} />
           </>
         )}

package.json

@@ -8,20 +8,20 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "~38.0.8",
-    "expo-constants": "^9.2.0",
-    "expo-status-bar": "^1.0.2",
-    "formik": "^2.2.5",
-    "react": "~16.11.0",
-    "react-dom": "~16.11.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
-    "react-native-gesture-handler": "~1.6.0",
-    "react-native-web": "~0.11.7",
-    "yup": "^0.32.6"
+    "expo": "^42.0.0",
+    "expo-constants": "~11.0.1",
+    "expo-status-bar": "~1.0.4",
+    "formik": "^2.2.9",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-web": "~0.13.12",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.6",
-    "babel-preset-expo": "~8.1.0"
+    "@babel/core": "~7.9.0",
+    "babel-preset-expo": "8.3.0"
   },
   "private": true
 }