React Native анимация не работает - на экране ничего не отображается

Question

Я создал простое приложение React Native для тестирования. Я хочу отображать анимацию с использованием нескольких кадров. Я успешно импортировал кадры изображений и создал два компонента. Один для анимации (Анимация) и один компонент-контейнер (Таймер).

const Images= [
  { id: 1, src: frame1, title: 'foo', description: 'bar'},
  { id: 2, src: frame2, title: 'foo', description: 'bar'},

]

const length = Images.length;

class Animation extends React.Component {
  constructor(){
  super();
  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],
      }),
    );
  });


  }
  componentDidMount() {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  }

  render() {

    return(
      <View style={styles.container}>

          {Images.map((item, index) => {
          const opacity = this.opacity[index];
          return (
            <Animated.View
             key={item.id}
            style={[styles.anim, {frame: item, opacity}]}
            />
          );
        })}

      </View>
    )
  }
}


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

  render() {

    return(
      <View style={styles.container}>
      <Animation />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  anim: {
    flex: 1,
    width: '100%'

    }

});

На экране ничего не отображается, только пустой белый цвет. Я могу заставить изображение протестировать компоненты. Работают нормально. Но похоже, что код анимации просто не работает. Есть идеи?