title: Ref is null - React Native
body: <p>I wanted to make a custom indictor from ScrollView which is horizontal
  I put refs to each item of my list with <code>React.createRef()</code> and then forEach item I watch the <code>measureLayout</code> from the ref and then I put it to a state to get <strong>x, y, width</strong></p>
  <p>But all my ref is null despite i assigned them ..</p>
  <pre><code>const data = [
      {
          key: 1,
          title: &quot;Aujourd'hui&quot;,
          ref: React.createRef(),
      },
      {
          key: 2,
          title: 'Relations',
          ref: React.createRef(),
      },
      {
          key: 3,
          title: 'Créateurs',
          ref: React.createRef(),
      },
      {
          key: 4,
          title: 'Mots-clés',
          ref: React.createRef(),
      },
      {
          key: 5,
          title: 'Tendances',
          ref: React.createRef(),
      },
  ]
  
  /** React.forwardRef Ref is equal to a ref scrollView and its not null **/
  
  const Tab = React.forwardRef(({ item, isActive, index, openCategory, isOpen }, ref) =&gt; {
      return (
          &lt;Category hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} onPress={() =&gt; openCategory(index)} ref={ref}&gt;
              &lt;Label openFlux={isOpen} isActive={isActive}&gt;
                  {item.title}
              &lt;/Label&gt;
          &lt;/Category&gt;
      )
  })
  
  const Tabs = React.forwardRef(({ data, active, openCategory, isOpen }, ref) =&gt; {
      const [measures, setMeasures] = React.useState&lt;any&gt;([])
  
      const onItemPress = React.useCallback(
          (itemIndex: number) =&gt; {
              ref?.current?.scrollTo({
                  x: measures[itemIndex].x,
                  animated: true,
              })
          },
          [measures]
      )
  
      const onOpenCategory = (index: number) =&gt; {
          onItemPress(index)
          openCategory(index)
      }
  
      React.useEffect(() =&gt; {
          const m: any[] = []
          data.forEach((item) =&gt; {
              item.ref?.current?.measureLayout(ref?.current, (x, y, width, height) =&gt; {
                  m.push({
                      x,
                      y,
                      width,
                      height,
                  })
  
                  if (m.length === data.length) {
                      setMeasures(m)
                  }
              })
          })
      }, [])
  
      return (
          &lt;ScrollView ref={ref} horizontal bounces={true} showsHorizontalScrollIndicator={false}&gt;
              {data.map((item, index) =&gt; {
                  return (
                      &lt;Tab
                          key={item.key}
                          item={item}
                          isActive={active === index}
                          index={index}
                          isOpen={isOpen}
                          openCategory={() =&gt; onOpenCategory(index)}
                          ref={item.ref}
                      /&gt;
                  )
              })}
              {measures.length &gt; 0 &amp;&amp; &lt;Indicator measures={measures} active={active} /&gt;}
          &lt;/ScrollView&gt;
      )
  })
  </code></pre>