You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Slide in from the right
Pause
Slide out to the left
Change word
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:
importReact,{useState,useCallback,useEffect}from'react';import{Text,View,StyleSheet}from'react-native';import*asAnimatablefrom'react-native-animatable';importConstantsfrom'expo-constants';functionApp(){//An array of random words to displayconstwords=["First","Second","Third","Fourth"]//First word displayed is a random word from the arrayconst[word,changeWord]=useState(words[Math.floor(Math.random()*words.length)]);//Update the word displayed with another random word from the arrayconstupdateWord=useCallback(()=>{constindex=Math.floor(Math.random()*words.length);changeWord(words[index]);},[words]);//Call the updateWord function every 1501msuseEffect(()=>{constintervalID=setInterval(updateWord,1501);return()=>clearInterval(intervalID);},[updateWord])return(<Viewstyle={styles.container}><Animatable.TextuseNativeDriver={true}animation={'slideInRight'}duration={1500}iterationCount={'infinite'}style={styles.paragraph}>{word}</Animatable.Text></View>);}exportdefaultApp;conststyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',paddingTop: Constants.statusBarHeight,backgroundColor: '#ecf0f1',padding: 8,},paragraph: {margin: 24,fontSize: 18,fontWeight: 'bold',textAlign: 'center',},});
The text was updated successfully, but these errors were encountered:
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:
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:
The text was updated successfully, but these errors were encountered: