How to rerender FlatList inside of SmoothPicker to change data with react hooks

Question

I'm trying to create an SmoothPicker like that:

I'm using react-native-smooth-picker 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:

const HeightPicker = () => {
   const [isFeet, setIsFeet] = useState(false)
   const listRef = useRef(null)

   let metersHeights = []
   const feetHeights = new Set()
   for (i = 140; i <= 220; i++) {
       metersHeights.push(i)
       feetHeights.add(centimeterToFeet(i))
   }
   const [selected, setSelected] = useState(40)

   return <View
       style={{
           backgroundColor: 'rgb(92,76, 73)',
           paddingBottom: 20
       }} >
       <Toggle
           style={{
               alignSelf: 'flex-end',
               marginVertical: 20,
               marginEnd: 20
           }}
           textFirst="Feet"
           textSecond="Meters"
           onChange={(change) => {
               setIsFeet(change)
           }} />

       <SmoothPicker
           ref={listRef}
           onScrollToIndexFailed={() => { }}
           initialScrollToIndex={selected}
           keyExtractor={(value) => value.toString()}
           horizontal
           showsHorizontalScrollIndicator={false}
           magnet={true}
           bounces={true}
           extraData={isFeet}
           data={isFeet ? [...feetHeights] : metersHeights}
           onSelected={({ item, index }) => setSelected(index)}
           renderItem={({ item, index }) => (
               <Bubble selected={index === selected}>
                   {item}
               </Bubble>
           )}
       />
   </View>
}

Answer 1

You should separate the feet & meters (the function tha generates them). Set data with useState & make meters as default make use of useEffect to change the data everytime you toggle. ... useEffect(() => { handleData(isFeet) },[isFeet]);

const handletData = (isFeet) => { if(isFeet){ setData(feet) }else{ setData(meters) } } .... data={data} ...