I need to print dates as accordion that containt many times inside,
I saved the whole date and time on one state of array, i loop my dates using collapsible like this:
<Collapsible collapsed={ this.state.date_tab !== date_index }>
{ this._renderTimes( date_index ) }
</Collapsible>
the date_tab used as selected accordion, so there's only one active collapsible allowed.
When i change the date_tab state, the whole dates and content rerender it's view so, it's make my collapsible slow to open caused all view rerender from begining.
Is there a way to close the activated collapsible, then open the pressed collapsible without rerender the other collapsible?
I tried using array, but not work, when i set state the array, it still rerender all view
Move collapsible and renderTimes to a separate component. Make the component a PureComponent. Supply collapsed prop and times array to the collapsible component.
PureComponent will render only if the props are different. So, only two of the collapsible components will render, and not all of them.
Related
I have a simple question: why is onViewableItemsChanged called at initial render without a horizontal flatlist being even visible? This flatlist is only shown when scrolling to it.
How can I fix this?
Thank you!
It is also possible for onViewableItemsChanged to be called during the initial render of a FlatList, even if the list is not yet visible on the screen. This can happen if the initialNumToRender prop of the FlatList is set to a value greater than 0, causing the FlatList to render more items than the ones that are currently visible on the screen.
In such cases, the onViewableItemsChanged callback will receive the list of viewable items that have been rendered, but they will not yet be visible to the user. This is the expected behavior of the FlatList component, and it is designed to optimize the performance of the list by pre-rendering items that are likely to become visible in the near future.
If you want to avoid having onViewableItemsChanged being called during the initial render, you can set the initialNumToRender prop to 0, or use other techniques to control the visibility of the FlatList component, such as conditional rendering based on a state variable or a prop passed from the parent component.
I have a large form (should support infinite number of fields) and the way formik or react-hook-forms do "field arrays" is with a single component (<useFieldArray /> or <FieldArray />) that takes in a render function.
while the way Flatlist works is that it takes in a data prop and a render function.
So how can I integrate the two together? If I simply "place" the <FieldArray /> inside of my FlatList the entire component will count as one row and will have terrible performance as the entire component will be rendered when it is in view.
The way I will be solving is by forgoing the <FieldArray /> component and manually rendering my array of fields in the Flatlist render prop but I will be losing the functionality that FieldArray offers.
So, my question is can I use FieldArray or, any large component that is, inside flatlist so that only the DOM elements currently visible are rendered instead of the normal behavior that renders the visible rows?
I want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?
We are using startSingleScreenApp to start the application. We need to hide/show some of the menu option based on screen in the application.
We tried to create two different Drawer with different items but in that case drawer items not getting rendered.
You can set custom component for your drawerMenu instead of default provided menu styling and properties. Create a custom component, and for the menu items, map through an array of menu items provided by redux. Then whenever you need to change the menu items, change the array state in redux and your drawer menu items will re-render and update accordingly.
In my React-Native app, I have a ListView with each row being rendered by following "Solution 2". Inside my row, I have a couple of custom TouchableHighlight components. When I press the "Delete" button in my row, I'd like it to replace the entire row or all the button components in the row, with a Text component saying, "This item has been deleted".
Does anyone have any idea of how to accomplish this? I'm not sure how to link my child component's onPress method (Delete button) to the parent component (Row) and have the Row replace its content with a Text component.
I created this code snippet to reproduce what you have described: https://snack.expo.io/Bk9-6VNLW.
You can accomplish the UI change by mutating the state of your row component which will trigger the update of your component. And by reading the deleted state, you can decide what components to render whether is a set of <TouchableHighlight>' buttons or just a` component.