Sequence animation in react native

Question

I am trying to make use of react-native-animatable to make a sequence of images animated. Here's my code:

import * as Animatable from 'react-native-animatable';   

constructor(props) {
    super(props);
    this.images = [
            require('../../assets/img/04_rec_img/b1.png'),
            require('../../assets/img/04_rec_img/b2.png'),
            require('../../assets/img/04_rec_img/b3.png'),
    ];
    this.next = this.next.bind(this);
    this.state = {index: 0};
}

componentDidMount() {
    this.next();
}

next() {
    setTimeout(() => {
        this.setState({index: (this.state.index+1)%3});
        this.next();
    }, 1000);

}

render(){
       <View style={{backgroundColor:'rgba(142, 142, 147, 0.24)', 
        width:67,height: 67, borderRadius: 67/2, justifyContent:'center', alignItems:'center',
         }}>
              <Animatable.Image duration={500} ease="ease-out" animation="slideInRight" source={this.images[this.state.index]}
               style={{width:36, height:36}} /> 

        </View> 

}  

The first image slides but the rest two doesn't slides in instead they just appear.

I would like to achieve like this:

Please help!! If you have any other approach, also please share. Thanks in advance