Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chaining two animations with a pause between, infinitely #367

Open
Oscar1998 opened this issue Jun 16, 2021 · 1 comment
Open

Chaining two animations with a pause between, infinitely #367

Oscar1998 opened this issue Jun 16, 2021 · 1 comment

Comments

@Oscar1998
Copy link

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
Copy link

Any solution to the above issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants