We use wix/react-native-navigation and tried to use Context API from react.We need all the screenshots to receive data and when changing in one place, there is a change in all places.The api context is not suitable, it makes a context for each screen, that is, when changed in 1 screen, the data will not be rerender in another. I would also not like to use Redux since editors are not signed in all screenshots, and it’s too difficult to forward props.
Does anyone have any ideas how to solve this problem?
This seems to be a case for the model view controller pattern.
Each screen would be a view in this pattern. You need to trigger a rerender when the data changes. You can define functions in the react context (model) and then reference it in your lifecycle methods (controller) of your different views.
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,
I would like to use React Navigation with a tab view component that is not its default tab view (the one I have chosen to use is react-native-tab-view, as it provides a much more comprehensive interface for customization of its appearance). However, I just don't seem to be able to understand the documentation for writing custom navigators and routers. What are the basic steps I will need to perform this integration? How is this going to be affected by the fact that I will need to be able to compose a StackNavigator inside of some of my tab view's tabs?
As pointed out by #MarsonMao in the comments, the default implementation is based on react-native-tab-view. Unfortunately, it didn't provide the hooks I needed to make it work, but I was able to make a subclass of TabBarTop with a copy of the original render function modified to include the change I needed.
This is a conceptional question, in this case a component is a screen, if that makes sense
Is there a good solution for fluently preloading a component? What I mean by that is perhaps calling a portion of a component, before opening up the view
an example of this is say, snapchat stories, when greyed out on press will simply load. The second press then opens up the view. Essentially allows you to preload before then navigation to the view
Is this a Redux task? Does anyone have an example?
Seems like some concepts are mangled in your mind. What you are trying to achieve is not to preload components, rather run logic before drawing anything on the screen OR preloading some media. Therefore, what you need to do is not to preload anything, but to seperate your logic from your view (let's say video data from showing video itself), retrieve / prepare data (download video for example) and after it is ready show your component.
Also, if what you are trying to preload is just media, you should checkout react-preload.
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 am implementing android application using react-native and redux. My container component is updating frequently but props which I am passing to child stateless component not changing, but it still re-render all the time. How can I prevent this re-render? I know that I can use shouldComponentUpdate, but then I need to check there all properties.
This is exactly why React doesn't do this for you. It would need to check all the properties and their children (and descendants). This could be a lot of work.
If you use React-Redux, just connect the component to whatever data it needs and it shouldn't rerender, because Redux makes different assumptions about your data. In particular, it assumes you use immutable objects everywhere, which means it doesn't have to check children (or descendants).
Without React-Redux, you will need to implement shouldComponentUpdate, but if you use immutable data, you can implement a generic function to do a shallow compare and use it in all your components. If you do not use immutable data everywhere, you'll need to either use a deep comparison, or to optimize, implement shouldComponentUpdate on a component-by-component basis to do specific checks.
This is a big reason why React-Redux is used.
That's how React works. If a parent component re-renders, all of its children will re-render, and then React will diff the virtual DOM output and see what actually needs to be updated in the real UI. This process happens even if the props being passed to a child component haven't changed. And yes, shouldComponentUpdate is the right solution here, but that can't be used with functional components as far as I know, since they have no lifecycle methods.
If you want to prevent re-rendering, you'll probably need to convert those functional components into class components, and either implement shouldComponentupdate yourself, or have them extend React.PureComponent if you're using React 15.3.