ReactNative - FlatList 在滚动之前不会更新

Question

I have a problem with FlatList component which does not update until scrolled.

I tried add log to renderItem and keyExtractor both methods called with correct data but list didn't update.

Here is a render method:

render() {

    const messages = this.props.messages
    const message = this.props.message

    return (
        <View style={[styles.container]}>
            <FlatList
                ref={"flatList"}
                contentContainerStyle={styles.list}
                data={messages}
                renderItem={(listItem) => {
                    return <MessageBuble message={listItem.item}/>
                }}
                keyExtractor={(item: Message) => {
                    return item.id
                }}
            />

            <View style={[styles.textInputContainer]}>
                <TextInput
                    style={styles.textInput}
                    value={message}
                    multiline={true}
                    onChangeText={this.props.messageChanged}
                />
                <Button title={"Odeslat"} onPress={() => {
                    if (this.props.sendMessage) {
                        this.props.sendMessage(this.props.message)
                    }
                }}/>
            </View>
        </View>
    )
}

Answer 1

Add extraData in FlatList and retry

<FlatList
    extraData={this.props}
    ....

Answer 2

Tried the extraData, but that does not work.

There was an issue on Android where content was not visible when I returned back from another page to home screen (where the flatlist was present). The content was visible when I scrolled it a bit.

I assigned the main list to the extraData attribute, and could see that it changed in size via console logs. But the content remained invisible. Finally, used

onContentSizeChange={() => {
      if (list.length > 0) {
        ref.current.scrollToOffset({ animated: true, x: 0 });
      }
    }}

and it worked.