TextInput got hides behind keyboard in react-native - react-native

Question

I am creating chat UI in react native in which I want the first section (where the messages are shown) should be scrollable.
The TextInput should be at the bottom of screen and keyboard should be after it.
The UI is similar to WhatsApp chat screen. But I'm unable to re-create that UI.
I have also tried KeyboardAvoidingView from react-native but it doesn't works for me like it do.
App.js
import React, { useEffect, useState } from "react";
import {
ScrollView,
View,
Text,
Alert,
Dimensions,
Platform,
KeyboardAvoidingView,
TextInput,
TouchableOpacity,
} from "react-native";
import { Ionicons } from "#expo/vector-icons";
const App = () => {
const [message, setMessage] = useState([]);
return (
<View
style={{
display: "flex",
flex: 1,
justifyContent: "space-evenly",
alignItems: "center",
height: Dimensions.get("window").height,
width: Dimensions.get("window").width,
}}
>
<View
style={{
height: Dimensions.get("window").height * 0.8,
backgroundColor: "lightgrey",
width: Dimensions.get("window").width,
}}
>
<ScrollView></ScrollView>
</View>
<View
style={{
height: Dimensions.get("window").height * 0.2,
width: Dimensions.get("window").width,
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
padding: 25,
}}
>
<View style={{ flex: 4 }}>
<TextInput placeholder="Type Message ....." />
</View>
<TouchableOpacity>
<Ionicons name="md-send" size={30} color="#0af" />
</TouchableOpacity>
</View>
</View>
);
};
export default App;
I have added my code on expo snack.

Answer 1

I have run into this issue several times while working on react-native projects. I always find the native KeyboardAvoidingView module glitchy. So I use another package to make it work. I have tested it on your snack and it works fine.
The package is called react-native-keyboard-aware-scroll-view. It's
a lightweight package with an unpacked size of just 10kB.
It has several useful props that you can use to adjust the component. Check it out here.
Here is a link to the snack that I used to test your code.
import React, { useEffect, useState } from "react";
import {
ScrollView,
View,
Text,
Alert,
Dimensions,
Platform,
TextInput,
TouchableOpacity,
} from "react-native";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { Ionicons } from "#expo/vector-icons";
const App = () => {
const [message, setMessage] = useState([]);
return (
<KeyboardAwareScrollView
style={{
display: "flex",
flex: 1,
justifyContent: "space-evenly",
alignItems: "center",
height: Dimensions.get("window").height,
width: Dimensions.get("window").width,
}}
>
<View
style={{
height: Dimensions.get("window").height * 0.8,
backgroundColor: "lightgrey",
width: Dimensions.get("window").width,
}}
>
<ScrollView></ScrollView>
</View>
<View
style={{
height: Dimensions.get("window").height * 0.2,
width: Dimensions.get("window").width,
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
padding: 25,
}}
>
<View style={{ flex: 4 }}>
<TextInput placeholder="Type Message ....." />
</View>
<TouchableOpacity>
<Ionicons name="md-send" size={30} color="#0af" />
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
);
};
export default App;

Answer 2

use npm i react-native-keyboard-aware-scroll-view --save
import react-native-keyboard-aware-scroll-view
and then ..
<KeyboardAwareScrollView
contentContainerStyle={{
height: Dimensions.get("window").height * 2.25,
width: '100%'
}}
>
you can change *2.25 to change height