When screen height changes (In the case of my project because a custom bottom tab is removed for certain screens), the Stack Navigator height does not update to occupy the entire screen anymore for some reason.
The same scenario works just fine on Android and on the Web for some reason, on iOS, when a view that was occupying some portion of the screen is removed after the stack screen was already being rendered, the Stack does not change its height.
Please take a look at this minimal expo snack example that demonstrates the issue and compare going to the 2nd screen on iOS emulator versus going to the 2nd screen on Android for example.
Expo Snack
Adding a key={currentScreenName} to Stack.Navigator fixes the issue but that is not really a viable solution since it will cause a re-render and the screen will flicker when transitioning between the pages.
I know that using a bottom tab this way is not really ideal but I was wondering if someone might have any good suggestions as to how this can be addressed.
Thank you.
Quick note, this seems to be working just fine with #react-navigation/stack but not with #react-navigation/native-stack
Related
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
So ErrorBoundaries are a pretty cool thing and all,
but in Development, they show a red (dismissible) Error Screen by default which always needs to be dismissed, before the Fallback-Component is revealed.
This is fine since it doesn't happen in release builds, yet incredibly annoying for testing error states.
Is there a way to disable the red screen in React Native?
All suggested answers in this thread haven't worked for me.
Would be very thankful for any help!
Thanks a lot!
I have problem with my scrollable materialTopTabNavigator stuff. When I swipe to another tab, I see delay, but then the selected tab aligns. My behavior in the first gif.
https://ibb.co/yXsCbFh
I need behavior like this, without delay and with auto align
https://ibb.co/c67BSQf
How can I achive this?
I'm having similar performance issues and am able to workaround them by disabling Remote JS Debugging.
or
Without spending much time into the issue, you might want to check debug > slow animations in your ios simulator.
When my app is launching I can see a brief white flash when screens are changing. I have a dark theme app so it's pretty annoying to see those flashes.
I have found react-native-flash-screen module which could help me (install, link, edit MainActivity.java, import to App.js) but after installing of it my app goes to loop of rebooting.
Does someone know how to prevent white flashes, probably, on another way?
it's hard question because I have not seen your code
but
wrap your app container with a view and style that backgroundColor to black
this might help your
I am creating an app in react-native and I'm having problem with the display.
I have a textinput in scrollview. When I tap on the textinput and it's focused, the display will go up and goes off screen.
I have seen the same issue posted in github.
Here is the link: Github issue posted by someone
This is the default behavior of they keyboard for Android. You have to manually change the android:windowSoftInputMode in AndroidManifest.xm to another option (adjustNothing is more iOS like). See the options here: https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft.
Also, keep in mind that keyboardWillShow() and keyboardWillHide() are not fired on Android, and if you opt to use adjustNothing, not even keyboardDidShow() or keyboardDidHide() are fired.
I would recommend keeping the default behavior of android:windowSoftInputMode, but use the keyboardDidShow() and keyboardDidHide() to manually adjust the ScrollView position.