title: react native ref measureLayout
body: <p>I am following this tutorial</p>
  <p><a href="https://www.youtube.com/watch?v=ZiSN9uik6OY&amp;list=RDCMUCTcH04SRuyedaSuuQVeAcdg&amp;start_radio=1&amp;t=1398" rel="nofollow noreferrer">https://www.youtube.com/watch?v=ZiSN9uik6OY&amp;list=RDCMUCTcH04SRuyedaSuuQVeAcdg&amp;start_radio=1&amp;t=1398</a></p>
  <p>The problem is when I console.log( i.ref.current), I see all value. The ap will just not start with error <code>Undefined is not an Object</code> inside the app.</p>
  <p>and in reactive native console following comes up</p>
  <pre><code>This error is located at:
      in Tabs (at App.js:118)
      in RCTView (at View.js:34)
      in View (at App.js:91)
      in App (at renderApplication.js:47)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:107)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:134)
      in AppContainer (at renderApplication.js:40)
   ERROR  TypeError: undefined is not an object (evaluating 'nativeNode._nativeTag')
  
  
  </code></pre>
  <p>below is the app.js file:</p>
  <pre><code>import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { StyleSheet, Text, View, Dimensions, Animated, FlatList, Image } from 'react-native';
  
  
  const {width, height} = Dimensions.get('screen')
  
  const images = {
    man:
      'https://images.pexels.com/photos/3147528/pexels-photo-3147528.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500',
    women:
      'https://images.pexels.com/photos/2552130/pexels-photo-2552130.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500',
    kids:
      'https://images.pexels.com/photos/5080167/pexels-photo-5080167.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500',
    skullcandy:
      'https://images.pexels.com/photos/5602879/pexels-photo-5602879.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500',
    help:
      'https://images.pexels.com/photos/6857165/pexels-photo-6857165.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;w=500',
  };
  const data = Object.keys(images).map((i) =&gt; ({
    key: i,
    title: i,
    image: images[i],
    ref: React.createRef()
  }));
  
  const Indicator = () =&gt;{
    return (&lt;View  style={{
      position:'absolute',
      height:4,
      width:100,
      backgroundColor:'white',
      bottom: -10
     }}/&gt;);
   
  }
  
  const Tab = React.forwardRef(({item}, ref) =&gt; {
    return (
      &lt;View ref={ref}&gt;
        &lt;Text style={{
          color:'rgba(255, 255, 255, 0.8)', 
          fontWeight:'800', 
          fontSize:84/data.length,
          textTransform: 'uppercase' }}&gt;{item.title}&lt;/Text&gt;
      &lt;/View&gt;
    );
  });
  
  const Tabs  = ({data, scrollX}) =&gt;{
    const [measures, setMeasures] = React.useState([])
    const containerRef = React.useRef();
  
    React.useEffect(() =&gt; {
      let m = []
      data.forEach((i) =&gt; {
        i.ref.current.measureLayout(
          containerRef.current,
          (x, y, width, height) =&gt; {
            m.push({x, y, width, height})
            console.log(x, y, width, height)
          }
        );
          if(m.length === data.length){
            setMeasures(m)
          }
      });
    }, [])
    console.log(measures);
     return( &lt;View style={{ position: 'absolute', top:50, width }}&gt;
        &lt;View style={{justifyContent:'space-evenly', flex:1, flexDirection:'row'}}&gt;
          {
            data.map((item) =&gt; {
              return &lt;Tab key={item.key} item={item} ref={item.ref} /&gt;
            }) 
          }
        &lt;/View&gt;
        &lt;Indicator/&gt;
      &lt;/View&gt;
    )
  
  }
  
  
  export default function App() {
    const scrollX = React.useRef(new Animated.Value(0)).current;
  
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;StatusBar hidden /&gt;
        &lt;Animated.FlatList 
          data={data}
          keyExtractor={item =&gt; item.key}
          renderItem={({item}) =&gt; {
              return (&lt;View style={{width, height}}&gt;
                &lt;Image 
                  source={{uri: item.image}} 
                  style={{flex:1, resizeMode:'cover'}} 
                  /&gt;
                  &lt;View style={
                     [
                       StyleSheet.absoluteFillObject,
                       {backgroundColor: 'rgba(0,0,0, 0.3)' }
                     ]}/&gt;
              &lt;/View&gt;)
            }
          }
          horizontal
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          onScroll={Animated.event([{nativeEvent: {contentOffset :{x: scrollX } }}],
            {useNativeDriver: false}
            )}
          bounces={false}
          /&gt;
          &lt;Tabs scrollX={scrollX} data={data} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  }); ```
  
  Thanks. appreciate your time reading this
  
  </code></pre>