Fix Keyboard layout issues on ios

Fixes https://github.com/lesspass/lesspass/issues/552

mobile/src/auth/SignInScreen.js

@@ -1,7 +1,13 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { isEmpty } from "lodash";
-import { KeyboardAvoidingView, ScrollView } from "react-native";
+import {
+  KeyboardAvoidingView,
+  View,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from "react-native";
 import { Text, Button, Title } from "react-native-paper";
 import MasterPassword from "../password/MasterPassword";
 import TextInput from "../ui/TextInput";
@@ -25,67 +31,68 @@ export class SignInScreen extends Component {
     const { navigation, settings, addError, signIn } = this.props;
     const { encryptMasterPassword } = settings;
     return (
-      <ScrollView style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          style={Styles.container}
-          behavior="padding"
-          enabled
-        >
-          <Title>Connect to Lesspass Database</Title>
-          <TextInput
-            mode="outlined"
-            label="Email"
-            value={email}
-            onChangeText={(text) => this.setState({ email: text.trim() })}
-          />
-          <MasterPassword
-            label={encryptMasterPassword ? "Master Password" : "Password"}
-            masterPassword={password}
-            hideFingerprint={!encryptMasterPassword}
-            onChangeText={(password) => this.setState({ password })}
-          />
-          <Button
-            compact
-            icon={"account-circle"}
-            mode="contained"
-            style={Styles.loginSignInButton}
-            disabled={isEmpty(email) || isEmpty(password) || isLoading}
-            onPress={() => {
-              this.setState({ isLoading: true });
-              signIn(
-                {
-                  email,
-                  password,
-                },
-                encryptMasterPassword
-              )
-                .then(() => navigation.navigate(routes.PASSWORD_GENERATOR))
-                .catch(() => {
-                  this.setState({ isLoading: false });
-                  let errorMessage =
-                    "Unable to log in with provided credentials.";
-                  if (encryptMasterPassword) {
-                    errorMessage +=
-                      " Your master password is encrypted. Uncheck this option in your settings if you don't use it.";
-                  }
-                  addError(errorMessage);
-                });
-            }}
-          >
-            Sign In
-          </Button>
-          <Text>Don't have an account?</Text>
-          <Button
-            compact
-            icon="account-circle"
-            mode="outlined"
-            style={Styles.loginSignUpButton}
-            onPress={() => navigation.navigate(routes.SIGN_UP)}
-          >
-            Sign Up
-          </Button>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={Styles.container}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={Styles.innerContainer}>
+            <Title>Connect to Lesspass Database</Title>
+            <TextInput
+              mode="outlined"
+              label="Email"
+              value={email}
+              onChangeText={(text) => this.setState({ email: text.trim() })}
+            />
+            <MasterPassword
+              label={encryptMasterPassword ? "Master Password" : "Password"}
+              masterPassword={password}
+              hideFingerprint={!encryptMasterPassword}
+              onChangeText={(password) => this.setState({ password })}
+            />
+            <Button
+              compact
+              icon={"account-circle"}
+              mode="contained"
+              style={Styles.loginSignInButton}
+              disabled={isEmpty(email) || isEmpty(password) || isLoading}
+              onPress={() => {
+                this.setState({ isLoading: true });
+                signIn(
+                  {
+                    email,
+                    password,
+                  },
+                  encryptMasterPassword
+                )
+                  .then(() => navigation.navigate(routes.PASSWORD_GENERATOR))
+                  .catch(() => {
+                    this.setState({ isLoading: false });
+                    let errorMessage =
+                      "Unable to log in with provided credentials.";
+                    if (encryptMasterPassword) {
+                      errorMessage +=
+                        " Your master password is encrypted. Uncheck this option in your settings if you don't use it.";
+                    }
+                    addError(errorMessage);
+                  });
+              }}
+            >
+              Sign In
+            </Button>
+            <Text>Don't have an account?</Text>
+            <Button
+              compact
+              icon="account-circle"
+              mode="outlined"
+              style={Styles.loginSignUpButton}
+              onPress={() => navigation.navigate(routes.SIGN_UP)}
+            >
+              Sign Up
+            </Button>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     );
   }
 }

