I am using Flatlist to present my data and when I click button 1 I want to change my view! From A to B! What's the best way to do it?
I've tried render two different styles at the same time but I set one of them height 0! Also I've tried to use state to decide which style I want to show!
These two solutions work fine but I think it's kinda slow to change from A to B or B to A.
So are there any other ways to do it? Thank you in advance!!
You have to use the concept of conditional Rendering. You can use this resource Conditional Rendering.
Just change the Flatlist View based on state Value using Conditional Rendering.
Related
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !
The input animation works fine but not the output one !
I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...
codesandbox
Thanks in advance
There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.
By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.
Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.
See the updated sandbox
I suggest that you don’t animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.
I create 2 Text Boxes one with hook and the another one with the old style, now in Hook mode when the user input change the textbox value the whole page rendered, but with old style there only the text-box rendered not the whole page, if you have the complex page with many objects like (Data Table, form, buttons, inputs, etc..) the single change on one of these components forced to re-render everything and it decease performance, for example typing in the text-box take time to effect on page and the delay time is more than user typing speed.
the one workaround solution is using the callbacks and useMem but if the page is complex(lots of objects as described, and all of these objects has many properties the callback and useMem is very very complicated to handle single object property.
SandBox Example
This is exactly how react hooks should work. what will cause a rerender in react? two things:
change in props
change in hooks or say in a better way hooks state
in the second case, the useInput state is changing so that causes a rerender and it's absolutely normal behavior. I think using custom hook in that way is not a good practice.
I recommend reading this article for more information on react rendering: https://www.codebeast.dev/usestate-vs-useref-re-render-or-not/
I have a scenario where I can't use scrollview or flatlist.
UI is kind of wizard when press next I move user to next screen or previous on back.
In render function I have:
<View style={{flex: 1}}>
<WizardItem data={this.props.currentStep} />
</View>
Component WizardItem has button inside which update this.props.currentStep and when it is updated in reducer it is naturally updated here.
But I need to animate transition like current step goes left and new come from right and vice versa.
As you can see step is completely dynamic so I can't load it in lists as I don't know until user press next button what is next item.
But I need that animation.
Can somebody guide me on how to do this effect or I should stop thinking about it if it is not possible?
UPDATE
Bellow is example of something similar just no rotation simple move left right.
But I can't use views where I have list of items predefined as next and previous step in wizard are dynamic.
enter link description here
If I understand it correctly you want that to transition to a different screen. To do this I suggest you use LayoutAnimation in React Native. LayoutAnimation lets you animate state changes instead of things simply disappearing and appearing. You can save the currentStep in state instead of props and every time the state changes use LayoutAnimation to transition in the way you want.
This article uses layout animation for screen transitions
If changing to state from props is something that you cannot do or don't want to do, you could also detect prop changes in your Wizard and then use Animated to move your layouts around.
It's tricky to suggest a best way without knowing how Wizard is setup or at the least its general layout. If it is possible to share some code for Wizard it would be easier to help you.
Is it possible to create listItems in material-ui with more than 1 avatar (or better, more than 2, since you can put one on the left and one on the right, even if I don't know why you would do that)
Or more in general, is it possible to customize the content that goes inside the listItem or are we limited to the available attributes that are specified in the documentation (primaryText, secondaryText, etc?)
Thank you!
It looks like I can use the 'children' attribute on the ListItem component to pass custom content. I am not sure whether it is a good way to handle my case, but it seems to work fine.