React Native Gifted Chat on Expo on Android 输入被键盘覆盖

Question

I'm using a react-native gifted chat for my application chat. But the text input is covered by the keyboard so I can't see what I'm typing.

I'm using react-native version 0.60.10. Expo version 32.0.13. Android-based phone for testing. I tried solutions with keyboardAvoidingView and KeyboardSpacer but it still not working.

Looking forward hearing any advice. Any advice would be very great. This is screenshot

Source Code

render() {
    const {navigation} = this.props;
    return (
        <>
            <HeaderBack headerWrapper={{height: 80}} headerSubWrapper={{marginTop: 30}} navigation={navigation}/>
                <GiftedChat
                    style={{paddingHorizontal: 20}}
                    isTyping={true}
                    messages={this.state.messages}
                    onSend={messages => this.onSend(messages)}
                    user={{
                        _id: 1,
                    }}
                />
        </>
    );
}

Answer 1

Try this updated code

componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',
                      this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',
                      this._keyboardDidHide);

}

_keyboardDidShow = (e) => {
    let keyboardHeight = e.endCoordinates.height;
    this.setState({
        minInputToolbarHeight: keyboardHeight + 45,
    });
}

_keyboardDidHide = () => {
    this.setState({
        minInputToolbarHeight: 45,
    });
}

componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();

}

render() {
    const {navigation} = this.props;

    let platformConf = Platform.OS === 'android' ? {
        minInputToolbarHeight: this.state.minInputToolbarHeight,
        bottomOffset: 0,
    } : {};

    return (
        <GiftedChat
            style={{flex: 1}}
            messages={this.state.messages}
            onSend={messages => this.onSend(messages)}
            onInputTextChanged={(text) => this._checkForMentions(text)}
            keyboardShouldPersistTaps='never'
            {...platformConf}
            user={{
                        _id: 1,
                    }}/>
    );
}

If the above method does not working you can easily fix using react-native-keyboard-spacer Link

Also some users fix this by removing forceGetKeyboardHeight

More information