Question 296155 in React native Question posted in
The official React Native documentation can be found here.

React Native Component Hide with Keyboard

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` always show while typing.
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search