keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag"

easybase · Jun 4, 2021 · df4a09c · df4a09c
1 parent 41b50a2
commit df4a09c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/native-example/yarn.lock b/native-example/yarn.lock
@@ -2897,7 +2897,7 @@
   "version" "0.1.2"
 
 "easybase-react@github:easybase/easybase-react#dev":
-  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#7e4fb6b8d4505574563c3d45c87d23a47831992d"
+  "resolved" "git+ssh://git@github.com/easybase/easybase-react.git#41b50a2b0b9d17159330f8c329eeccad60309ebe"
   "version" "2.1.15"
   dependencies:
     "easybasejs" "4.2.13"

diff --git a/src/ui/NativeAuth/NativeAuth.tsx b/src/ui/NativeAuth/NativeAuth.tsx
@@ -2,7 +2,7 @@ import React, { useState, lazy, Suspense, Fragment, useEffect } from 'react';
 import { ThemeProvider } from 'styled-components/native';
 import { defaultDictionary } from '../utils';
 import { INativeAuth } from '../uiTypes';
-import { Toast } from './components';
+import { Toast, Container } from './components';
 
 const { useEasybase } = require('easybase-react');
 
@@ -72,7 +72,9 @@ export default function ({ customStyles, children, dictionary, signUpFields }: I
         return (
             <ThemeProvider theme={typeof customStyles === "object" ? customStyles : {}}>
                 <Toast toastMessage={toastMessage} toastOpen={toastOpen} setToastOpen={setToastOpen} />
-                {getCurrentPage()}
+                <Container behavior="height">
+                    {getCurrentPage()}
+                </Container>
             </ThemeProvider>
         )
     }

diff --git a/src/ui/NativeAuth/components.tsx b/src/ui/NativeAuth/components.tsx
@@ -5,8 +5,7 @@ export const View = styled.View({
     width: "100%"
 });
 
-export const Form = styled.KeyboardAvoidingView((props: any) => ({
-    flex: 1,
+export const Form = styled.ScrollView((props: any) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     backgroundColor: '#fff',
@@ -17,6 +16,12 @@ export const Form = styled.KeyboardAvoidingView((props: any) => ({
     ...(props.theme.form ? { ...props.theme.form } : {})
 }))
 
+export const Container = styled.KeyboardAvoidingView((props: any) => ({
+    flex: 1,
+    backgroundColor: '#fff',
+    ...(props.theme.container ? { ...props.theme.container } : {})
+}))
+
 export const HeaderText = styled.Text((props: any) => ({
     fontSize: 37,
     fontWeight: "bold",
@@ -71,6 +76,7 @@ export const Input = styled.TextInput((props: any) => ({
 const SecondaryButtonRoot = styled.TouchableOpacity((props: any) => ({
     backgroundColor: 'transparent',
     height: 35,
+    marginBottom: 35,
     overflow: "visible",
     ...(props.theme.secondaryButtonRoot ? { ...props.theme.secondaryButtonRoot } : {})
 }))

diff --git a/src/ui/NativeAuth/pages/ForgotPassword.tsx b/src/ui/NativeAuth/pages/ForgotPassword.tsx
@@ -88,7 +88,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
 
     if (!onConfirm) {
         return (
-            <Form behavior="padding">
+            <Form keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
                 <HeaderText>{dictionary.forgotPasswordHeader}</HeaderText>
 
                 <View>

diff --git a/src/ui/NativeAuth/pages/SignIn.tsx b/src/ui/NativeAuth/pages/SignIn.tsx
@@ -27,7 +27,7 @@ export default function ({ setCurrentPage, dictionary, toast }: INativePage) {
     }
 
     return (
-        <Form behavior="padding">
+        <Form keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
             <HeaderText>{dictionary.signInHeader}</HeaderText>
 
             <View>

diff --git a/src/ui/NativeAuth/pages/SignUp.tsx b/src/ui/NativeAuth/pages/SignUp.tsx
@@ -68,7 +68,7 @@ export default function ({ setCurrentPage, dictionary, signUpFields, toast }: IS
     }
 
     return (
-        <Form behavior="padding">
+        <Form keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
             <HeaderText>{dictionary.signUpHeader}</HeaderText>
 
             <View>