How to make a smooth looping animation?

Question

React Native

Tell me, how can I start animations so that the same element smoothly appears and then immediately disappears smoothly? At the moment it appears smoothly, then disappears, and again smoothly appears.
In general, the essence of such an element from a small one (not visible at all) smoothly becomes large, then again gradually decreases and disappears, then in its place? according to the same algorithm, another picture appears and also disappears, and thus 2 pictures disappear and appear in turn.

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'
    }
  })