React Native Cookbook - Second Edition

There's more...

The current implementation works pretty well, but there's a performance problem we should address. Currently, the onLayout method gets executed on every frame of the animation, which means we are updating the state on every frame, which leads to the component re-rendering on every frame! We should avoid this, and only update it once to get the actual height.

To fix this, we could add a simple validation just to update the state if the current value is different than the initial value. This will avoid updating the state on every frame and we won't force the render over and over again:

onLayoutChange = (event) => { 
  const {layout: { height } } = event.nativeEvent; 
  if (this.state.height === -1000) { this.setState({ height }); ...