Tab View item was stretched when other item has different height

Open
#3,428 10 comments 1 reaction 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 reproducing the behavior in the linked Expo Snack with react-native-elements 3.4.2 and React Native 0.64, using a TabView inside a scroll view with tabs of different content lengths. Done means the shorter tab no longer has extra white space and each tab's height matches its content.

Written by the indexing model from the issue text.

Description

:bug: Bug component: TabView priority: high
Is there an existing issue for this?
  • I have searched the existing issues
Explain what you did

I put the tab in a scroll view, there is some components above the tab, I'd like to put the tab's position as relative so it will move to top when the screen is scrolled down.

For the tab view, there are two view with different content length.

Expected behavior

Each tab view's height will be adjusted according to it's content.

Describe the bug

For the view with less content, there is an extra white space at the bottom, and its height is stretched.

Steps To Reproduce
You may refer to this snack https://snack.expo.dev/Bl9V_7zoz
Screenshots

No response

Your Environment
react-native-elements: 3.4.2
react-native: 0.64
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.