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>
Related
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 have a horizontal Flatlist and right above it i want to add a custom header. I have an option to wrap the Flatlist & custom header in a ScrollView - which isn't good practice according to RN 0.61
VirtualizedLists should never be nested inside plain ScrollViews with
the same orientation
Another option is to use:
ListHeaderComponent
<FlatList
horizontal
ListHeaderComponent = {<CustomHeader>What can we help you find?</CustomHeader> }
keyExtractor = {(item) => item.unique_id }
data = {this.props.categories}
contentContainerStyle={{ flexGrow: 1}}
renderItem={ ({item}) => (
<TouchableOpacity>
<View>
<Image
style={{
height:80,
width:100}}
source={{uri:'some_url'}}
/>
<Title>{item.category}</Title>
</View>
</TouchableOpacity>)}
/>
Whilst the above works with a vertical Flatlist, it completely fails with a horizontal flatlist with my use case.
Expected:
Actual Output:
What are the possible fixes?
You can Conditional Rendering like this, just a workaround
{this.props.category.length ? <CustomHeader>What can we help you find?</CustomHeader> : null}
<FlatList
horizontal
keyExtractor = {(item) => item.unique_id }
data = {this.props.categories}
contentContainerStyle={{ flexGrow: 1}}
renderItem={ ({item}) => (
<TouchableOpacity>
<View>
<Image
style={{
height:80,
width:100}}
source={{uri:'some_url'}}
/>
<Title>{item.category}</Title>
</View>
</TouchableOpacity>)}
/>
I'm listing data with flatlist. But while listing the data, it lists it vertically, I want it to be sorted horizontally. So instead of scrolling down, I want to scroll left and right. I think it's called pagingEnabled. How can I do that?
<FlatList
style={{
flex: 1
}}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={this.state.allReasons}
keyExtractor={(item,index)=>index.toString()}
renderItem={({ item ,index}) => {
return (
<ScrollView onScroll={(event)=>{
this.setState({
activePage:Math.round(parseFloat(event.nativeEvent.contentOffset.x/Dimensions.get('window').width))
})
}}
style={{width:'100%'}} showsHorizontalScrollIndicator={false} pagingEnabled={true} horizontal={true}>
<View style={{width:'100%'}}>
<Image style={{ resizeMode: 'contain',width:Dimensions.get('window').width,height:250}} source={{uri:"http://ledslider.stechomeyazilim.com/" + item.Slider_Image}}/>
.....
</View>
Add horizontal prop in Flatlist like
horizontal={true}
Try removing scrollview from item may cause the issue
I am using FlatList for scrolling horizontally images.
on Android, when I scroll horizontally the items are appearing, but they appear with a fade-in animation.
how can I remove the animation?
<FlatList
showsHorizontalScrollIndicator={false}
initialNumToRender={5}
horizontal={true}
data={images}
snapToAlignment={"start"}
snapToInterval={210}
decelerationRate={"fast"}
keyExtractor={(item) => item.key}
renderItem={(item)=>renderImage(item,selectedImageHandler)}/>
const renderImage = (itemData:{ index:number, item:ImageProps}, selectedImageHandler:(index:number)=>void) => {
return (
<TouchableOpacity activeOpacity={0.8} onPress={()=>selectedImageHandler(itemData.index)}>
<Image style={styles.image} source={{uri:itemData.item.key}}/>
</TouchableOpacity>
)
}
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