FlatList ScrollView Error on any State Change - Invariant Violation: Changing onViewableItemsChanged on the fly is not supported

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.1 Node: 6.11.4 Yarn: 1.1.0 npm: 5.3.0 Watchman: Not Found Xcode: Xcode 9.2 Build version 9C40b Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.51.0 => 0.51.0

Steps to Reproduce

1. Please refer to snack
2. Repo has also been uploaded at github
3. Any state change produces an error when using onViewableItemsChanged
4. What does this error even mean?

Note: Placing the onViewableItemsChanged function in a const outside the render method also does not assist…

           <FlatList
                    data={this.state.cardData}
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={(info) =>console.log(info)}
                    viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}}

                    renderItem={({item}) =>
                        <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
                            <Text>Dogs and Cats</Text>
                        </View>
                    }
                />

Expected Behavior

I’m not sure why this is happening. I would like to know if this is a bug with the current release, of if I’m doing something wrong.

Should users be using a separate workaround (ie. using onScroll rather than onViewableItemsChanged for information on scroll Position?

What does this error even mean?

Actual Behavior

Error

Reproducible Demo

Please refer to snack Repo has also been uploaded at github

[adrianfalleiro]

@njho I believe you’ll need to set both the onViewableItemsChanged and the viewabilityConfig props as class properties, rather than inside the render() method.

E.g

export default class App extends Component<{}> {

    constructor(props) {
        super(props);
        this.state = {
            cardData: [{name: 'Clean Up the Oceans'}, {name: 'three'}],

        }

        this.handleViewableItemsChanged = this.handleViewableItemsChanged.bind(this)
        this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 50}
    }

    handleViewableItemsChanged(info) {
        console.log(info)
    }

    render() {
        return (
            <View style={styles.container}>
                <Button title="Some State Change" onPress={()=>this.setState({...this.state, stateChange: 'someStateChange'})}/>
                <FlatList
                    data={this.state.cardData}
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={this.handleViewableItemsChanged}
                    viewabilityConfig={this.viewabilityConfig}

                    renderItem={({item}) =>
                        <View style={{width: width, borderColor: 'white', borderWidth: 20,}}>
                            <Text>Dogs and Cats</Text>
                        </View>
                    }
                />
            </View>
        );
    }
}

Working Snack example: https://snack.expo.io/rJp1MLd7f

[adrianfalleiro]

@njho Both the viewabilityConfig prop and the onViewableItemsChanged are compared with their previous values in the componentWillReceiveProps() method of the FlatList component. This is done using the triple equals symbol.

Since you are using an inline arrow function and an inline object literal, these are re-created on each render. This means that the exception will be thrown on each render since the reference of the function or object is different each time.

I don’t know what purpose the checks serve, I just took a peek at the source code haha.

https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L430-L451