I have a FlatList where the datainput gets rendered into a customcomponent.
The component has a state that i would like to toggle in each individual component.
i have a ref for the Flatlist, but i don't see a reference to data, items or something similar...
any body have any idea on how to do this?
i have tried different ways of tagging into the ref, but so far, none of my attempts have proven fruitful.
and, no, the state is not delivered through the input for the flatlist, they are states on the custom component it self - i just don't see how i'm supposed to access the component inside the flatlist
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 am developing a mobile app with react native. I have a component "Period" which has a couple of TextInputs, each TextInput is stored as state. This component gets rendered in a flatlist multiple times. Now I wonder how i can get the state values of each instance of "Period" that gets rendered in Flatlist?
Any Explanation how this works in React Native. I thought every component instance has its on states?
Thanks alot
I would suggest to put all your inputs states and onchange functions callbacks in the parent component containing the Flatlist, then you can pass your states as props to children components "Period"s.
I would suggest also working with a library such as Formik to handle dynamic forms with multiple inputs
I need to do some actions when the user has finished refreshing the data on my FlatList with onRefresh props.
I didn't find anything on the doc, so I was wondering if there was any way to do something like that?
Maybe you are looking for something like this
https://medium.com/#pateldhara248/flatlist-with-loadmore-and-pull-to-refresh-582d48eca60b.
It says that you need to provide refreshControl prop to FlatList which will be your Component displayed when the flatList is pulled to refresh. and to this component you will provide prop onRefresh which will be a function called when the Flatlist is pulled to refresh so in that function you can call your API to fetch data for the FlatList.
Consider the TextInput component of React Native. It has a prop called value. I set the value to this.state.text.
It also has a prop onChangeText, which I set to (text) => {this.setState({text: text}).
Setting the state will cause the view to re-render, which will in turn trigger setValue on the component.
This doesn't cause any sort of recursion or undesired behavior with stock components. However, in building my own text input component, I'm finding that using state in value and in onChangeText causes native input events to re-render the view and call setValue.
i.e user types on keyboard, native module emits onChangeText event, JavaScript component receives event and updates state, state change causes re-render, re-render calls setValue on the native component, and the native component swaps out the text with the value received from the initial event (the same value).
The problem is, when you set the text on an iOS or Android native text component, it resets the cursor. So I tried putting in a conditional if(newText != currentText) {setText(newText)}, and this works when you type slow, but when you type fast, things get chaotic and you can't predict the order of events.
I looked at how the React Native authors handle this in their own text component, and they seem to be using some sort of counter (here and here) to synchronize events, but I couldn't keep up with the logic as it was all over the place.
For now, my solution is to not use state in the render function, but then my component depends on render not being called unexpectedly to function properly, and that's just a disaster waiting to happen.
Any insight as how to better design a component like this, or how RN components get around this issue?
I have a Flatlist that is rendered with dynamic data, Here is the heirarchy of components used.
FlatList
List Item
Image
Button
Now these child components are rendered via "RenderItem" method of Flatlist, and everything works fine as expected, Now When I want to change any "prop" of the button by using "state" it changes the state (i can see in log) but just cant see changes to the button, which means the button is not rendered after change of state, it works fine if i use it out of the Flatlist Component, but inside, it doesnot work at all.
Any Idea Why?