im trying to scroll vertically on my screen but the flat list is not scrolling down se the code below
the home page in which the flatlist is used
render(){
let {container}=styles
let {dataSource, isloading}=this.state
return(
<View style={styles.container}>
<View >
<FlatList
data={dataSource}
renderItem={this._renderItem}
keyExtractor={(item,index) => index.toString()}
onEndReached={this._handleLoadMore}
onEndReachedThreshold={0.5}
/>
</View>
</View>
);
};
}enter code here
Related
These red marks areas are 3 FlatLists. The first and Second are horizontally scrolling FlatLists while the last FlatList is scrolling vertically.My problem arise when scrolling the last FlatList. It not going to the bottom it stays in the same position but scrolls (Like it has a fixed height). How to get rid of such thing. I'm trying a way to scroll the whole page. I have attached a GIF too to make sense. Thanks.
<SafeAreaView style={{flex:1}}/>
//Top FLatList
<View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={articles}
...
/>
</View>
//Middle FLatList
<View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={options}
...
/>
</View>
//Bottom FLatList
<View>
<FlatList
data={articles}
...
/>
</View>
</SafeAreaView>
The problem is typically caused by the custome style to the bottom tab. You may fix it by adding the footer component prop to the last flatList.
//The total height including the bottom tab height and the space
let bottomMargin = 110
<SafeAreaView style={{flex:1}}/>
//Top FLatList
<View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={articles}
...
/>
</View>
//Middle FLatList
<View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={options}
...
/>
</View>
//Bottom FLatList
<View>
<FlatList
data={articles}
ListFooterComponent={()=>(
<FooterComponent/>
)}
...
/>
</View>
</SafeAreaView>
const FooterComponent = () => {
return (
<View style={{marginBottom: bottomMargin}} />
)
}
To scroll the whole page
To scroll the entire page, pass the above code from the third flatlist as the Header component to the third flatlist like the following:
<SafeAreaView style={{flex:1}}/>
//Top FLatList
//Bottom FLatList
<View>
<FlatList
data={articles}
ListHeaderComponent={()=>(
<HeaderComponent/>
)}
...
/>
</View>
</SafeAreaView>
const HeaderComponent= () => {
return (
<View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={articles}
/>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={options}
/>
</View>
)
}
Hy, I'm creating a slider in react-native. It works perfectly. It having three slides on scrolling. I done this using Animated.FlatList and scrollX. But One thing I'm not getting is how I can know which slide is currently displaying. I want to because it onboard screen I want to display the skip button on the first two slides and on the third I want to display something else button how I can do that.
const OnBoardScreen = () => {
const scrollX = useRef(new Animated.Value(0)).current;
// flatlist render function
const renderSplash = ({ item, index }) => {
return (
<View style={styles.mainWrapper}>
<View style={styles.imageWrapper}>{item.image}</View>
<View style={[styles.titleWrapper,
{marginTop:index==1 ? hp(4):index == 2 ? hp(10):null}
]}>
<Text style={styles.titleText}>{item.title}</Text>
</View>
<View style={styles.bodyWrapper}>
<Text style={styles.bodyText}>{item.body}</Text>
</View>
</View>
);
};
return (
<View style={styles.container}>
{/* background Svgs */}
<View style={styles.blueSvgWrapper}>
<BlueSvg />
</View>
<View style={styles.dotSvgWrapper}>
<DotsSvg />
</View>
<View style={styles.orangeSvgWrapper}>
<OrangeSvg />
</View>
{/* Main Content */}
<Animated.FlatList
data={onBoardData}
keyExtractor={(item, index) => item.key}
renderItem={renderSplash}
horizontal
scrollEventThrottle={32}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: scrollX } } }],
{ useNativeDriver: false }
)}
pagingEnabled
showsHorizontalScrollIndicator={false}
/>
<Indicator scrollX={scrollX} />
{skip == false ?
<TouchableOpacity style={styles.skipWrapper} >
<Text style={styles.skipText} >Skip</Text>
</TouchableOpacity>
: null }
</View>
);
};
I try to do conditions on scrollX but it's not updating the value like states do.
My Issue:
How to know apply condition on slides which thing should be show or which not?
FlatList inherits all of ScrollView props.
Therefore you can use onScroll.
onScroll = (event) => {
const scrollOffset = event.nativeEvent.contentOffset.y
}
I'm new to React Native and found this strange behaviour that react native SectionList component scrolling does not work if I use renderSectionHeader props before renderItem
Vertical scrolling Not Working
<SectionList
sections={DATA}
renderSectionHeader={({ section }) => (
<View style={styles.item}>
<Text style={styles.text}>{section.title}</Text>
</View>
)}
renderItem={({ item }) => (
<Text style={styles.text}>{item}</Text>
)}
/>
Vertical scrolling Working
<SectionList
sections={DATA}
renderItem={({ item }) => (
<Text style={styles.text}>{item}</Text>
)}
renderSectionHeader={({ section }) => (
<View style={styles.item}>
<Text style={styles.text}>{section.title}</Text>
</View>
)}
/>
Is this a bug as header is displayed first and later its children
I've compared your example with the one listed on the React Native docs. The difference is having the keyExtractor prop.
By taking out this keyExtractor prop, the scrolling behaviour of the component doesn't function at all, irregardless of the positioning of the renderSectionHeader and renderItem props.
Can you try adding the keyExtractor prop below and see if both prop arrangements affect the scrolling behaviour?
keyExtractor={(item, index) => item + index}
I have a screen that looks like this:
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
....
<View style={styles.listContainer}>
{data && showFlatList !== null && (
<UsersFoundList
data={data}
/>
)}
</View>
</View>
</SafeAreaView>
);
};
listContainer: {
justifyContent: 'center',
//marginBottom: 50,
},
I call a FlatList here from the UserFoundList component:
return (
<View>
<FlatList
data={data.user}
horizontal={false}
scrollEnabled
renderItem={({ item }) => (
<UserFoundEntry user={item} onSendRequest={onSendRequest} />
)}
keyExtractor={(item) => item?.id?.toString()}
ListEmptyComponent={NoUsersFoundTextBox}
/>
</View>
);
};
But the list overlaps with the safeAreaView at the bottom. While scrolling, it should appear from behind/under the SafeAreaView and not form top of it.
Try using flex: 1 in the listContainer styling, this should make it stay in the boundaries of your parent view.
i have this flatlist in render():
render() {
return (
<FlatList
ref='listRef'
data={this.props.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
/>
)
}
Then inside renderItem() i have:
return (
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
{item.mascotas.map(function(d, index){
return (
<View key={index} style={{flex:1}}>
<Image source={require('./img/base-face-image.png')} style={styles.mascotas_list_item_img} />
<View style={styles.mascotas_list_item_details}>
<Text style={styles.mascotas_list_item_details_name}>{d.nombre}</Text>
</View>
</View>
)
})}
</ScrollView>
</View>
As you can see the parent view and its childs have flex:1, i've also tried adding flex:1 to FlatList but doesn't work neither. I need the scrollview to scroll.