TextInput disappears under keyboard in React Native

Question

I am making a react native app and for some reason when I tap on the text input to type something it disappears under the keyboard. I want it to come to the top of the keyboard like the way Instagram messenger and other messenger apps do it. I tried using keyboardAvoidView and setting the behavior to padding and height but none of it worked.

import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
} from "react-native";
import CommunityPost from "../components/CommunityPost";
import { Context as CommunityContext } from "../context/CommunityContext";

const Key = ({ navigation }) => {
  const { createCommunityPost, errorMessage } = useContext(CommunityContext);
  const [body, setBody] = useState("");


  return (
    <View style={styles.container}>
      <SafeAreaView />

      <CommunityPost />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          multiline={true}
          placeholder="Type..."
          placeholderTextColor="#CACACA"
          value={body}
          onChangeText={setBody}
        />
        <TouchableOpacity
          style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
          onPress={() => createCommunityPost({ body })}
        >
          <Text style={styles.sendText}>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    backgroundColor: "#2B3654",
    justifyContent: "flex-end",
  },
  inputContainer: {
    justifyContent: "flex-end",
    flexDirection: "row",
  },
  sendText: {
    color: "white",
    fontSize: 25,
  },
  input: {
    fontSize: 25,
    color: "white",
    borderColor: "#2882D8",
    borderWidth: 1,
    borderRadius: 15,
    width: "80%",
    marginBottom: 30,
    marginLeft: 10,
    padding: 10,
  },
});

export default Key;

Answer 1

You must KeyboardAvoidingView component provided by react native.

    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <SafeAreaView />

      <CommunityPost />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          multiline={true}
          placeholder="Type..."
          placeholderTextColor="#CACACA"
          value={body}
          onChangeText={setBody}
        />
        <TouchableOpacity
          style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
          onPress={() => createCommunityPost({ body })}
        >
          <Text style={styles.sendText}>Send</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>

Answer 2

For these situations we can use one of these methods:

1.wrapping Component with <ScrollView></ScrollView>

2.wrapping Component with <KeyboardAvoidingView></KeyboardAvoidingView>

Sometimes our wrong given styles can make these happens too such as: Having a fixed value for our styles , check your margins and use one of the given methods

I hope it helps

Answer 3

Try using keyboardVerticalOffset and test it with different values.

For more info check this out

Answer 4

For those who want to keep the code clean, just use the FlatList component and add a View component involving the component with the states: {flex: 1, height: Dimensions.get ("window"). Height}.

Below left a component ready for anyone who wants to use, just wrap your component in this way:

<FormLayout>
    {... your component}
</FormLayout>

Here is the solver component:

import React from 'react'
import { View, StyleSheet, FlatList, Dimensions } from 'react-native'

import Background from './Background'

const FormLayout = ({ children }) => {

    const renderContent = <View style={styles.container}>
          {children}
    </View>

    return <FlatList 
        ListHeaderComponent={renderContent}
        showsVerticalScrollIndicator={false}
    />
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: Dimensions.get('window').height * 0.95
    }
})

export default FormLayout