Bottom content covers the main content when keyboard is visible

Question

I have a problem with device keyboard main content and bottom/footer content when the keyboard is visible. In this example I have 3 InpunTexts as the main content of the screen and a long text in the bottom (in the original source it is the company logo).

import React from "react";
import { StyleSheet, View, Text, Button, TextInput } from "react-native";

const Tab1Screen = ({ route, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
      </View>
      <View style={styles.bottom}>
        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  input: {
    backgroundColor: "white",
    padding: 10,
    margin: 16,
    borderWidth: 1,
    borderColor: "black",
    height: 40,
    fontSize: 14,
    letterSpacing: 0,
    color: "black",
  },
});

export default Tab1Screen;

If I try to write something in one TextInput the keyboard appears and the long text covers the last 2 TextInputs. If I use BottomTabNavigator the tabs are still visible, so the available content is less.

Is it possible to solve this problem?

Answer 1

AvoidSoftInputView solves the problem and it is very easy to use.

Project: https://github.com/mateusz1913/react-native-avoid-softinput

Documentation: https://mateusz1913.github.io/react-native-avoid-softinput/

Answer 2

In case you want the text part to be fixed at bottom:-

 <View style={styles.container}>
   <View style={styles.content}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        </View>
        <Text>DUMMY TEXT</Text>

    </View>

And change the flex styling of styles.content to 0.9 or 0.8 as per your requirement.

   styles.content { flex: 0.9 }

Else if you don't need the text part at bottom, you can simply remove content view.

    <View style={styles.container}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna nisi 
         ut aliquip 
        </Text>
    </View>

Also if you have multiple text inputs in a screen, would suggest wrapping them inside a keyboardAvoidingView and scrollView.