Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

87
Vistas
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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

FlatList inherits all of ScrollView props. Therefore you can use onScroll.

onScroll = (event) => {
  const scrollOffset = event.nativeEvent.contentOffset.y
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda