The indicator display of the tab component is abnormal on iOS

Open
#3,808 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react-native
Domain
mobile

Research direction

Start by locating the Tab component implementation and the indicator's onLayout handling. Reproduce the issue on an iPhone running iOS 16.5 with five tabs, then inspect the ordering of onLayout calls and the previousItemPosition value. Done means the indicator appears beneath the selected fourth or fifth tab.

Written by the indexing model from the issue text.

Description

component: Tab
Is there an existing issue for this?
  • 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.

image

Steps To Reproduce
mobile phone model：iPhone11 pro Max
system version:16.5
Screenshots

image

Your Environment
`npx @rneui/envinfo` 
  ```
    Output from `npx @rneui/envinfo` goes here.
  ```
Dominant language
MDX
Stars
25.9k
Forks
4.7k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-native-elements/react-native-elements

All issues in react-native-elements/react-native-elements

Similar issues

More Mobile Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.