So in my app I have a main component which have switch navigator and then inside switch navigator I have a tab navigator which renders different screens. I have registered notification handler in top component.
Now the problem is that when notification is received, I want to make some changes on screens inside tab navigator.
I have read about redux which will provide common store so state could be updated but I dont want to use that.
I have also read about lifting state up but in my case i have more nested components so I dont want to do that as well.
So suggest me some way to do it?
I have solved the problem by using react context api. It is simple wrap your top level component with provider and define some veriable and access that variable in any component.
Related
What is the difference between using navigation.navigate() and navigation.dispatch(CommonAction.navigate()) in React Native?
The docs explanation is:
The dispatch method lets us send a navigation action object which determines how the navigation state will be updated. All of the navigation functions like navigate use dispatch behind the scenes.
https://reactnavigation.org/docs/navigation-prop/#dispatch
AFAIK there is no real difference between using actions and navigate
I have added badges in react native stack navigator for cart and wish-list count. These counts must be fetched from API on every screen change or back event. I also want to update these count on add to cart and add to wish-list event from Product screen
Can anyone suggests me how to do this ?
Any reference code or article will be very helpful.
Thanks in Advance.
If there is a need to update the UI globally from any screen of the app then we can implement global state management.
There are two simple ways to implement the global state which updates UI when changes made to it.
React Redux
React Context API
Use one of there and Make changes in the global state and assign the value to the UI Component the need for UI change is.
You can simply call an API and update the global state to update the badge count.
check out the official docs to implement the global state:
For React Redux: https://react-redux.js.org/
For Context API: https://reactjs.org/docs/context.html
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
The app I am building has a root client object that affects all of the subsequent views of the app. I want the user to be able to change clients and have all of the tabs reset, i.e. popToTop() and update the client appropriately.
I have a TabBarIOS component with 4 tabs, each tab is a NavigatorIOS component that manages the subsequent ListView components. How can I force all the NavigatorIOS components to popToTop() and re-render based on a client change?
Thanks in advance.
One simple approach would be to use an event emitter. Create an event emitter and pass it down to the component that owns the NavigatorIOS components. The owner can use the ref prop of each NavigatorIOS component to get a reference to each navigator.
The owner then can add a listener to the event emitter, and call popToTop() on each navigator when the listener is invoked. Then, it's just a matter of emitting the event when appropriate.