CODEWITHSUNDEEP
javascriptreactjsreact-native
Jérémie Chazelle
Jérémie Chazelle

Reputation: 1818

Update scrollview when keyboard is open with React Native

I would like to know how can I update scrollview when keyboard is open with React Native ?

I try with "onContentSizeChange" in "ScrollView", it's okay, but when I open the keyboard, the scroll view isn't update (bottom)

When I click on my input to send tape the text (1), the scrollview isn't update when the keyboard is open (2). I would like to update my scrollview (3).

enter image description here

MessageList.js

export default class MessageList extends React.Component {
    render() {
        return (
            <View style={MessageListStyles.container}>
                <ScrollView
                    ref={ref => this.scrollView = ref}
                    onContentSizeChange={(contentWidth, contentHeight)=>{
                        this.scrollView.scrollToEnd({animated: true});
                    }}
                    contentContainerStyle={{
                        flexGrow: 1,
                        justifyContent: 'space-between'
                    }}>
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                </ScrollView>
            </View>
        );
    }
}

Upvotes: 5

Views: 4253

Answers (1)

tvanlaerhoven
tvanlaerhoven

Reputation: 699

Do you aim to move the scrollview out of the way when the keyboard appears? In that case you use a KeyboardAvoidingView. It adds bottom or top padding depending on your needs.

Alternatively, you could add a listener that is triggered once the keyboard is opened, and put your scrollToEnd code there: keyboardDidShowListener

Upvotes: 3

Related Questions