mobile/src/auth/SignOutScreen.js

@@ -9,13 +9,7 @@ import routes from "../routes";
 const SignOutScreen = ({ navigation }) => {
   const dispatch = useDispatch();
   return (
-    <ScrollView
-      style={{
-        flex: 1,
-        paddingTop: 20,
-        paddingHorizontal: 10,
-      }}
-    >
+    <ScrollView style={Styles.innerContainer}>
       <Title style={{ marginBottom: 10 }}>Sign Out</Title>
       <Button
         compact

mobile/src/auth/SignUpScreen.js

@@ -1,6 +1,12 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { KeyboardAvoidingView, ScrollView } from "react-native";
+import {
+  KeyboardAvoidingView,
+  View,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from "react-native";
 import { Text, Button, Title } from "react-native-paper";
 import MasterPassword from "../password/MasterPassword";
 import TextInput from "../ui/TextInput";
@@ -26,63 +32,64 @@ export class SignUpScreen extends Component {
     const { encryptMasterPassword } = settings;
 
     return (
-      <ScrollView style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          style={Styles.container}
-          behavior="padding"
-          enabled
-        >
-          <Title>Create an account</Title>
-          <TextInput
-            mode="outlined"
-            label="Email"
-            value={email}
-            onChangeText={(text) => this.setState({ email: text.trim() })}
-          />
-          <MasterPassword
-            label={encryptMasterPassword ? "Master Password" : "Password"}
-            masterPassword={password}
-            hideFingerprint={!encryptMasterPassword}
-            onChangeText={(password) => this.setState({ password })}
-          />
-          <Button
-            compact
-            icon="account-circle"
-            mode="contained"
-            style={Styles.loginSignInButton}
-            disabled={isEmpty(email) || isEmpty(password) || isLoading}
-            onPress={() => {
-              this.setState({ isLoading: true });
-              signUp(
-                {
-                  email,
-                  password,
-                },
-                encryptMasterPassword
-              )
-                .then(() => navigation.navigate(routes.PASSWORD_GENERATOR))
-                .catch(() => {
-                  this.setState({ isLoading: false });
-                  addError(
-                    "Unable to sign up. Try in a few minutes or contact an administrator."
-                  );
-                });
-            }}
-          >
-            Sign Up
-          </Button>
-          <Text>Already have an account?</Text>
-          <Button
-            compact
-            icon="account-circle"
-            mode="outlined"
-            style={Styles.loginSignUpButton}
-            onPress={() => navigation.navigate(routes.SIGN_IN)}
-          >
-            Sign In
-          </Button>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={Styles.container}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={Styles.innerContainer}>
+            <Title>Create an account</Title>
+            <TextInput
+              mode="outlined"
+              label="Email"
+              value={email}
+              onChangeText={(text) => this.setState({ email: text.trim() })}
+            />
+            <MasterPassword
+              label={encryptMasterPassword ? "Master Password" : "Password"}
+              masterPassword={password}
+              hideFingerprint={!encryptMasterPassword}
+              onChangeText={(password) => this.setState({ password })}
+            />
+            <Button
+              compact
+              icon="account-circle"
+              mode="contained"
+              style={Styles.loginSignInButton}
+              disabled={isEmpty(email) || isEmpty(password) || isLoading}
+              onPress={() => {
+                this.setState({ isLoading: true });
+                signUp(
+                  {
+                    email,
+                    password,
+                  },
+                  encryptMasterPassword
+                )
+                  .then(() => navigation.navigate(routes.PASSWORD_GENERATOR))
+                  .catch(() => {
+                    this.setState({ isLoading: false });
+                    addError(
+                      "Unable to sign up. Try in a few minutes or contact an administrator."
+                    );
+                  });
+              }}
+            >
+              Sign Up
+            </Button>
+            <Text>Already have an account?</Text>
+            <Button
+              compact
+              icon="account-circle"
+              mode="outlined"
+              style={Styles.loginSignUpButton}
+              onPress={() => navigation.navigate(routes.SIGN_IN)}
+            >
+              Sign In
+            </Button>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     );
   }
 }

mobile/src/auth/authActions.js

@@ -62,9 +62,7 @@ export function signUp(credentials, encryptMasterPassword) {
   return (dispatch) => {
     if (encryptMasterPassword) {
       return dispatch(getEncryptedCredentials(credentials)).then(
-        (encryptedCredentials) => {
-          dispatch(register(encryptedCredentials));
-        }
+        (encryptedCredentials) => dispatch(register(encryptedCredentials))
       );
     }
     return dispatch(register(credentials));

mobile/src/help/HelpScreen.js

@@ -1,18 +1,13 @@
 import React, { Component } from "react";
 import { ScrollView, Image, Linking } from "react-native";
 import { Title, Subheading, Paragraph, Button } from "react-native-paper";
+import Styles from "../ui/Styles";
 import Theme from "../ui/Theme";
 
 export default class HelpScreen extends Component {
   render() {
     return (
-      <ScrollView
-        style={{
-          flex: 1,
-          paddingTop: 20,
-          paddingHorizontal: 10,
-        }}
-      >
+      <ScrollView style={Styles.innerContainer}>
         <Title style={{ marginBottom: 10 }}>LessPass</Title>
         <Subheading>How does it work?</Subheading>
         <Paragraph style={{ marginBottom: 20 }}>

mobile/src/password/PasswordGeneratorScreen.js

@@ -2,13 +2,16 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import {
   View,
-  ScrollView,
   TouchableWithoutFeedback,
   Alert,
+  KeyboardAvoidingView,
+  Platform,
+  Keyboard,
 } from "react-native";
 import { isEqual } from "lodash";
 import { generatePassword } from "./passwordGenerator";
 import TextInput from "../ui/TextInput";
+import Styles from "../ui/Styles";
 import Counter from "./Counter";
 import Options from "./Options";
 import GeneratePasswordButton from "./GeneratePasswordButton";
@@ -134,19 +137,17 @@ export class PasswordGeneratorScreen extends Component {
     const { profiles, auth, savePasswordProfile, deletePasswordProfile } =
       this.props;
     return (
-      <TouchableWithoutFeedback
-        onPress={() => this.setState({ showAutocomplete: false })}
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={Styles.container}
       >
-        <View style={{ flex: 1 }}>
-          <ScrollView
-            keyboardShouldPersistTaps="always"
-            style={{
-              flex: 1,
-              padding: 12,
-              zIndex: 1,
-              backgroundColor: "transparent",
-            }}
-          >
+        <TouchableWithoutFeedback
+          onPress={() => {
+            this.setState({ showAutocomplete: false });
+            Keyboard.dismiss();
+          }}
+        >
+          <View style={Styles.innerContainer}>
             <AutocompleteSite
               value={site}
               showAutocomplete={showAutocomplete}
@@ -255,9 +256,9 @@ export class PasswordGeneratorScreen extends Component {
                 onPress={() => this._generatePassword()}
               />
             )}
-          </ScrollView>
-        </View>
-      </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
     );
   }
 }

mobile/src/settings/SettingsScreen.js

@@ -9,6 +9,7 @@ import TextInputModal from "./TextInputModal";
 import Switch from "../ui/Switch";
 import KeepMasterPasswordOption from "./KeepMasterPasswordOption";
 import { version } from "../version.json";
+import Styles from "../ui/Styles";
 
 export class SettingsScreen extends Component {
   constructor(props) {
@@ -44,7 +45,7 @@ export class SettingsScreen extends Component {
       defaultCounter,
     } = settings;
     return (
-      <ScrollView style={{ flex: 1 }}>
+      <ScrollView style={Styles.container}>
         <List.Section title="LESSPASS DATABASE">
           <TextInputModal
             label="Default URL"

mobile/src/ui/Styles.js

@@ -4,6 +4,9 @@ import Theme from "./Theme";
 
 export default StyleSheet.create({
   container: {
+    flex: 1,
+  },
+  innerContainer: {
     paddingHorizontal: 15,
     paddingTop: 15,
     marginBottom: 20,

mobile/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.2.0"
+  "version": "9.2.1"
 }