React Native Component Hide with Keyboard

Question

I create Header and Gifted Chat in React Native.

return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <StatusBar
                backgroundColor="#4A43EC"
                barStyle="light-content"
            />
            {/* Header */}
            <KeyboardAvoidingView >
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', paddingVertical: 16, backgroundColor: '#4A43EC',}}>
                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 24, }}>
                    <TouchableOpacity
                        onPress={() => navigation.goBack()}>
                        <Image
                            style={{ height: 22, width: 22, marginRight: 13 }}
                            source={require("../Assets/Icons/EventDetailsLeftArrow.png")}
                        />
                    </TouchableOpacity>
                    <Text style={{ color: '#fff', fontSize: 24, fontWeight: '400', }}>{item.name} Id: {item.id}</Text>
                </View>
            </View>
            </KeyboardAvoidingView>
            {/* Body */}
            <View style={{ flex: 1 }}>
                <GiftedChat
                    messages={messages}
                    onSend={messages => onSend(messages)}
                    user={{
                        _id: rid,
                    }}
                    alwaysShowSend
                    renderBubble={renderBubble}
                // renderSend={renderSend}
                />
            </View>
        </View>
    )

When I open Keyboard for typing, the Header hide.

I don't want this, I want that header to be always show while typing.

Answer 1

It behaves in this manner because your header is wrapped in KeyboardAvoidingView remove it and it will work normally.

Your chat component should be wrapped in KeyboardAvoidingView.

Answer 2

Take your header bar from the scrollview and use KeyboardAwareScrollView instead of KeyboardAvoidingView

KeyboardAwareScrollView handles both scroll and keyboard behavior. KeyboardAvoidingView should only be used on screens where the user shouldn't scroll.

Example:

KeyboardAwareScrollView.js

import React from 'react';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
    export const KeyboardAvoidingView = (props: any) => {
      const defaultProps = {
        style: { flex: 1 },
        contentContainerStyle: { flexGrow: 1 },
        bounces: false,
        bouncesZoom: false,
        alwaysBounceVertical: false,
        alwaysBounceHorizontal: false,
    
      };
    
      return React.createElement(KeyboardAwareScrollView, {
        keyboardShouldPersistTaps: 'handled',
        enableOnAndroid: true,
        ...defaultProps,
        ...props,
      });
    };

import { ImageBackground, TextInput, } from "react-native"; import React from "react"; import KeyboardAvoidingView from './keyboardAvoidingView'

Usage

 const Issue = () => {
      return (
        <SafeAreaView style={{flex:1}}>
        <Header/>
        <KeyboardAvoidingView>
         <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,
              }}
            ></TextInput>
        </KeyboardAvoidingView>
        </SafeAreaView>
      );
    };
    
    export default Issue;

Answer 3

To keep the header always visible when the keyboard is open, you can adjust your code to use the KeyboardAvoidingView with the behavior set to padding and make sure the flex property is set to 1 for both the `KeyboardAvoidingView and the parent View. This will ensure that the header remains visible when the keyboard is open.

return (
  <View style={{ flex: 1, backgroundColor: '#fff' }}>
    <StatusBar backgroundColor="#4A43EC" barStyle="light-content"/>
    
    {/* Header */}
    <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', paddingVertical: 16, backgroundColor: '#4A43EC' }}>
        <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 24 }}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Image style={{ height: 22, width: 22, marginRight: 13 }} source={require("../Assets/Icons/EventDetailsLeftArrow.png")} />
          </TouchableOpacity>
          <Text style={{ color: '#fff', fontSize: 24, fontWeight: '400' }}>{item.name} Id: {item.id}</Text>
        </View>
      </View>
    </KeyboardAvoidingView>

    {/* Body */}
    <View style={{ flex: 1 }}>
      <GiftedChat messages={messages} onSend={messages => onSend(messages)} user={{ _id: rid }} alwaysShowSend renderBubble={renderBubble} />
    </View>
  </View>
);