Loop through multiple images to create an animation in react native

I have tried looking into multiple tutorials for the same but I could not find the same.

I have multiple images in assets like :

const animImages = [
  require('..//../img/ic_1.png'),
  require('..//../img/ic_2.png'),
  require('..//../img/ic_3.png'),
  require('..//../img/ic_4.png'),
  require('..//../img/ic_5.png'),
  require('..//../img/ic_6.png'),
];
export default animImages;

What I want to do is based on a button press, I wanted to loop these images one by one and show it inside a view. I created a variable and tried to conditionally render the component based on the same. Here is the code snippet.

        <>
       {animImages.map(img => <Image source={img} />)}
     </> 

This lets me render all the images, however, I want to loop over the images and render them 1 by 1 so that it looks like an animation. Can anyone help with the same.

Thanks

EDIT : I want to loop the images at the same place where the button was, I can take care of the same using the conditional rendering. But I want it to loop for certain seconds and then redisplay the button.

Here is what I have :

{componentProps.showAnimation ? 
        <View style={styles.elevatedView}>
        <TouchableOpacity
        onPress={() => {
          console.log("button pressed");
          // stop the image loop 
        }} 
        >
          {The loop for images comes here }
        </TouchableOpacity>
        </View>
        : 
        <View style={styles.elevatedView}>
          <IconsRender
            icon={acomponentProps.icons.icon}
          />
        </View>
        }

That is straightforward you should be able to implement that on your own.
Nevertheless I am gonna provide an example based on (https://github.com/chagasaway/react-native-fading-slides)

Example:

import React from 'react';
import { StyleSheet, View, Dimensions, Button } from 'react-native';

import FadingSlides from './FadeImage/fadeimage';

const { width, height } = Dimensions.get('window');

const slides = [
  {
    image: require('./assets/snack-icon.png'),
    imageWidth: width - width * 0.3,
    imageHeight: width - width * 0.3,
    title: 'JavaScript',
    subtitle: 'The definitive language',
    titleColor: '#fff',
    subtitleColor: 'yellow',
  },
  {
    image: require('./assets/snack-icon.png'),
    imageWidth: width - width * 0.3,
    imageHeight: width - width * 0.3,
    title: 'ReactJS',
    subtitle: 'JavaScript coolest library',
    titleColor: '#fff',
    subtitleColor: 'cyan',
  },
];

export default App = () => {
  const [startAnimation, setStartAnimation] = React.useState(true);

  return (
    <View style={styles.container}>
      <FadingSlides
        slides={slides}
        fadeDuration={1200}
        stillDuration={2000}
        startAnimation={startAnimation}
        height={height}
      />
      <Button
        title="Toggle animation"
        onPress={() => {
          setStartAnimation(() => {
            return !startAnimation;
          });
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff0000',
  },
});

You could really use the simple react native animation to achieve that. An example would be :

import React, { useState, useEffect, useRef } from 'react';
import { Animated, Image, StyleSheet, View , Text} from 'react-native';
const ANIMATION_DURATION = 500; // you can add your own animation time in ms
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: 50,
height: 20,
},
});
const IMAGES = [
// add your images here 
];
const micAnimation = () => {
const animation = useRef(new Animated.Value(0)).current;
const [imageIndex, setImageIndex] = useState(0);
useEffect(() => {
Animated.loop(
Animated.timing(animation, {
toValue: 1,
duration: ANIMATION_DURATION,
useNativeDriver: true,
}),
).start();
}, []);
animation.addListener(({ value }) => {
const newIndex = Math.floor(value * IMAGES.length);
setImageIndex(newIndex);
});
const imageSource = IMAGES[imageIndex];
return (
<View style={styles.container}>
<Animated.Image
style={[styles.image, { opacity: animation }]}
source={imageSource}
/>
</View>
);
};
export default micAnimation;