How to avoid keyboard pushing whole layout up in react native?

Question

I am making an application in react native. Whenever I open keyboard my whole layout moves upwards, can't find solution of it. I have already tried using keyboard avoiding view, keyboard scroll view and adjusting softwareKeyboardLayoutMode to "Pan". if I use these then scroll doesn't work.Below is my code

import React, { useState } from "react";
import { View, Text, Image, Alert, TouchableOpacity } from "react-native";

...//(irrelevant code removed)//...

  return (
    <View style={common.containerStyle}>
      <Image
        style={common.LogoImageStyle}
        source={require("../../assets/splash.png")}
      />
      <Text style={common.textHeadingStyle}>SIGN UP</Text>

      <ScrollView>
        <TextInputComponent
          label="Full Name"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => fullNameTextChange(val)}
          onEndEditing={(e) => handleValidUser(e.nativeEvent.text)}
        />
        {data.isValidUser ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>User must be 4 characters long</Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Email"
          placeholder="email@address.com"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => emailTextChange(val)}
          onEndEditing={(e) => handleValidEmail(e.nativeEvent.text)}
        />
        {data.isValidEmail ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>Email must be 5 characters long</Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Password"
          placeholder="********"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => passwordTextChange(val)}
          secureTextEntry={true}
          onEndEditing={(e) => handleValidPassword(e.nativeEvent.text)}
        />
        {data.isValidPassword ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>
              Password must be 5 characters long
            </Text>
          </Animatable.View>
        )}

        <TextInputComponent
          label="Mobile #"
          placeholder="03001234567"
          placeholderTextColor={colors.placeHolderColor}
          onChangeText={(val) => mobileTextChange(val)}
          onEndEditing={(e) => handleValidMobile(e.nativeEvent.text)}
          keyboardType="numeric"
        />
        {data.isValidMobile ? null : (
          <Animatable.View animation="fadeInLeft" duration={500}>
            <Text style={common.errorMsg}>
              Mobile must be 5 characters long
            </Text>
          </Animatable.View>
        )}
      </ScrollView>

      <ButtonComponent
        label="SIGN UP"
        onPress={() => {
          signUpHandle(data.email, data.password, data.fullName, data.mobile);
        }}
      />

      <View style={common.createAccountViewStyle}>
        <View style={common.flexRow}>
          <Text style={LoginStyle.noAccountText}>Already have an account?</Text>
          <TouchableOpacity
            onPress={() => {
              navigation.pop();
            }}
          >
            <Text style={LoginStyle.createAccountStyle}>LOGIN</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
export default SignUp;

Screen shots Login screen: [Image before open keyboard] : [Image after open keyboard]

I want Login button to be fix at the bottom. Same issue in other screens as well. Please guide.

Screen shots other screen: [without keyboard] [with keyboard]

Answer 1

You can try react-native-keyboard-aware-scroll-view.