I am building an app with tab bar using react native's NavigationExperimental API based on the example from github.
One thing I noticed is that tabs' UI states are not preserved when switching between tabs.
All state including fetched data, scroll position, other UI states, etc., are lost when I switch away from one tab to another.
As a result, it ends up refetching the data, and renders everything from the scratch.
The only thing that is preserved is the current navigation state tree.
This is not true for native apps. Native apps keep every state (data, scroll position and other UI states) so that the switch feels instant and lightweight avoiding any network calls or re-renderings.
How can this be implemented in react native?
I was thinking hiding and showing like display: 'none', but display is not available in react-native.
Related
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)
tl;dr:
Is there a way to add a dumb/presentational React Native component on the React Navigation stack, so I don't leave the container when pressing the phones back button, but just show the previous component?
I cannot figure out how I should design my app. So far I have as many smart/container components as I have main pages (one for login, profile etc.) because my impression is that it is better to have few containers and more (presentaional) components.
So far I have only used top level navigation with React Navigation, but I have a flow where the user wants to book an appointment at the doctor.
My initial thought would be that I have one BookingContainer that renders different components, but I can't seem to figure a way to keep the navigation stack inside the one container, so now I have several containers (BookingMainContainer, BookingChooseDateContainer and BookingChooseTimeSlotContainer). The reason why I want one container is that much of the data I need is the same, so I want to just pass the data to the children instead of getting the (same) date from the state in the three related containers.
I am new to React Native and am working on a simple app, the app loads data structured like file folder hierarchy, so at top level, when a item is clicked, I want to switch to next level and Etc. every level has the same data, I guess I need to use the same component, I want to use react navigation to switch between levels, but I cannot do this because the same component is used.
Of course you can say just change the components' state with different data, but I need the navigation animation effect and navigating to upper level when click the back navigation component at the top.
Please help, thanks]1
Since I am using StackNavigation, using "push" is the answer,
this.props.navigation.push('ScreenName');
see this link: https://reactnavigation.org/docs/en/navigating.html
I'm looking to build something similar to the way Spotify (or other music players) work, where there is a footer element that allows you to control the currently playing music that persists regardless of how you navigate through the app. See the bottom of this image as an example.
See the bottom here with the playing music
Requirements for this are that the different screens must be able to communicate with that component so users can choose music from any screen. The component must persist across screens so that the currently playing music will be controllable even as you use the app.
I'm building in react-native and currently using react-navigation as my navigation solution, in case that makes a difference.
I am playing around with React Native and trying to build a test application. I am stuck at the Navigator part: https://facebook.github.io/react-native/docs/using-navigators.html.
I understand that one can change the state of the variables (as they are doing in the tutorial, increasing the index variable). What I don't really understand is how I could render different Components based on which button is clicked in my menu. In the example, it is always "MyScene" that is rendered, but with different values. How should I do to render "MyScene2" when clicking on some button?