I have a flatList and some views in the scrollView, how to make when the flatList scroll to top, we start to scroll flatList not scrollView.
<ScrollView>
<View>
// some child views
</View>
<FlatList
data={this.props.sourceData}
renderItem={this._renderItem}
/>
<View>
.... // some child views
</View>
the scroll conflict is complex, you can try to move the header views into FlatLIst
ListHeaderComponent, and the footer views into the ListFooterComponent
<FlatList
data={DATA}
ListHeaderComponent={"your header component"}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
ListFooterComponent={"your bottom views"}
/>
you can also read my question, in the description I give some solution. I hope it can help you
Related
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'm building a mobile application with React Native, and I have a ScrollView inside one of the pages.
The problem is that I have in this page a FlatList so when I go to that page, I get this error:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation... The thing is, I set the ScrollView nestedScrollEnabled to true and I also set the FlatList's scrollEnabled to false because I don't really need the scroll there (I'm using it to render items from an enum) so I thought that should fix the error, but the error still persist.
It looks like this:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
And MyComponent has this FlatList:
<FlatList
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>
It essentially looks like this:
<SafeAreaView>
<ScrollView>
<FlatList />
<OTHER COMPONENTS />
</ScrollView>
</SafeAreaView>
Your component FlatList and ScrollView have the same orientation(vertical), so you need put your component inside a ScrollView with horizontal orientation like this:
<View>
<ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
<View>
<ScrollView horizontal={true} style={{ width: "100%" }}>
<MyComponent />
</ScrollView>
</View>
</ScrollView>
</View>
The error is because you are using a FlatList inside a ScrollView.
The FlatList is already a scrollable component,
FlatList are accepting props like ListHeaderComponent for rendering header content and ListFooterComponent for rendering footer content. Here you can remove the ScrollView and instead of that you can only render FlatList for making whole page scrollable
You need to change your code as shown below:
const _renderHeader = () => <Text>Your Header</Text>
const _renderFooter = () => <Text>Your Footer</Text>
const _renderFooter = () => <Text>FlatList items</Text>
<SafeAreaView>
<FlatList
data={data}
keyExtractor={(item, index) => String(index)}
renderItem={_renderItem}
ListHeaderComponent={_renderHeader}
ListFooterComponent={_renderFooter}
ListFooterComponentStyle={styles.footerStyle} //If you need to give specific styles for footer component
ListHeaderComponentStyle={styles.headerStyle} //for header comp style
/>
</SafeAreaView>
You don't want to use a ScrollView when you are using a FlatList
You can check the official docs for more clarification
I'm building a mobile application with React Native, and I have a ScrollView inside one of the pages.
The problem is that I have in this page a FlatList so when I go to that page, I get this error:
VirtualizedLists should never be nested inside plain ScroolViews with the same orientation... The thing is, I set the ScrollView nestedScrollEnabled to true and I also set the FlatList's scrollEnabled to false because I don't really need the scroll there (I'm using it to render items from an enum) so I thought that should fix the error, but the error still persist.
It looks like this:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
And MyComponent has this FlatList:
<FlatList
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>
Can you try to add the property nestedScrollEnabled={true} to both the parents and the children:
<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
<MyComponent />
</ScrollView>
<FlatList
nestedScrollEnabled={true}
scrollEnabled={false}
style={{padding: 8,marginBottom: 8,}}
data={categories}
numColumns={numOfColumns}
keyExtractor={category => category}
renderItem={item => renderItem(item.item)}
/>
You can use the ListHeaderComponent and ListFooterComponent of the FlatList to render the other parts inside the scrollView. Using a FlatList inside a scrollview limits the performance of the FlatList.
<FlatList
ListHeaderComponent={
<>
<AboveFlatList />
</>
}
data={yourData}
renderItem={this.renderComponents}
...
...
ListFooterComponent={
<>
<BelowFlatList />
</>
}
/>
I have a horizontal scrollview inside my flatlist but it won't scroll.
renderRow = ({ item }) => {
return (
<View style={{width:'100%', backgroundColor:'transparent'}}>
<ScrollView horizontal={true}>
//I have multiple images here
</ScrollView>
</View>
)
}
This is my flatlist
<FlatList
keyExtractor={(item, index) => index.toString()}
data={this.state.data}
renderItem={this.renderRow}
/>
is it possible to put horizontal scrollview inside flatlist?
Try to add style width:100% in ScrollView
<ScrollView horizontal={true} style={{width:'100%'}}>
//I have multiple images here
</ScrollView>
You can try somethig like this:
<ScrollView horizontal={true} style={{flex: 1}}>
//Place Mutiple image in ScrollView.
</ScrollView>
I was trying to make a view that I wanted to come over a flatlist so that on clicking it user can reach the top.But the flatlist was covering that element.
<View style={{backgroundColor:'#e6e6e6',flex:1,}>
<View style={{position:'absolute'}}>
<Text>Scroll To Reload</Text>
</View>
<FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) =>
<TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
</View>
Each child in a view is rendered in order, and ultimately stacked on top of each other until all the children are rendered. As the view you want on the top is being rendered first it is going to be at the bottom. Change your code so that the view that you want on the top is rendered last. i.e. move it to the bottom of the view.
<View style={{backgroundColor:'#e6e6e6',flex:1}}>
<FlatList
refreshing={this.state.refresh}
onRefresh={()=>this.refreshAllTweets()}
data={tweets}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
/>
<View style={{position:'absolute', top: 0}}>
<Text>Scroll To Reload</Text>
</View>
</View>
As the view is now absolutely positioned you may wish to give it an actual position.
Update for comment
Flatlist covering the a element with absolute position
FlatLast has a prop called ListFooterComponent it takes a React Component Class, a render function, or a rendered element. So you could update your FlatList by adding the following prop.
<FlatList
...
ListFooterComponent={
<View>
<Text>Scroll To Reload</Text>
</View>
}
/>
This will attach the view as a footer to the FlatList, so it will be visible when the bottom of your FlatList is reached.
Check out the docs for more information about FlatLists.