Chaining two animations with a pause between, infinitely

[Oscar1998]

Hi! I am fairly new to React Native and came across this library which seems perfect with want I want to do. I have this screen where I want the following to happen with random words:

1. Slide in from the right
2. Pause
3. Slide out to the left
4. Change word
5. Repeat

So far I've managed to update the word that slides in every X seconds, but what I would prefer is for the word to slide in, pause for X seconds, then slide out, then update the word and loop this infinitely.

I've created a reproducible example of what I've done so far here.

Or here is the code of the example:

import React, { useState, useCallback, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Constants from 'expo-constants';

function App() {
  //An array of random words to display
  const words = ["First", "Second", "Third", "Fourth"]

  //First word displayed is a random word from the array
  const [word, changeWord] = useState(words[Math.floor(Math.random() * words.length)]);

  //Update the word displayed with another random word from the array
  const updateWord = useCallback(() => {
    const index = Math.floor(Math.random() * words.length);
    changeWord(words[index]);
    },[words]);

  //Call the updateWord function every 1501ms
  useEffect(() => {
    const intervalID = setInterval(updateWord, 1501);
    return () => clearInterval(intervalID);
  }, [updateWord])

  return (
    <View style={styles.container}>
      <Animatable.Text useNativeDriver={true} animation={'slideInRight'} duration={1500} iterationCount={'infinite'} style={styles.paragraph}>{word}</Animatable.Text>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

[UzmaSarfraz]

Any solution to the above issue?