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?
