[SOLVED] Bottom content covers the main content when keyboard is visible

Bottom content covers the main content when keyboard is visible

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?

Solution