Estoy tratando de hacer una presentación de diapositivas donde el usuario pueda reproducirlas en un orden predeterminado o aleatorio y recorrerlas presionando un botón. El problema viene cuando el usuario ha elegido el modo aleatorio; al presionar el botón aún se incrementa la variable índice actual, pero por alguna razón, las imágenes [índice actual] no cambian.

 const SlideshowScreen = (props) => { const settings = props.route.params.settings; const [images, setImages] = useState(settings.random ? props.route.params.images.sort((a, b) => 0.5 - Math.random()) : props.route.params.images); const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { console.log('currentIndex', currentIndex, images[currentIndex]); }, [currentIndex]) const newImage = () => { if (currentIndex + 1 >= images.length) { console.log('done'); } else { setCurrentIndex(currentIndex + 1); } } return ( <View style={styles.mainContainer}> <View style={styles.imageContainer}> <Image style={styles.image} source={images[currentIndex].path} key={images[currentIndex].id} /> </View> <TouchableOpacity onPress={() => newImage()}> <Text>Next image</Text> </TouchableOpacity> </View> ) }

En algunos clics del botón esto sucede, y en otros no. ¿Cómo está pasando esto? Cualquier ayuda sería genial, gracias.