'TextInput got hides behind keyboard in react-native

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.

Solution 1:^[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;

Solution 2:^[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	sahba

'TextInput got hides behind keyboard in react-native

App.js

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]