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.

react Raylogic · Accepted Answer · 2023-12-01 05:51:15Z

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.

answered Dec 1, 2023 at 5:51

react Raylogic

818 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shivo'ham · Accepted Answer · 2023-12-01 07:09:55Z

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;

Collectives™ on Stack Overflow

React Native Component Hide with Keyboard

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related