Initial render of first tab creates weird white bar at the bottom

[KrisLau]

Current behavior

So when I first enter a screen that has a tab view, there is a weird white bar at the bottom of the tab screen. Refer to this photo:

However after I click to a different tab and click back to the first tab, the bar disappears:

This issue only appeared after updating my react and react-native packages. Couldn't recreate in Snack but I linked one anyway. Also, there is no padding or margin set in the tab and I've tried removing the stylings on the tab view and this issue happens across the whole app on all of the tab views.

Expected behavior

It should look like this all the time:

Reproduction

https://snack.expo.dev/@kris_lau/ac8f82

Platform

• [x] Android
• [x] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.15
react-native	0.68.1
expo	N/A
node	16.15.0
~npm or~ yarn	1.22.18

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-tab-view
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.2.1, latest: 5.4.15)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[bradzickafoose]

I'm noticing it too after updating react-native-tab-view to 3.1.1.

[pedroferreira1]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15.

[dukemai]

I experienced the same problem after upgrading today. For my problem it was the latest expo 45.0.1 has problems

[FrancoisDeBellescize]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15.

Yeah it fix the issue for me too

[sydneyandy]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15.

fixed for me as well

[luckykenlin]

I experienced the same problem after upgrading today. For my problem it was the latest expo 45.0.1 has problems

I am facing the same problem, did you find a solution?

[KrisLau]

@luckykenlin Use this workaround for now

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15.

[KrisLau]

@satya164 Is this an issue for pager-view or for this package?

[luckykenlin]

@KrisLau

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15.

it doesn't work for me, I have a downgrade to v5.4.11.,

it happens when i using expo 45.0.1

[KrisLau]

@luckykenlin Not sure maybe you still have the wrong version. yarn list react-native-pager-view --pattern to check the version you actually have installed. My package.json entry:

"react-native-pager-view": "5.4.11",

you can also try react-native start --reset-cache and deleting node_modules and reinstalling all the modules

[robbertrosario]

@luckykenlin Not sure maybe you still have the wrong version. yarn list react-native-pager-view --pattern to check the version you actually have installed. My package.json entry:

"react-native-pager-view": "5.4.11",

you can also try react-native start --reset-cache and deleting node_modules and reinstalling all the modules

If you're using Expo (not sure) isn't this because expo 45.0.1 comes with react-native-pager-view 5.4.15? https://github.com/expo/expo/blob/main/CHANGELOG.md#4500--2022-04-25 or am I missing understanding how the 3rd party packages work in Expo?

[wqcstrong]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15

who can give me a direction to downgrade the react-native-pager-view version? I have tried expo install [email protected] but log the following message:

$ expo --version
5.4.9

$ expo install [email protected]
Installing 1 SDK 45.0.0 compatible native module using Yarn.
> yarn add [email protected]
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
✨  Done in 7.98s.

I have no idea about that as a expo newbee, hope answers, Thx!

[sydneyandy]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15

who can give me a direction to downgrade the react-native-pager-view version? I have tried expo install [email protected] but log the following message:

$ expo --version
5.4.9

$ expo install [email protected]
Installing 1 SDK 45.0.0 compatible native module using Yarn.
> yarn add [email protected]
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
✨  Done in 7.98s.

I have no idea about that as a expo newbee, hope answers, Thx!

use yarn add [email protected] instead, bascially expo install will use the recommended package version, but in this case need to skip.

[wqcstrong]

I was having the same problem but downgrading react-native-pager-view to v5.4.11 fixed my issue. Before I was using v5.4.15

who can give me a direction to downgrade the react-native-pager-view version? I have tried expo install [email protected] but log the following message:

$ expo --version
5.4.9

$ expo install [email protected]
Installing 1 SDK 45.0.0 compatible native module using Yarn.
> yarn add [email protected]
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
✨  Done in 7.98s.

I have no idea about that as a expo newbee, hope answers, Thx!

use yarn add [email protected] instead, bascially expo install will use the recommended package version, but in this case need to skip.

Downgrade the react-native-pager-view version doesn't work for me...

Package	Version
expo	45.0.5
react-native	0.68.2
react	17.0.2
react-native-tab-view	3.1.1
react-native-pager-view	5.4.11
node	16.13.2
yarn	1.22.10

[wqcstrong]

Hey, guys~ I reproduct the issue.

If the TabView be in the NavigationContainer which exported from @react-navigation/native, the bottom blank will be there. See Snack Expo Dev Reproduction

But I don't know the issue should be pager-view or @react-navigation/native, can anyone help?

[wqcstrong]

The issue should be for react-native-pager-view, and I report a new issue in there

[sydneyandy]

The issue should be for react-native-pager-view, and I report a new issue in there

I think the issue is fixed on 5.4.21, however, expo is not using that version yet.

[wqcstrong]

The issue should be for react-native-pager-view, and I report a new issue in there

I think the issue is fixed on 5.4.21, however, expo is not using that version yet.

I try to toggle the vesion in the snack reproduction to 5.4.21 / 5.4.24 and the issue is still be there, what I missed?

[sydneyandy]

for me, when i use expo app, still same issue, but if you do a production build, the issue will disappear. Looks like expo have a "Lock down" version when using the expo app.

[itsramiel]

The issue is still there with 5.4.24. I am not using expo go. I am using a custom development client and there is still a blank bottom on first view

[robbertrosario]

for me, when i use expo app, still same issue, but if you do a production build, the issue will disappear. Looks like expo have a "Lock down" version when using the expo app.

I'm using a production build, with 5.4.24 and Expo - and the issue is still there. I don't think it's fixed at all.

[wqcstrong]

here is my temporary solution, just looke okay:

<TabView
  navigationState={{ index, routes }}
  onIndexChange={setIndex}
  initialLayout={{ width: layout.width }}
+ sceneContainerStyle={{ overflow: 'visible' }}
  ....
/>

[luckykenlin]

@wqcstrong

<TabView
  navigationState={{ index, routes }}
  onIndexChange={setIndex}
  initialLayout={{ width: layout.width }}
+ sceneContainerStyle={{ overflow: 'visible' }}
  ....
/>

thanks this works for me

[himrocks33]

@wqcstrong Thank you! I've been researching issue for hours this fixes the issue for now!

[sydneyandy]

@wqcstrong https://github.com/wqcstrong Thank you, this works for me as well.

On Fri, 17 Jun 2022 at 23:19, himrocks33 @.***> wrote:

@wqcstrong https://github.com/wqcstrong Thank you! I've been researching issue for hours this fixes the issue for now!

— Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/1342#issuecomment-1158864383, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWKWXDIRYSWEMWFRE3LGLDVPR3PJANCNFSM5VDAD7KA . You are receiving this because you commented.Message ID: @.***>

[stesvis]

here is my temporary solution, just looke okay:

<TabView
  navigationState={{ index, routes }}
  onIndexChange={setIndex}
  initialLayout={{ width: layout.width }}
+ sceneContainerStyle={{ overflow: 'visible' }}
  ....
/>

Is this possible on Expo somehow?

[VadymBatryn]

Update react-native-pager-view from 5.4.15 to 5.4.25 helped me.

[okwasniewski]

Closing this since, this issue is fixed after upgrading react-native-pager-view to 5.4.25.