title: Flatlist reference error when leaving the screen in a Carousel view
body: <p>I have an autoscrolling carousel in React Native and everything is working fine with images scrolling through both automatically every X seconds and manually.</p>
  
  <p>The problem is when I move away from that screen that I get the following error: </p>
  
  <p><a href="https://i.stack.imgur.com/dyC4N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dyC4N.png" alt="enter image description here"></a></p>
  
  <p>Here's is my full code...</p>
  
  <pre><code>const { width, height } = Dimensions.get("window");
  let flatList;
  
  function infiniteScroll(dataList) {
    const numberOfData = dataList.length;
    let scrollValue = 0,
      scrolled = 0;
    setInterval(function () {
      scrolled++;
      if (scrolled &lt; numberOfData) scrollValue = scrollValue + width;
      else {
        scrollValue = 0;
        scrolled = 0;
      }
      this.flatList.scrollToOffset({ animated: true, offset: scrollValue });
    }, 3000);
  }
  
  const Carousel = (props) =&gt; {
    const topTenVideos = useSelector(getTopTenVideos);
    const dispatch = useDispatch();
  
    const scrollX = new Animated.Value(0);
    let position = Animated.divide(scrollX, width);
    const [dataList, setDataList] = useState(topTenVideos);
    const isFocused = useIsFocused();
  
    useEffect(() =&gt; {
      if (isFocused) {
        setDataList(topTenVideos);
        infiniteScroll(dataList);
      }
    }, [isFocused]);
  
    const renderRow = (itemData) =&gt; {
      return (
        &lt;CarouselItem
          id={itemData.item.id}
          img={itemData.item.poster}
          title={itemData.item.title}
        /&gt;
      );
    };
  
    return (
      &lt;View style={styles.screen}&gt;
        &lt;FlatList
          ref={(flatList) =&gt; {
            this.flatList = flatList;
          }}
          horizontal
          data={dataList}
          pagingEnabled
          scrollEnabled
          snapToAlignment="center"
          scrollEventThrottle={16}
          decelerationRate={"fast"}
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event([
            { nativeEvent: { contentOffset: { x: scrollX } } },
          ])}
          keyExtractor={(item, index) =&gt; "key" + index}
          renderItem={renderRow}
        /&gt;
        &lt;View style={styles.dotView}&gt;
          {dataList.map((_, i) =&gt; {
            let opacity = position.interpolate({
              inputRange: [i - 1, i, i + 1],
              outputRange: [0.3, 1, 0.3],
              extrapolate: "clamp",
            });
            return (
              &lt;Animated.View
                key={i}
                style={{
                  opacity,
                  height: 8,
                  width: 8,
                  borderRadius: 6,
                  backgroundColor: "white",
                  margin: 8,
                }}
              /&gt;
            );
          })}
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>It's complaining about this line <strong>this.flatList.scrollToOffset({ animated: true, offset: scrollValue });
    }, 3000);</strong> which is inside my <strong>infiniteScroll</strong> function.</p>
  
  <p>It looks like that when the screen loses focus, it is still searching for this.flatList.scrollToOffset.</p>