I would like to scroll the parent ScrollView to that itemposition when I click Item in FlatList.
Since the actual data is flexible in length, can not calculate the height statically.
<ScrollView>
<View style={{height:300}}>
<Text>Test</Text>
</View>
<FlatList
scrollEnabled={false}
data={[1,2,3,4,5,6,7,8,9,10]}
renderItem={renderItem}
/>
</ScrollView>
ScrollToIndex in a FlatList can not be used because scrollEnabled is false.
I want to use ScrollTo of the parent ScrollView.
But onLayout is used forrenderItem, y is 0.
So I do not know the exact position.
How can I get the value I want?
First of all, Don't use FlatList inside ScrollView, use ListHeaderComponent prop in FlatList
Reference: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Related
I have some items in a flatList in which I have used itemSeparator component to show the divider between the list but by default flatList render divider in between items, and I need to show the divider to the bottom also, is that any way to do this.
Thanks in advance
I have tried with index but that is not working on the flatList item separator, and I do not want to customise item to show the bottom line of the item. so is it possible with item separator to show the bottom line.
You can wrap your items to CellRendererComponent https://reactnative.dev/docs/virtualizedlist#cellrenderercomponent and apply styling to it
Try just put divider in renderItem function. With this you will have clear YourItem and Divider in any element you have, or you can try use Example #2.
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={({item}) => <><YourItem {...item} /><Divider/></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
Example #2
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={renderYourItem}
ListFooterComponent={() => <><ItemSeparatorComponent/><CustomButton /></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
I am trying to add a fixed gradient to separate items in scroll view, like this:
<ScrollView>
<GradientBackground>
<View>
{...content}
</View>
</GradientBackground>
<GradientBackground>
<View>
{...content}
</View>
</GradientBackground>
</ScrollView>
it should work like here. https://codepen.io/enova22/pen/vYrGGYv
However seems like background-attachment:fixed is not working in ScrollView.
What should I do?
Basically, I want the FlatList to have a onPress functionality (to explain simply) as well as the default scrolling functionality. Right now, if I have a FlatList inside a Pressable, then I am not able to scroll through the FlatList.
I have also tried to put Pressable inside the FlatList's RenderItem component, but I have a lot of items I'll be displaying, so it's going to inefficient.
Instead of Pressable wrapping the FlatList, I learnt that we can use React Native's Gesture Responder System on a simple View to get the behavior that I require.
<View
onStartShouldSetResponder={() => true}
onResponderRelease={doSomethingFunction}
>
<FlatList
data={someData}
renderItem={renderItemComponent}
/>
</View>
Try touch handling on FlatList item parent container like below so the scrolling issue would never come again and you can easily handle the touch on each item separately
<FlatList
style={{...}}
data={[...]}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => {...}}>
<View>
....
</View>
</TouchableWithoutFeedback>
)}
/>
I am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item
You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>
Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)
React Native, Using PanResponder View as a parent and having flatlist as a child of the view, without PanResponder, flatlist scrolling is working fine but with PanResponder, flatlist scrolling is not working.
I dont find proper solution, but workaround is wrap the flatlist items in TouchableOpacity , it will make flatlist scrollable.
If you don't like TouchableOpacity's opacity then you can set activeOpacity to 1.
Example:
<View {...this.gestureHandlers.panHandlers} style={styles.container}>
<FlatList
horizontal={true}
data={this.state.FlatlistData}
renderItem={({ item }) => {
return (
<TouchableOpacity activeOpacity={1} style={styles.itemsStyle}>
{/* Your core view here */}
</TouchableOpacity>
)
}}
/>
</View>