So I'm creating a screen on React native that has a button at the bottom end. When it's clicked it moves a searchbar from the bottom to the top of screen and everything that was on top of it is moved to the side out of screen view. Then it renders a ListView. So far so good. My problem is when a do my search that it receives data from api and populate ListView, as its re-rendering the component, everything is moved back to its initial place. I want to know if there's a way to re-render only my ListView, or keep the animated position after re-render.
One easy way to keep the animated position after re-render, is by setting a alreadyAnimated boolean value in the state of your component. Initialize this value to false and set it to true when calling the function that triggers your animation. Then, conditionally call the animation only if this.state.alreadyAnimated is false and only set the initial animated value/position of your searchbar if alreadyAnimated is false.
Related
I noticed that when you use useState in a hook and then use setState to change the value that is being cached, the hook will be called again and re-render the component. While this may be desired most of the time, I have one case where I don't want to re-render when the state changes. This case is when you have a navigation menu (tabs) at the top of the page and when you click on a tab, it shows content in a pane beneath it. I really only want to hide the content for the tab that is currently shown and then display the content for the tab that is selected. When content is hidden, this is essentially setting the css "display" style to "none". This is desirable to preserve the state of the content's pane and also avoid effects like retrieving data.
I can think of one solution to handle this but it does require splitting the components into isolated modules. I am curious though whether there is a way to change state but without having the side effect of a component being re-rendered.
I've got an app that shows a list of items in a grid. Some of the items have an embedded video which flashes or stops playing (if it's already playing) when it's rerendered.
The list is maintained in Redux. When the user scrolls to the bottom of the page it loads more results which causes the Redux state to update which, in turn, causes the grid to rerender all of the items plus the new items.
I'm looking for a solution that will just add more items to the end of the grid instead of rerendering everything.
I've got a component that holds the entire grid. It renders a component for each item in the grid. In each item I have a component that holds the embedded video.
Any ideas?
If each item in the grid is a component, like you said, you should use React.memo (for functional compoents) or Reat.PureComponent (for class components). It will prevent the component from rerendering if the props have not changed. I can't guarantee your videos will keep playing, but if the only reason they stop playing or flash is because the component is being rerendered then it should fix the problem.
Maybe this can help: when passing information from redux to your component, try to update the list of the objects instead of sending a new one
It's redux UpdateObject method.
I'm implementing a infinite scroll list view with the FlatList component in react native. I realized that even before the data gets appended any other prop changes will trigger a re-render of the component and therefore losing the scroll position in the list view.
I don't believe that is normal behavior, does any one know what I should do to have this work with redux ?
I have dropdown list with a lot of checkboxes, so this container has scroll. But when i click on any checkbox - it selects\deselects itself and then state changes.
So the problem is that after rerendering this container is back to the top. Is it possible to keep container's scroll after rendering without saving it to the state?
You can save the "snapshot" of the scroll position before the commit phase.
getSnapshotBeforeUpdate() shows kind of what you are looking for.
The documentation example saves the current scroll position within getSnapshotBeforeUpdate lifecycle method and then use the snapshot value passed to componentDidUpdate(prevProps, prevState, snapshot) as the last argument to restore the scroll position.
It doesn't require creating a state to save the scroll position as you requested.
It's happening because you are re-rendering the complete list of the checkboxes.
There are 2 possible approaches:
Re-render only relevant checkbox
Save the scroll position of the container and update it once component is re-rendered.
Unfortunately, you haven't added any code examples, so can't share the code changes.
I have a ListView component, which is a live-updating feed, rendering a collection of child component ListItem.
Each time a new ListItem is added, I want to add a transition animation.
Problem is, I don't know how to accomplish this without applying the transition on the initial load. The list often have 30+ elements initially, these should not be animated.
I tried setting a 'initialLoad' state, and doing something with transitionEnter={!initialLoad} but this ended up being messy
How can this be accomplished?