I have this react-native application using AppNavigator handling navigation between screens. I have trouble updating the paused (AppNavigator calls these screens "Blurred") screens.
I would like to be able to update the inactive screens from an active one.
I tried to add a listener on app notifications or subscribing to specific changes in a mobx store that should update the component, however the screen component won't react when not active/focused.
How can I make sure the screens updates when not active? I am unsure if I am tackling this fundamentally wrong.
In previous versions of react-navigation there was a way to disable lazy loading but that has been taken out in the newer versions.
What you are asking for will hinder you in the long term. It will basically keep all the screens loaded in the memory. You shouldn't need that just to update them. Instead you can update the MobX store and when the screen becomes active again look for the changes and update accordingly.
Use NavigationEvents to listen to when the screen becomes active.
Related
Everytime I add a new component such as text or any view component the things that are already on the screen keep moving. Is there a way to strictly keep all components locked in one place?
In my react-native app, I need different screen behaviour on different screens when keyboard pops up.
In some screens i need the screen to move up, and in some screens i do not want to change the screen position etc.
Individual behaviours can be achieved by setting values of android:windowSoftInputMode to adjustNothing or adjustResize in AndroidManifest.xml file.
But setting these values in the manifest file changes the behaviour for all the screens.
Is there a way to change it programmatically within different screens ?
In android code it looks achievable using a getWindow() call. How to do it in react-native ?
Try this component react-native-android-keyboard-adjust
When the component in which you don't want to move up views mounts, set AndroidKeyboardAdjust.setAdjustPan() and when that component unmount reset it to AndroidKeyboardAdjust.setAdjustResize() or whatever option that suits your criteria
See this answer
try use ScrollView instead of View then wrap it on KeyboardAvoidingView
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 have a sort of WhatsApp clone project. From the users listing component, it will redirect to each users chatWindow. I dont want to re-render the chatWindow component which was already rendered.
This is what happening
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted
Navigate to Userchannel from ChatWindow1 - ChatWindow1 unmounted
Navigate to ChatWindow2 from Userchannel - ChatWindow2 mounted
Navigate to Userchannel from ChatWindow2 - ChatWindow2 unmounted
Navigate to ChatWindow1 from Userchannel - ChatWindow1 mounted again.
I know using state we can render the ChatWindow again. But Is there a possibility to avoid the unwanted re-renderng. Currently I am usinf RNRF as the router.
Optimising re-render can be done in multiple ways in react.
You can use PureComponent Implementation where react itself shallow compares the props and re-renders only when necessary.
If you want more granular control, go with shouldComponentUpdate which gives you a lifecycle method where you can compare the props and decide whether you want to avoid render. Please make sure the comparison is not complex. The more complex comparisons can make the app slow, in which case the optimisation back fires.
Use Flat list instead of List view or scrollview for better performance and make sure you add a keyExtractor and Item as a PureComponent.
Make sure the code splitting is properly done. you cannot optimise a very large amount code in a single page. If the components are small enough, you can optimise them better.
If you have a lot going on the JS, I would strongly recommend using a native navigation solution like react-native navigation
You can use console logs in render to find out the render count and take necessary actions. Please make sure that these optimisations can block necessary renders as well. So make sure props are different when you want to re-render things.
Regarding the mount / unmount
In most cases the navigation keeps the screens in the stack. Going back will not trigger a re-render. You can do one thing, make sure page works on props, so that re-render happens only when data changes.
Helpful Links:
https://medium.com/#ohansemmanuel/how-to-eliminate-react-performance-issues-a16a250c0f27
https://medium.com/vena-engineering/optimizing-react-rendering-61a10e741edb
Since your screens are unmounted there is nothing wrong to re-render when you navigate back to that screen. Of course you could avoid this by having all your screens mounted but that might cause memory leak.
I have an app that I am developing in React Native, using Expo. When I make a change to a deeply nested screen, I have to navigate back to that screen to check my changes.
Is it possible to configure React Native or Expo to go back to that screen after a reload?
I'm not sure if it matter, but I'm also using React-Navigation.
What I usually do is just switch the routes in the navigator config so that deeply nested screen is the first route... then you can work on it and make changes, and when you’re done just reset the routes to what they’re supposed to be. Does that make sense?
Try Running the app on a live device , Changes will be reflected directly on screen rather than going to root