Comments (10)
I wonder if this issue is related to the one reported on react-navigation repo react-navigation/react-navigation#5382
Does any of you observe this problem when using something else than tab navigator? The issue I mentioned above is specific to tab navigator and Android. I managed to find the root cause and submit a fix to react-navigaton-tabs repo (react-navigation/tabs#80)
Please let me know if you can repro this in some other setup
from react-native-screens.
@raphaelrk that's a navigation/list issue, I've run into that before. Try setting removeClippedSubviews={false}
on the list.
(I've read that the optimization removeClippedSubviews gives you is negligible anyway, I have 4 mounted screens with something like 7 lists mounted at all times and it's still performant without any of them removing clipped subviews)
from react-native-screens.
FYI we have found one more instance of this issue that may have cause a flash with stack navigator on Android. It's been addressed in #50 and also in react-navigation repo here react-navigation/stack#73
Both react-nav changes and screens update will be released soon
from react-native-screens.
Hey @K-Leon – unfortunately I have no idea how router flux is using react navigation under the hood but as far as I remember the change that fixed it in react navigation has been merged to 3.X not 2.X (might be wrong tho).
What helped me debug this in the past was to try record transision using screen recording and then playing in slow motion (managed to notice it was actually the transparency that's changed). If you have time to prepare such video and post it here in slow motion that might help.
I'm actually going to close this issue as it has been addressed a while ago. Can you please open a new one to hold the discussion about router flux?
from react-native-screens.
can you provide an example that reproduces this? is it happening in both dev/prod?
from react-native-screens.
@brentvatne hey have been pretty swamped but will be getting to reproducing as soon as I can. It does happen in both development and production.
from react-native-screens.
Made a hacky fix for this by switching my BottomTabNavigator to a MaterialTopTabNavigator with the following settings
{
tabBarPosition: 'bottom',
animationEnabled: false,
lazy: false,
}
But then I run into the following issue: all my tabs have long sectionlists. When I navigate away from e.g. tab C to tabs A, B, D, then back to C, the sectionlist in C doesn't appear until I try to scroll. I don't think that's a react-native-screens issue, however. Edit: fixed this by removing removeClippedSubviews
from my section lists. Thanks @dereknelson!
I also had an unfruitful attempt at reproducing this in a snack which copied most of my app's navigation
from react-native-screens.
I updated to react-navigation 3.0 and the gray flash is there for significantly less time, but is still noticeable in some instances. Going to work on reproducing asap but my navigation config is complicated af so I'm not sure when I'll be able to get around to that.
from react-native-screens.
@kmagiera forgot to update with this info - I've upgraded to Expo SDK 31 and there is no gray flash anymore. React-Navigation version is the same.
from react-native-screens.
I'm seeing this behaviour with react native router flux on android - it is using 2.x branch of react navigation as base.
I'm using latest screens and latest 2.x of react navigation - still seeing this flicker. Even if i backport the listed PR, removing opacity completly or switching to ios transitions. It is also not the root view that shines through - i'm wondering if there is any idea or fix that could help
from react-native-screens.
Related Issues (20)
- React Native `useColorScheme()` hook stops working when using presentation: 'fullScreenModal' HOT 2
- TVOS Crash when using native stack header search bar HOT 11
- enableFreeze can not prevent re-render caused by useIsFocused hook HOT 3
- Orientation Bugs with transparentModal and containedTransparentModal HOT 3
- iOS 15 - function deinit not called on custom native components on goback HOT 8
- [ios] Screen freezes for a couple of seconds when navigating back from a screen containing video HOT 2
- Error: Invalid prop `gestureDetectorBridge` supplied to `React.Fragment` while opening a screen on iOS HOT 2
- Android occasionally crashes when opening applications安卓打开应用偶尔闪退 HOT 3
- Many "Deprecated in Java" and other warnings when building for Android. HOT 1
- Android Lint warning: Using internal inset dimension resource HOT 3
- [iOS 17] Keyboard flickering on a back gesture HOT 6
- Error on reload: ERROR Invariant Violation: Failed to call into JavaScript module method RCTEventEmitter.receiveEvent HOT 3
- androidx.fragment.app.Fragment.instantiate Fragment.java, line 613 HOT 3
- iOS: `Screen` with `{ presentation: "modal" }` navigated to from within another react-native's `Modal` doesn't open HOT 3
- Newer version of RN comes with Kotlin. How to override `onCreate`? HOT 4
- Unresolved reference: findFragment HOT 2
- RNSScreenComponentDescriptor.h not found HOT 3
- Missing React-RCTImage dependency HOT 4
- Android App Crash because of this HOT 9
- RNScreens doesn't build on ReactNative 0.73.5 for iOS HOT 14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-screens.