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!
Related
I have an app where users can navigate almost endlessly to new screens (I'm using Stack Navigator). There are about 15 different screens, but every screen can be opened with a huge number of different IDs (showing data for different companies, etc). For example in the Company route, the user can open many different Person screens based on employees, and again from Person screens the user can navigate to many different screens, so the navigation is basically endless.
Because React Navigation keeps all screens in memory, after navigating maybe 20-30 different screens, the app becomes very laggy. And because the number of routes is basically endless, it's impossible to keep all screens in memory.
I end up replacing the screen (navigation.replace) instead of pushing it when the user navigates to a new screen. That way there is only one screen in the memory at a time. I also made an array where I push the name and parameters of the new route every time, so when user goes back, I get the previous routes from that array and I replace current screen with the screen from that history array. It works fine, but of course, going back is not as fast as using React Navigation in the standard way.
So the first question: what is the most efficient and CORRECT way of using React Navigation in my case?
Second question: because I have just one screen on React Navigation's history, the swipe back does not work on iOS. Is there an easy way to change swipe back to call my own back function instead of React Navigation's default back?
Hey I'm just starting out with React Native CLI.
I want to have a button which will add an item in the ScrollView. And the new Item should lead to a new Screen when you press it. But I don't have an idea how to make this nor do I know how to google that xD. Does anyone know how I can make this?
I just have a button which leads to another screen when pressing it.
I hope someone can help me :)
First you have to clear few things and make the logic.
1)Either you want to save that item datathen show it in scroll view, make it Pressable and then u can navigate to a different screen.
Or
You just want to show the data in the scroll view. Once you reload, the data is gone. So that's my bro (In my opinion) is of no use.
For the first step .
You need to store the data in a storage and then fetch it in a scroll view,
make it Pressable and navigate to a different screen.
(hint: If you want to make it Pressable then you can fetch the data into a card component and then call that component in a scroll view).
Now grab your keyboard and start searching on it.
I'm lazy loading tabs (using the built in bottom tab navigator) on my React Native app that uses React Navigation, to make my app launch faster. But I also have a frequently used tab that loads a bit slow due to the nature of its contents, and I want to explicitly load that tab in background after my home screen is rendered properly. In other words, I want to "force load my second tab after home screen finishes rendering/loading data properly" as the user will probably be looking at the static screen for a second or two anyway, so that when they tap the second tab, it will be already loaded when the home screen was static. This way I can achieve both a fast app start time to a fully functional home screen, and prevent initial load lag of my second screen for a smoother user experience.
How do I achieve that? (I know I can specify lazy loading specific screens with the upcoming 6.x version, but that won't solve my problem)
I am creating tabs in my app using react-navigation by createTabNavigator.
What I want to do is how can I show a portion of next screen in tab in the current screen. The Idea is to show the user that there exist another view
What I have already done is that everything except the for showing the next screen in current one, is there any prop or option that will allow me to shrink down the page container?
This is not possible with react-navigation.
Try using a carousel library like react-native-snap-carousel (https://github.com/archriss/react-native-snap-carousel). As you can see in their showcase apps, this library does exactly what you want.
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.