I know <List /> has props "aside" to show content side of List View. Are there any props to show content below list view? Or is there any easy way to achieve that?
Related
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 worked with flat lists in React Native but I didn't find out, if it would be possible do make a kind of grid like you can see in the image. How could I do that? (The list is going on and on)
Well, I think the solution is to create ItemView for each section and each ItemView will be another FlatList with horizontal scrolling, so basically you will have one external list with vertical scrolling where each item is FlatList with horizontal scrolling customised by index of the external list.
with numColumns prop, multiple columns can be rendered.
<FlatList
data={listItems}
numColumns={2}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
keyExtractor={(item) => item.id.toString()}
/>
checkout this example
I get stuck in sticking the children of ListComponentHeader in FlatList (ListComponent is a View with some children components such as: banner, search bar respectively).
I have used stickyHeaderIndices={[0]} in FlatList but it would stick whole header component. While what I need is just the search bar. Does anyone have solution for this problem? Thank in advance.
I have created an autocomplete textbox component which basically renders a list of suggestions as the user types. When it is the only component on the screen it works fine but when I try putting it inside a view with another component its view seems to render over the component it is placed alongside. When I put them in separate views the list seems to render under the view below it. I was just wondering if there was a way to render the list above the other views on the screen? Thanks for your help
I suggest you to render a modal on pressing the search view and the modal should contain your textbox for typing and the flatlist below it. The modal will render above all views on your screen. for more help read the documentation.
https://facebook.github.io/react-native/docs/modal
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 ?