Question 32777 in React native Question posted in
The official React Native documentation can be found here.

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>
        }
Tags:

2

Answers


  1. 0

    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',
  },
});
    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search