createBottomTabNavigator together with react-native-screens cause blinking for each tab #5382
Comments
|
cc @kmagiera |
brentvatne
changed the title
|
for additional context, i tried this out and it seems to only happen intermittently |
|
Submitted a fix for this one to the tabs repo -> react-navigation/tabs#80 |
satya164
pushed a commit
to react-navigation/tabs
that referenced
this issue
Dec 18, 2018
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
|
I'll publish a new release today with this fix! |
|
Ok, I will check this out tomorrow on some low end device and get back with results :) |
|
I'm having the same issue with stackNavigator on Android. A white flash appears before the next screen slides up over top of it. Similarly on back press. Edit: I'm not using react-native-screens. Should I open another issue? |
|
Hey @sm1th I don't think these two are related esp that you are not using screens and it is not about tabs but stack. Do you mind opening a separate issue for it? |
|
@kmagiera @brentvatne I think it's resolved in |
satya164
pushed a commit
to react-navigation/navigation-ex
that referenced
this issue
Aug 18, 2019
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
satya164
pushed a commit
to react-navigation/navigation-ex
that referenced
this issue
Aug 18, 2019
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
YAfullStack
pushed a commit
to YAfullStack/React-navigation
that referenced
this issue
Dec 4, 2021
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
redhawkIT
pushed a commit
to redhawkIT/react-navigation
that referenced
this issue
Dec 23, 2021
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
nenad0212
pushed a commit
to nenad0212/temp1
that referenced
this issue
Sep 6, 2022
When using react-native screens we don't need to hide invisible tabs using opacity. This in conjunctions with "active" property normally used by screens where causing blinking effect when new tabs got activated as in some cases opacity would update in a different UI transaction (this would only surface on Android). This change removes the use of `opacity` style when react-native-screens are active and solely relies on `active` property in that case. When rn-screens are off we fallback to rendering `View` and use `opacity` as before (this is now done in `ResourceSavingScene`). ### Motivation Fix blinking effect on Android when switching tabs [#5382](react-navigation/react-navigation#5382) ### Test plan 1) Run RN-screens sample app with and w/o screens enabled or try the code from this snack -> https://snack.expo.io/rklSkM-xE 2) Try this on a low end Android device for consistent repro 3) Switch between tabs and see the content disappear for one frame with screens ON when this change isn't active and see this issue gone with this change applied
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This happens only on Android, I made reproduction on a snack, hope this helps
Current Behavior
Expected Behavior
useScreens()function.How to reproduce
Your Environment
The text was updated successfully, but these errors were encountered: