Hola, estoy creando un control deslizante en react-native. Funciona perfectamente. Tiene tres diapositivas en el desplazamiento. Hice esto usando Animated.FlatList y scrollX. Pero una cosa que no entiendo es cómo puedo saber qué diapositiva se está mostrando actualmente. Quiero hacerlo porque en la pantalla integrada quiero mostrar el botón de salto en las dos primeras diapositivas y en la tercera quiero mostrar otro botón, cómo puedo hacerlo.

 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> ); };

Trato de hacer condiciones en scrollX pero no está actualizando el valor como lo hacen los estados.

Mi problema: ¿Cómo saber aplicar la condición en las diapositivas qué cosa debe mostrarse o cuál no?