Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom tabs sometimes not rendering correctly on iOS #8986

Open
Blue9 opened this issue Oct 24, 2020 · 2 comments
Open

Bottom tabs sometimes not rendering correctly on iOS #8986

Blue9 opened this issue Oct 24, 2020 · 2 comments

Comments

@Blue9
Copy link

Blue9 commented Oct 24, 2020

Current Behavior
The bottom tab sometimes does not render correctly. The icons and labels appear on the same line. Below is a screenshot of the problem.

Issue Screenshot

Expected Behavior

I would expect the icons to be above the labels.

How to reproduce

Use the tabs (TypeScript) template from expo init (or even the provided example in this repo).

Below is how I reproduce the bug with Expo. After tapping "Reload," I swipe up to the app switcher. When the bundle download reaches about 70%, I go back into the app.

After the app loads, I can go back into the app switcher and return to the app to fix the issue.

Expo Template Issue

I have also seen this issue come up randomly without using the app switcher, but this is how I'm able to consistently reproduce the bug.

I'm not sure if I'd be able to reproduce this on a standalone (non-Expo) app since there probably wouldn't be any time to go to the app switcher and back, so this might just be an issue when using the Expo app. Unfortunately this makes it harder to determine whether this is an Expo issue or a react-navigation issue.

Your Environment

The npm package versions are the defaults when running expo init. The default react-native-screens version is 2.10.1; I tested with the latest version (2.11.0) and the issue still exists.

software version
iOS Tested on 14.0.1 and 14.1
@react-navigation/native 5.7.6
@react-navigation/bottom-tabs 5.9.2
react-native-screens 2.10.1 and 2.11.0
react-native https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz
expo expo-39.0.3
node v14.13.1
yarn 1.22.10
@newfylox
Copy link

newfylox commented Oct 27, 2020

I also had this issue. Just wondering if it's just a simulator bug or if it's happening on real devices.

Also, I had a bug that sometimes it doesn't switch to the good screen when I touch on a bottom button BUT I know that it changed in navigation stack. The bottom button doesn't change color, neither the screen, but if I scroll up or down the screen, it will force a render (or Simulator render) and then I see the good screen with the good bottom button pressed (highlighted)

@CalebLovell
Copy link

still happening to me sometimes. seems to only be in simulator but still quite frustrating

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants