From 11befcac568a18bd346e3ab179a03a36f5eb14cd Mon Sep 17 00:00:00 2001
From: Iuri <689440+iuricmp@users.noreply.github.com>
Date: Mon, 3 Feb 2025 06:29:29 -0300
Subject: [PATCH] Fix keyboard avoidance issue in input fields (#39)

* fix: avoiding keyboard over input

Signed-off-by: Iuri Pereira <689440+iuricmp@users.noreply.github.com>

* chore: keyboard avoiding on custom chain screen

Signed-off-by: Iuri Pereira <689440+iuricmp@users.noreply.github.com>

---------

Signed-off-by: Iuri Pereira <689440+iuricmp@users.noreply.github.com>
---
 mobile/app/(app)/chain-selection/index.tsx | 98 ++++++++++++----------
 mobile/app/index.tsx                       | 18 ++--
 2 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/mobile/app/(app)/chain-selection/index.tsx b/mobile/app/(app)/chain-selection/index.tsx
index f003501..0aa3fe3 100644
--- a/mobile/app/(app)/chain-selection/index.tsx
+++ b/mobile/app/(app)/chain-selection/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { getCurrentChain, selectSelectedChain, setSelectedChain, useAppDispatch, useAppSelector } from "@/redux";
-import { Modal, StyleSheet } from "react-native";
+import { KeyboardAvoidingView, Modal, Platform, SafeAreaView, ScrollView, StyleSheet } from "react-native";
 import { useNavigation, useRouter } from "expo-router";
 import { useGnoNativeContext } from "@gnolang/gnonative";
 import { Button, Layout, Ruller, Spacer, ModalContent, ModalHeader, NetworkList, Text, TextInput, Alert } from "@/components";
@@ -103,51 +103,57 @@ function Page() {
         <Button.TouchableOpacity title="Back" onPress={() => router.back()} variant="secondary" />
       </Layout.Body>
       <Modal visible={showCustomChain} animationType="slide">
-        <ModalContent>
-          <ModalHeader title="Add a custom Chain" onClose={() => setShowCustomChain(false)} />
-          <Text.InputLabel>Chain name:</Text.InputLabel>
-          <TextInput
-            placeholder="name"
-            value={chainName}
-            onChangeText={setChainName}
-            keyboardType="default"
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-          <Text.InputLabel>Chain ID:</Text.InputLabel>
-          <TextInput
-            placeholder="ID"
-            value={chainID}
-            onChangeText={setChainID}
-            keyboardType="default"
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-          <Text.InputLabel>Chain URL:</Text.InputLabel>
-          <TextInput
-            placeholder="URL"
-            value={chainURL}
-            onChangeText={setChainURL}
-            keyboardType="url"
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-          <Text.InputLabel>Faucet URL:</Text.InputLabel>
-          <TextInput
-            placeholder="Faucet URL"
-            value={faucetAddress}
-            onChangeText={setFaucetAddress}
-            autoCapitalize="none"
-            keyboardType="url"
-            autoCorrect={false}
-          />
-          <Spacer />
-          {error ? <Alert severity="error" message={error} /> : null}
-          <Button.TouchableOpacity title="Save" onPress={onConfirmCustomChain} variant="primary" />
-          <Ruller />
-          <Button.TouchableOpacity title="Cancel" onPress={onCancelCustomChain} variant="secondary" />
-          <Spacer space={16} />
-        </ModalContent>
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
+          <ModalContent>
+            <SafeAreaView>
+              <ScrollView>
+                <ModalHeader title="Add a custom Chain" onClose={() => setShowCustomChain(false)} />
+                <Text.InputLabel>Chain name:</Text.InputLabel>
+                <TextInput
+                  placeholder="name"
+                  value={chainName}
+                  onChangeText={setChainName}
+                  keyboardType="default"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+                <Text.InputLabel>Chain ID:</Text.InputLabel>
+                <TextInput
+                  placeholder="ID"
+                  value={chainID}
+                  onChangeText={setChainID}
+                  keyboardType="default"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+                <Text.InputLabel>Chain URL:</Text.InputLabel>
+                <TextInput
+                  placeholder="URL"
+                  value={chainURL}
+                  onChangeText={setChainURL}
+                  keyboardType="url"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+                <Text.InputLabel>Faucet URL:</Text.InputLabel>
+                <TextInput
+                  placeholder="Faucet URL"
+                  value={faucetAddress}
+                  onChangeText={setFaucetAddress}
+                  autoCapitalize="none"
+                  keyboardType="url"
+                  autoCorrect={false}
+                />
+                <Spacer />
+                {error ? <Alert severity="error" message={error} /> : null}
+                <Button.TouchableOpacity title="Save" onPress={onConfirmCustomChain} variant="primary" />
+                <Ruller />
+                <Button.TouchableOpacity title="Cancel" onPress={onCancelCustomChain} variant="secondary" />
+                <Spacer space={16} />
+              </ScrollView>
+            </SafeAreaView>
+          </ModalContent>
+        </KeyboardAvoidingView>
       </Modal>
     </Layout.Container>
   );
diff --git a/mobile/app/index.tsx b/mobile/app/index.tsx
index 1453da3..71dc4c5 100644
--- a/mobile/app/index.tsx
+++ b/mobile/app/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
 import { useRouter } from "expo-router";
 import { Layout } from "@/components/index";
 import Text from "@/components/text";
@@ -31,7 +31,7 @@ export default function Root() {
 
       naviateTo()
 
-    } catch (error:any) {
+    } catch (error: any) {
       console.log("error", error.message);
       setError(error?.message);
     }
@@ -43,7 +43,7 @@ export default function Root() {
 
       naviateTo()
 
-    } catch (error:any) {
+    } catch (error: any) {
       console.log("error", error.message);
       setError(error?.message);
     }
@@ -78,11 +78,13 @@ export default function Root() {
             <Text.Caption1>Build Version: {appVersion}</Text.Caption1>
           </View>
 
-          <ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
-            style={{ flex: 1 }}>
-            {hasMasterPassword ? <SignInView onUnlokPress={onUnlokPress} error={error} /> : null}
-            {!hasMasterPassword ? <SignUpView onCreateMasterPress={onCreateMasterPass} error={error} /> : null}
-          </ScrollView>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
+            <ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+              style={{ flex: 1 }}>
+              {hasMasterPassword ? <SignInView onUnlokPress={onUnlokPress} error={error} /> : null}
+              {!hasMasterPassword ? <SignUpView onCreateMasterPress={onCreateMasterPass} error={error} /> : null}
+            </ScrollView>
+          </KeyboardAvoidingView>
         </Layout.BodyAlignedBotton>
       </Layout.Container>
     </>