I would like to find a solution to use the same component instance multiple times, on different pages but without creating a new instance for each render.
Each page must use the first initialized instance of the component. In few words, reuse the previously rendered component.
My goal is to display a map and draw a route on it with the current GPS position, which is updated in real time. This map is displayed on different size, on different locations / screens.
The problem is that this component must :
be displayed on several pages independently
not be rendered several times
must be initialized only once
Example:
Component A is initialized on screen 1. Then, we navigate on the screen 2, which must display Component A too. But the particularity is that we must reuse the Component A on his exact previous state like it was on the screen 1 (with the view rendered, his states etc.).
For now, the component is always rendered on each screen once (standard behavior).
I tried hooks like useContext, useMemo but I cannot make it working like I want.
I tried to instantiate Component A on the Navigator (react-navigation) and passing Component A as parameter of the views.
I've made too some attempts with library like react-native-portal but nothing relevant.
Do you guys have a brillant idea?
Related
Let's say I have a blazor component that uses a lot of resources to create an animation, it doesn't make sense to keep rendering it if the user scroll past the component (i.e. the component not visible in the screen). Is there a way to detect this using Blazor?
I am aware that I can rely on Intersection Observer API with JS, but I am looking for something in Blazor/C#.
Thanks,
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've got a app that has a collection of scenes, and make many calls to a remote server that because they control hardware can take quite a while. In my redux store I have a variable that represents if there are any requests inflight.
What I'm trying to achieve is having a spinner or loading scene defined in a single place, and having automatically show dependent on the state of variable in the redux store.
I think that the answer lies in having a modal scene for the loading page, but the bit I'm missing is how to have it automatically displayed (and hidden) based from the state in the store. I don't want to call Actions.loadingScene() from all the places that makes the requests.
I've got a reducer in place that see's all the actions (both the application and the RNRF actions), but I couldn't work how what state I had to mutate to get it to display the modal scene.
Any pointers would be great!.
It appears that redux-saga would be the way to solve this, however I ended up making a HOC that adds the spinner, and displays it when required. It does mean that I have to remember to wrap all scenes with the HOC but that it OK.
I'm building an app which views are inside tabs.
Some of the views render lists from data fetched by a call to an api.
I noticed that the render method is callled every time I hit the tab.
This causes the render method to re-render the list, so there is a delay and this not user friendly at all, as it takes some time.
How can I render the views only once?
You should implement shouldComponentUpdate method for each react component
you don't want to re-render each time it's props or state changed