Как сделать плавную циклическую анимацию?

Подскажите , как мне можно запустить анимации, что бы один и тот же элемент плавно появлялся и затем сразу плавно скрывался ?на данный момент он у меня плавно появляется ,потом исчезает ,и опять плавно появляется.
Вообще суть такая элемент из маленького(вообще не видно) плавно становиться большим, потом опять плавно уменьшается и исчезает , потом на его месте ?по тому же алгоритму появляется другая картинка и так же исчезает ,и таким образом 2 картинки пропадают и появляються по очереди.

import React from 'react'
import { 
    View, 
    Text, 
    StyleSheet,
    Animated,
    Image,
    Easing,
    TouchableHighlight } from 'react-native';

export default class Loading extends React.Component{


    spinValueOne = new Animated.Value (1)
    spinValueTwo = new Animated.Value (0)

    componentDidMount(){
        this.spinOne()

    }

    spinOne = () =>{
        this.spinValueOne.setValue(1)
        Animated.timing(
            this.spinValueOne,
            {
                toValue: 0,
                duration: 2000,
                easing: Easing.linear
            }
        ).start(() => this.spinOne())
    }

    spinTwo = () =>{
        this.spinValueTwo.setValue(0)
        Animated.timing(
            this.spinValueTwo,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.ease
            }
        ).start(() => this.spinTwo())
    }




    render(){

        const spinOnes = this.spinValueOne.interpolate ({ 
            inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], 
            outputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] 
          }) 
          const spinTwos = this.spinValueTwo.interpolate ({ 
            inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], 
            outputRange: [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0] 
          }) 

          const opacity = this.spinValueTwo.interpolate ({ 
            inputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], 
            outputRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] 
          }) 




        return(
            <View style={[styles.container]}>
                <Animated.Image
                    style={{  position:'absolute', transform:[{scale: spinOnes}] }}
                    source={require('./img/vector_one.png')} />
                <Animated.Image 
                    style={{position:'absolute', transform:[{scale: spinTwos}]}}
                    source={require('./img/vector_two.png')} />
          </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
      flex:1,
      width:'100%',
      height:'100%',
      justifyContent: 'center',
      alignItems: 'center'
    }
  })