The indicator display of the tab component is abnormal on iOS

[DiaoMIngHero]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

mobile phone model：iPhone11 pro Max system version:16.5 I want to display a tab component on the page, but it has encountered some issues. The pseudo code is as follows:

const [index, setIndex] = React.useState(0);
<Tab
    value={index}
    dense={true}
    onChange={e => setIndex(e)}
    containerStyle={styles.tabContainer}
    buttonStyle={styles.tabButton}
    titleStyle={active => (active ? styles.titleActive : styles.title)}
    indicatorStyle={styles.indicator}>
    {[1,2,3,4,5].map(item => {
      return <Tab.Item key={item}>{item}</Tab.Item>;
    })}
  </Tab>

Expected behavior

When I switch tabs, I hope the indicator is positioned under the corresponding tab

Describe the bug

When there are a lot of tabs, such as 5, if you switch to the fourth or fifth one, you will find the indicator is displayed under the second or third tab.

By setting breakpoints, it was discovered that the onLayout function in this code was not executed in rendering order. It may execute the onLayout of the first tab first, then the onLayout of the fourth tab, and then the onLayout of the second tab function. This causes the value of the previousItemPosition variable to be incorrect, resulting in an error in the display position of the indicator.

Steps To Reproduce

mobile phone model：iPhone11 pro Max
system version:16.5

Screenshots

Your Environment

`npx @rneui/envinfo`

  ```
    Output from `npx @rneui/envinfo` goes here.
  ```

[jcarnide]

Also able to reproduce this with 3 basic tabs. Sometimes the indicator will be under the second tab when the index is actually on the third tab.

        <Tab
          indicatorStyle={{
            backgroundColor: 'white',
            height: 3,
            width: '33%',
          }}
          value={tabIndex}
          onChange={setTabIndex}
          dense>
          <Tab.Item titleStyle={{ color: 'white' }}>Going</Tab.Item>
          <Tab.Item titleStyle={{ color: 'white' }}>Requested</Tab.Item>
          <Tab.Item titleStyle={{ color: 'white' }}>Hosting</Tab.Item>
        </Tab>

Update:

It does not happen when I click through the tabs in sequence. However, if I click directly on the third tab, then it goes into a state where the indicator stays on the second tab.

[JamesUgbanu]

I was also able to reproduce this issue on IOS with a third tab including the error below;

` ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[92,110],[0,18],[[21,{"type":"interpolation","extrapolateRight":"extend","inputRange":[0,1,2,3],"outputType":null,"outputRange":[0,null,null,143.33334350585938],"extrapolateLeft":"extend"}]],1014]`

The error above happens when I navigate to the component from another screen.

[hezhengjian]

I was also able to reproduce this issue on IOS with a third tab including the error below;

` ERROR Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[92,110],[0,18],[[21,{"type":"interpolation","extrapolateRight":"extend","inputRange":[0,1,2,3],"outputType":null,"outputRange":[0,null,null,143.33334350585938],"extrapolateLeft":"extend"}]],1014]`

The error above happens when I navigate to the component from another screen.

same question https://github.com/react-native-elements/react-native-elements/issues/3784. but still unresolved