Keyboard creates different iOS devices

Issue

Having an issue with inconsistency with multiple iOS devices. The same code creates gaps when I click the TextInput iPhone SE (2nd Gen), IPad Pro (10.5-inch), but it doesn't create the same gap with iPhone 14 Pro. Am I missing something? What is the best practice to fix this issue?

I am on the simulator, but it is happening on physical devices (at least iPhone SE).

If I comment out the behavior={Platform.OS === "ios" ? "padding": "height"}, it may look okay, but my original code (below is the simplistic version), then the keyboard is closing the input fields.

import {
  ImageBackground,
  KeyboardAvoidingView,
  Platform,
  TextInput,
} from "react-native";
import React from "react";

const Issue = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding": "height"}
      keyboardVerticalOffset={Platform.OS === "ios"? 90: 120}
      style={{
        flex: 1,
        flexGrow: 1,
      }}>
      <ImageBackground
        source={{
          uri: "https://images.unsplash.com/photo-1613828330596-982c62f72e9a?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
        }}
        style={{ flex: 1, flexGrow: 1 }}>
        <TextInput
          style={{
            height: 40,
            margin: 12,
            borderWidth: 1,
            padding: 10,
          }}/>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
};

export default Issue;

Solution

Instead of hardcoding keyboardVerticalOffset, you could try and dynamically calculate it based on the device's screen size or the keyboard's height. React Native's Keyboard module can help you listen to keyboard events and adjust your layout accordingly.

Use React Native's Dimensions module to get the screen size and adjust the layout. That should help in making your app responsive to different screen sizes.
Use flexbox properties to make sure your components resize and adjust properly when the keyboard is visible.

I am trying to create a chat panel that is super similar to WhatsApp or Telegram. There will be a background image, a TextField at the bottom, buttons, and so on. The screen already has a horizontal flat list that (I think) makes KeyboardAwareScrollView not very applicable. The solution you suggested is not working for me.

True: KeyboardAwareScrollView is not suitable due to the presence of a horizontal flat list.

You would need a custom solution that handles keyboard visibility and layout adjustments.
Try and use React Native's Keyboard module to listen to keyboard events. Adjust the layout dynamically when the keyboard appears or disappears.
Then, implement a custom ScrollView for your messages. That ScrollView should automatically scroll to the bottom when a new message is added and adjust its height based on the keyboard's visibility
Position the TextField at the bottom of the screen, ensuring it moves up with the keyboard. And make sure the horizontal FlatList remains functional and does not interfere with the keyboard handling logic.

import React, { useState, useEffect } from 'react';
import {
  View,
  TextInput,
  Keyboard,
  StyleSheet,
  FlatList,
  Text,
  TouchableOpacity,
  ImageBackground,
} from 'react-native';

const ChatScreen = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [messages, setMessages] = useState(["Hello", "How are you?", "That is a message"]);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  const sendMessage = (message) => {
    setMessages([...messages, message]);
    // Logic to send message goes here
  };

  return (
    <ImageBackground
      source={{ uri: "https://images.unsplash.com/photo-1613828330596-982c62f72e9a?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" }}
      style={styles.background}
    >
      <FlatList
        data={messages}
        renderItem={({ item }) => <Text style={styles.message}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
        style={{ marginBottom: keyboardHeight }}
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Type a message"
          onSubmitEditing={(event) => sendMessage(event.nativeEvent.text)}
        />
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "flex-end",
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
  },
  input: {
    flex: 1,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 10,
  },
  message: {
    padding: 10,
    borderRadius: 10,
    margin: 5,
    backgroundColor: 'rgba(255,255,255,0.8)',
  },
});

export default ChatScreen;

The FlatList for messages has its marginBottom dynamically set to keyboardHeight: that should help not to get covered by the keyboard. The TextInput is placed at the bottom and moves up with the keyboard.

Answered By - VonC