Fix keyboard avoidance issue in input fields (#39)

* fix: avoiding keyboard over input Signed-off-by: Iuri Pereira <[email protected]> * chore: keyboard avoiding on custom chain screen Signed-off-by: Iuri Pereira <[email protected]> --------- Signed-off-by: Iuri Pereira <[email protected]>
gnolang · Feb 3, 2025 · 11befca · 11befca
1 parent 34720ff
commit 11befca
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 54 deletions.
diff --git 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
@@ -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>
     </>