Animation not showing in React Native mobile app

Question

I have created a React Native app to test animations. I have a background and when the user presses this background I want an animation to appear over the background and animate. The code:

import * as React from 'react';

import { StyleSheet, Text, View,  TouchableOpacity, Image, ImageBackground, Animated, Easing, Platform
} from 'react-native';
import { frame1 } from '../app-master-test/assets/index';
import { frame2 } from '../app-master-test/assets/index';
import { frame3 } from '../app-master-test/assets/index';
import { frame4 } from '../app-master-test/assets/index';
import { frame5 } from '../app-master-test/assets/index';
import { frame6 } from '../app-master-test/assets/index';
import { frame7 } from '../app-master-test/assets/index';
import { frame8 } from '../app-master-test/assets/index';

import { background } from '../app-master-test/assets/index';


const Images= [
  { id: 1, source: frame1},
  { id: 2, source: frame2 },
  { id: 3, source: frame3 },
  { id: 4, source: frame4 },
  { id: 5, source: frame5 },
  { id: 6, source: frame6 },
  { id: 7, source: frame7 },
  { id: 8, source: frame8 },

]

const length = Images.length;

export default class Timer extends React.Component {
  constructor(props){
  super(props);

  this.state = {

    isOn: false,    

  }

  this.animations = new Animated.Value(0);
  this.opacity = [];
  Images.map((item, index) => {
    this.opacity.push(
      this.animations.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0],
      }),
    );


  });

}

onItemMouseDown = () => {
  Animated.loop(
    Animated.timing(this.animations, {
      toValue: length - 1,
      duration: 2000 * length,
      easing: Easing.linear,
      useNativeDriver: true,
    }),
  ).start();
console.log(this.animations)
  this.setState({
    isOn:true,

  }, () => {
    console.log(this.state.isOn)

  })

}

onItemMouseUp = () => {
  this.setState({
    isOn:false

  }, () => {
    console.log(this.state.isOn)
  })
}

  render() {

    return(
      <ImageBackground source={background} style={styles.background}>


     <TouchableOpacity 
     onPressIn={this.onItemMouseDown}
     onPressOut={this.onItemMouseUp}

     >
     <Text style={styles.touchbutton}>Touch this</Text>

     </TouchableOpacity>

   {this.state.isOn === true ? 

      <View style={styles.container}>
      {/* <Image source={frame1}></Image> */} //I can render this image if this.state.isOn is true

          {Images.map((item, index) => { //but this does not show ANYTHING!
          const opacity = this.opacity[index];
          {/* console.log(item)
          console.log(index) */}
          return(
            <Animated.View
             key={item.id}
            style={[styles.anim, {animations: item, opacity}]}
            />

          )

        })}

      </View>
  : null }

       </ImageBackground>
     )

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',

  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: 'center',
  },
  anim: {

    width: 100,
    height: 100,

    },
  touchbutton: {
    flex: 1,
    position: 'relative',
    marginTop: 300,
  },
  touchbuttontest: {
    flex:1,
    position: 'relative',
    marginTop: 200,
  }


});

As mentioned, nothing appears. I'm not sure whether it's this bit:

<Animated.View
      key={item.id}
      style={[styles.anim, {animations: item, opacity}]}
   />

particularly the style line. I'm not sure that is correct. I don't fully understand what is going on there. I don't know what to put instead of animations: item. I think it should be a property of something but what, I don't know. I've watched this and none of what is suggests works: https://egghead.io/lessons/react-animate-styles-of-a-react-native-view-with-animated-timing

Answer 1

there is no problem in your code you can give backgroundColor:"red" in anim to check if it is working or not

you have to make position:"absolute" to container for start animation from top and you have to wrap image inside Animated.View

you can check demo here :https://snack.expo.io/@nomi9995/animation

import * as React from "react";

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ImageBackground,
  Animated,
  Easing,
  Platform,
} from "react-native";
import { frame1 } from "../app-master-test/assets/index";
import { frame2 } from "../app-master-test/assets/index";
import { frame3 } from "../app-master-test/assets/index";
import { frame4 } from "../app-master-test/assets/index";
import { frame5 } from "../app-master-test/assets/index";
import { frame6 } from "../app-master-test/assets/index";
import { frame7 } from "../app-master-test/assets/index";
import { frame8 } from "../app-master-test/assets/index";

import { background } from "../app-master-test/assets/index";

const Images = [
  { id: 1, source: frame1 },
  { id: 2, source: frame2 },
  { id: 3, source: frame3 },
  { id: 4, source: frame4 },
  { id: 5, source: frame5 },
  { id: 6, source: frame6 },
  { id: 7, source: frame7 },
  { id: 8, source: frame8 },
];

const length = Images.length;

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOn: false,
    };

    this.animations = new Animated.Value(0);
    this.opacity = [];
    Images.map((item, index) => {
      this.opacity.push(
        this.animations.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0, 1, 0],
        })
      );
    });
  }

  onItemMouseDown = () => {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
    console.log(this.animations);
    this.setState(
      {
        isOn: true,
      },
      () => {
        console.log(this.state.isOn, "nominominomi");
      }
    );
  };

  onItemMouseUp = () => {
    this.setState(
      {
        isOn: false,
      },
      () => {
        console.log(this.state.isOn);
      }
    );
  };

  render() {
    return (
      <ImageBackground source={background} style={styles.background}>
        <TouchableOpacity
          onPressIn={this.onItemMouseDown}
          onPressOut={this.onItemMouseUp}
        >
          <Text style={styles.touchbutton}>Touch this</Text>
        </TouchableOpacity>
        {this.state.isOn === true ? (
          <View style={styles.container}>
            {Images.map((item, index) => {
              const opacity = this.opacity[index];
              return (
                <Animated.View
                  key={item.id}
                  style={[styles.anim, { animations: item, opacity }]}
                >
                  <Image
                    source={item.source}
                    style={{ height: 100, width: 100, zIndex: 100 }}
                  />
                </Animated.View>
              );
            })}
          </View>
        ) : null}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',
    position:"absolute"

  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: 'center',
  },
  anim: {
    position:"absolute",
    width: 100,
    height: 100,
    },
  touchbutton: {
    flex: 1,
    position: 'relative',
    marginTop: 300,
  },
  touchbuttontest: {
    flex:1,
    position: 'relative',
    marginTop: 200,
  }
});