Imagine there is a list being rendered on clicking search with some info in it. when i click on one of the search results another component like a card needs to be rendered on top of the results which is more detailed. I want the component to be floating on top of the other while they both are still being rendered. How would i achieve something like this ?
Related
I have a feature need to implement that is when I'm on the map, I can click in any map position(coordinate) to get the data (data can be many or single) that the position contains. If data is many, it will display a list of items to choose from and see the details, otherwise is a single item.
In case data is many, After I click on the view button to see the item details I want to switch to another position. The weird behavior here is that from the state of details, React didn't render directly to the new position's data, it jumps back to the firstly rendered state then renders the data based on the new position. I want it not rendered back to the list state again, instead renders directly to the new position's data.
How do I achieve that?
Here is the full source code for this sample: https://codesandbox.io/s/crazy-wilbur-rgqrb?file=/src/Map.js
I have a list of items and I'm adding additional items to the top of this list with a button.
I want the items already in the lift to smoothly animate down to accomodate the new items.
I'm using AnimateSharedLayout and I have it working fine if it's a simple list with no custom components as can be seen in this sandbox.
However, I would like to use a custom component as the item added to the list. As can be seen in this example, this breaks the smooth layout transition.
I've tried multiple solutions of this, including converting my custom component to a motion component using motion(Item) but I can't get the desired behaviour to work.
It seems like this functionality should be possible. What am I doing wrong?
Many thanks, Ben.
I've realised that this was an issue with me declaring my Item component inside my App component. After moving it outside the main App component all works as expected.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to achieve something like this:
The data is something like: Root Category -> Sub Category -> Products.
We have something like 3000+ products. Showing all products slows down the device (if there is something I can do to render faster, please let me know), so I've cut them down to sub-categories instead, where there are about 5-12 sub-categories within each category, and about 200 products within each sub-category.
The Code
List Component:
https://gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946
TabBar:
https://gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20
What I've experienced
The list will be a bit laggy even with 200 products.
When I press on sub-category at tab menu, it takes a bit while to take action (about 1-2 sec).
When I scroll, the tab menu doesn't follow up quite well.
After using the tab menu few times, it goes slower than before.
What I want
When I press on a category from tab menu, I want it to scroll to the chosen sub-category list.
When I scroll, I want the tab menu to follow along with the current shown sub-category list.
First of all, keep away from ScrollView for this type of use case where you have to render lots of data dynamically, Scrollview is a scroll container that renders all the data once if you have lots of data which will cause performance issue and will make JS thread busy.
Now you have options to use
RecyclerView
FlatList
SectionList
Now all the above three list view provide onEndReached method and onEndReachedThreshold (Threshold to trigger the onEndReached or distance from bottom)
Before reaching to end of the list make a network call to your server and fetch newer data and add it to the list like this [...oldData, ...NewData]
Set your initialNumToRender to 10 or 20 (Which covers the view and have some scrollable distance to the bottom)
Set maxToRenderPerBatch so all of the renders will not be rendered even if it's loaded into the list.
Set windowSize so List will maintain it's a view for a scrollable view and will not unmount the view when it goes out of the view.
Use Section List and react-native-fast-image
Old Answer:
I would suggest you use Flatlist with lazy loading
Please add pagination, load 50 items, when scroll ends load next 50. Even if you fetch all 3000 items at once, do render 50-100 at a time.
For images use react-native-fast-image
Do not render all 3000 items at once, it is unnecessary as the user may not scroll the whole list.
In ReactJs, what would be the best way to breakdown the component hierarchy in a multi-page application ? For an example take an application with two columns. Left most column is the side bar and the right most column is for loading different views.
One view flow would be as follows. Side bar contains a link to view a list of products. Once the link is clicked a set of product with brief descriptions would be loaded into the right hand column.
If the user selects a specific product, the a full detailed view of that product would be loaded in the same panel replacing the original list view.
Now does that full detailed view component comes under the product list component as it's loaded by clicking on a product or is it better to keep it as a child component of the main application ?
You can take a look at 'Thinking in React' link which kind of goes over the same theory on what you are asking which is how do i breakdown my components.
https://reactjs.org/docs/thinking-in-react.html
You should put your data where you have to click/or triggering an event that will make your data change. In this case you would have to click on a link to trigger a product list, then click on the product to trigger product description.
You should not go more than 1 layer deep if you are passing state so don't pass it from parent to child to child. If this is the scenario you should move your state lower.
I hope this gets you going and thinking towards the right path.
I'm having a hard time understanding how animate components in React when it involves elements within child components. To set the stage, I have:
A button group component that contains some buttons.
A navigation component that contains some button groups. The navigation component creates arrays of button names and callbacks and then passes them to button group components as props.
Lets say the user takes some action on a page that will change the nav. More specifically, I want to fade out one of the buttons from one of the button groups in the nav.
I'm familiar how to use ReactCSSTransitionGroup and would think to use this in this case, but the tricky part is that the navigation component is the the thing that owns the animation trigger, and the button group component is the thing that owns the button that needs fading. When the navigation component re-renders, it throws away the old button group from the DOM and builds an entirely new one which means the old button group never has the opportunity to fade its button out.
Questions:
Am I using the wrong abstractions here? If I want to fade out the button based on nav state, does the button have to belong to the nav and not in some child component?
When the nav re-renders and new props are given to the button group, why does the button group get trashed and rebuilt rather than the existing one just getting a propsWillChange call?
You're right, it sounds like your child button group components shouldn't need to re-render.
If you're iterating over an array of name/callback pairs to build the buttons, make sure each button is being given a unique key attribute; maybe the name, if that is unique. That will give React a way of identifying which buttons to add or remove and which to leave in place.
With that, your ReactCSSTransitionGroup should work as expected.