title: How to rerender FlatList inside of SmoothPicker to change data with react hooks
body: <p>I'm trying to create an SmoothPicker like that:
  <img src="https://i.stack.imgur.com/YSjW3.png" alt="Text"></p>
  
  <p>I'm using <code>react-native-smooth-picker</code> and all works fine, except when I'm Changing to Feet.
  When I change to Feet, I want that the list will rerender and change the data to Feet parameters, but it only happened after a scroll. Is there a way to do that? 
  here is my code:</p>
  
  <pre><code>const HeightPicker = () =&gt; {
     const [isFeet, setIsFeet] = useState(false)
     const listRef = useRef(null)
  
     let metersHeights = []
     const feetHeights = new Set()
     for (i = 140; i &lt;= 220; i++) {
         metersHeights.push(i)
         feetHeights.add(centimeterToFeet(i))
     }
     const [selected, setSelected] = useState(40)
  
     return &lt;View
         style={{
             backgroundColor: 'rgb(92,76, 73)',
             paddingBottom: 20
         }} &gt;
         &lt;Toggle
             style={{
                 alignSelf: 'flex-end',
                 marginVertical: 20,
                 marginEnd: 20
             }}
             textFirst="Feet"
             textSecond="Meters"
             onChange={(change) =&gt; {
                 setIsFeet(change)
             }} /&gt;
  
         &lt;SmoothPicker
             ref={listRef}
             onScrollToIndexFailed={() =&gt; { }}
             initialScrollToIndex={selected}
             keyExtractor={(value) =&gt; value.toString()}
             horizontal
             showsHorizontalScrollIndicator={false}
             magnet={true}
             bounces={true}
             extraData={isFeet}
             data={isFeet ? [...feetHeights] : metersHeights}
             onSelected={({ item, index }) =&gt; setSelected(index)}
             renderItem={({ item, index }) =&gt; (
                 &lt;Bubble selected={index === selected}&gt;
                     {item}
                 &lt;/Bubble&gt;
             )}
         /&gt;
     &lt;/View&gt;
  }
  </code></pre>