I am using react-native-maps in my home screen and from there I navigate to different screens. Some screens make API calls. But after returning from those screens, maps lags a lot and its a very bad experience. I am using react-navigation. Has anyone faced this issue earlier.
There was a mistake in my analysis. Actual issue was related to bottom sheet being kept open when I try to navigate to another screen. When I close the sheet and navigate, no lag is experienced
Related
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
I am trying to use pull to refresh from FlatList. Is it possible to move the spinner to where the data actually starts rendering instead of the top of the screen? I found the progressViewOffset that works on Android but I am trying to find how I can implement this behaviour on iOS too. I feel like my solution is to watch scroll interactions and go on from there.
Any idea is appreciated. Thanks in advance.
I'm working on a RN application which has share and comment features. In Facebook, modals are used to display the comment and share screen contents. In my application I have used seperate screens hence it is bit slower. What is be the better approach to use here?
Always try to use SCREEN with navigator. Think about your form modal screen in overall. May be it more similar on 'screen' then you thought before))
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!