TextInput got hides behind keyboard in 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.

you must try [this solution](https://stackoverflow.com/a/74210255/9412981) — Sandeep Parish, Oct 26 '22 at 15:22

Ajin Kabeer · Accepted Answer · 2023-03-30T17:07:54.743

I have run into this issue several times while working on react-native projects. 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;

score 0 · Answer 2 · answered Apr 22 '22 at 12:39

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

score 0 · Answer 3 · answered Jun 10 '23 at 08:31

0

add behavior="padding" and enabled in KeyboardAvoidingView like this

<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
    <TextInput />
</KeyboardAvoidingView>

answered Jun 10 '23 at 08:31

Ravi K

27
3

TextInput got hides behind keyboard in react-native

App.js

3 Answers3