Develop Reference

How to get current slide position or number in react-native flatlist

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
}

react native vertival flatlist not scrolling down

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

Custom pagination with ScrollView in React Native

In my app i'm using ScrollView for showing images. Below my ScrollViewcomponent i have two buttons like prev and next. I want to add custom pagination with the buttons. Also my images are coming from an array in a loop. I want 4 images to show at a time. So, the next button should show next 4 images if there are any and prev button should take 4 previous images if there are any. My ScrollView is currently like this:
<View>
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
</View>
Below this i have two buttons.I have created two different fuctions for those. Here's what it's like now:
<View>
<Button
title="Prev"
color="#841584"
onPress={handleClickBackward}
/>
</View>
<View>
<Button
title="Next"
color="#841584"
onPress={handleClickForward}
/>
</View>
How can i manipulate with my list array so that the custom pagination works. I have tried array slice method on next but it removes the first images and i don't find those after pressing prev button.

you can use onNextPress function and add ref in scrolview
const scrollRef = useRef<ScrollView>();
const onNextPress = () => {
scrollRef.current?.scrollTo({
y : 0,//you must increase x or y
animated : true
});
}
return (
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
ref={scrollRef}//ref
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
);

flatlist extends out of the screen

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.

scrollview insde flatlist not scrolling

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.