reza fixed login and otp keyboardavoidingview

src/screens/Login/components/IranFlag.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {Image, Dimensions} from 'react-native';
-
-const {width} = Dimensions.get('window');
-
-function IranFlag() {
-  return (
-    <Image
-      source={{
-        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAiBJREFUSEvtVkFrU0EQ/mb3vTRJ08bURAVFA4K0CIKCNw8WQQQPKqj/oN56qgePnv0Vnjy0YPAiItWLFw8VtWhF9BClGE3S5tnmxaR5u+PuPgIKSnlQ46UDww6zM/PtNztveTR3HwEIeQxRBHCS5irgIWI6KAKmd4GH0nXX6sWVO+6Ou9F3p2kvj0LmCD6uPcXB8VO/+X89lY2rbS4jnz6ErD/h4npGD4ydQOvHJ2z2aiiNTrqUQV1rV1vPUMxOzlC1/uKD4khJ8qRd7aa1NVQkID3rE+QJc0oaxLkBqX0TNDYOlcsozZG2OWyEjPwtZ5D/ZWN5lsIwTDTV4u076GIR/uMn6J8/B9FsQh+fSnpFpxMBU70B+XwJ+mgZqYUH6N6chf9oEWrqWFLwZMCWrah+hi4fjoFv34I/X3Fs+9evJGGdDNgxfv0G1AogV94jOnsG7ElwYc+/ZewotUN4Sy+RunvPAW9dvQTkRpOwtbGGcRB8hVJbkNI3a99VEDJFWndZihHrM4OqWcS2266uZtHeUBDCM4PVBbOxTY5ZWZBwcSQkBratzeal1DGObKzfoN58hanTAYUd6FLR3SGX9gIjKdBqzdm03gKUju3GGnhfMX5zbU4mbTDMs8+mslGdy5kdY7fbloDzW+H9JVC9abQBnijMEF+8luhzStrTP8YTT+8C70gnty3y31rN5g+EL1wuw/PK255ypwI0BfRw4dVPHMAgJ7WnxBQAAAAASUVORK5CYII=',
-      }}
-      style={{
-        width: width / 8,
-        height: width / 8 / 1.5,
-        left: 5,
-      }}
-    />
-  );
-}
-
-export default IranFlag;

src/screens/Login/index.js

@@ -9,16 +9,20 @@ import {
   TouchableHighlight,
   Platform,
   KeyboardAvoidingView,
+  ScrollView,
 } from "react-native";
 import Svg, { Defs, Pattern, Image, Path } from "react-native-svg";
-
-import CustomTextInput from "../../components/CustomTextInput";
 import onInput from "../../utils/onInput";
 import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
-import tw from "tailwind-rn";
 import { user } from "../../redux/actions";
+
+//components
+import CustomTextInput from "../../components/CustomTextInput";
+
+//style
 import Colors from "../../constants/Colors";
 import fontSize from "../../constants/fontSize";
+import tw from "tailwind-rn";
 
 const ios = Platform.OS === "ios";
 
@@ -50,13 +54,13 @@ function Login(props) {
   };
 
   return (
-    <View
+    <ScrollView style={[tw("flex-1")]}>
+      <KeyboardAvoidingView
         style={[
-        tw(`flex  flex-1 justify-center items-center bg-white px-4 relative`),
+          tw(`flex justify-center items-center bg-white px-4 relative`),
-        {
+          { minHeight: height },
-          minHeight: height,
-        },
         ]}
+        behavior={ios ? "padding" : "padding"}
       >
         <Svg
           xmlns="http://www.w3.org/2000/svg"
@@ -179,7 +183,8 @@ function Login(props) {
           </Text>{" "}
           می‌باشد
         </Text>
-    </View>
+      </KeyboardAvoidingView>
+    </ScrollView>
   );
 }
 

src/screens/Otp/index.js

@@ -6,6 +6,8 @@ import {
   Dimensions,
   TouchableOpacity,
   ActivityIndicator,
+  KeyboardAvoidingView,
+  ScrollView,
   Platform,
 } from "react-native";
 import tw from "tailwind-rn";
@@ -162,11 +164,13 @@ function Otp(props) {
   };
 
   return (
-    <View
+    <ScrollView style={tw("flex-1")}>
+      <KeyboardAvoidingView
         style={[
           tw("px-4 flex-1 justify-center items-center bg-white"),
           { minHeight: height },
         ]}
+        behavior={"padding"}
       >
         <Svg
           xmlns="http://www.w3.org/2000/svg"
@@ -215,7 +219,7 @@ function Otp(props) {
               fontFamily: "demi",
             }}
           >
-          {' ' + (props.route.params?.phone || "") + ' '}
+            {" " + (props.route.params?.phone || "") + " "}
           </Text>{" "}
           ارسال شد. آن را در قسمت زیر وارد کنید.
         </Text>
@@ -383,7 +387,8 @@ function Otp(props) {
             </View>
           )}
         </View>
-    </View>
+      </KeyboardAvoidingView>
+    </ScrollView>
   );
 }