# your code goes hereimport React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
const SlideAnimation = () => {
const [rank, setRank] = useState(1);
const [slideAnim] = useState(new Animated.Value(0));
useEffect(() => {
Animated.timing(
slideAnim,
{
toValue: 1,
duration: 1000,
useNativeDriver: true,
}
).start();
}, [rank]);
const slideFromLeft = slideAnim.interpolate({
inputRange: [0, 1],
outputRange: [-200, 0],
});
return (
<View style={styles.container}>
<Text style={styles.rankText}>Rank: {rank}</Text>
<Animated.View style={[styles.rankContainer, { transform: [{ translateX: slideFromLeft }] }]}>
<Text style={styles.rankText}>{rank}</Text>
</Animated.View>
<Button onPress={() => setRank(rank + 1)} title="Increase Rank" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
rankContainer: {
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
backgroundColor: 'skyblue',
borderRadius: 25,
},
rankText: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default SlideAnimation;
IyB5b3VyIGNvZGUgZ29lcyBoZXJlaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IFZpZXcsIFRleHQsIFN0eWxlU2hlZXQsIEFuaW1hdGVkIH0gZnJvbSAncmVhY3QtbmF0aXZlJzsKCmNvbnN0IFNsaWRlQW5pbWF0aW9uID0gKCkgPT4gewogIGNvbnN0IFtyYW5rLCBzZXRSYW5rXSA9IHVzZVN0YXRlKDEpOwogIGNvbnN0IFtzbGlkZUFuaW1dID0gdXNlU3RhdGUobmV3IEFuaW1hdGVkLlZhbHVlKDApKTsKCiAgdXNlRWZmZWN0KCgpID0+IHsKICAgIEFuaW1hdGVkLnRpbWluZygKICAgICAgc2xpZGVBbmltLAogICAgICB7CiAgICAgICAgdG9WYWx1ZTogMSwKICAgICAgICBkdXJhdGlvbjogMTAwMCwKICAgICAgICB1c2VOYXRpdmVEcml2ZXI6IHRydWUsCiAgICAgIH0KICAgICkuc3RhcnQoKTsKICB9LCBbcmFua10pOwoKICBjb25zdCBzbGlkZUZyb21MZWZ0ID0gc2xpZGVBbmltLmludGVycG9sYXRlKHsKICAgIGlucHV0UmFuZ2U6IFswLCAxXSwKICAgIG91dHB1dFJhbmdlOiBbLTIwMCwgMF0sCiAgfSk7CgogIHJldHVybiAoCiAgICA8VmlldyBzdHlsZT17c3R5bGVzLmNvbnRhaW5lcn0+CiAgICAgIDxUZXh0IHN0eWxlPXtzdHlsZXMucmFua1RleHR9PlJhbms6IHtyYW5rfTwvVGV4dD4KICAgICAgPEFuaW1hdGVkLlZpZXcgc3R5bGU9e1tzdHlsZXMucmFua0NvbnRhaW5lciwgeyB0cmFuc2Zvcm06IFt7IHRyYW5zbGF0ZVg6IHNsaWRlRnJvbUxlZnQgfV0gfV19PgogICAgICAgIDxUZXh0IHN0eWxlPXtzdHlsZXMucmFua1RleHR9PntyYW5rfTwvVGV4dD4KICAgICAgPC9BbmltYXRlZC5WaWV3PgogICAgICA8QnV0dG9uIG9uUHJlc3M9eygpID0+IHNldFJhbmsocmFuayArIDEpfSB0aXRsZT0iSW5jcmVhc2UgUmFuayIgLz4KICAgIDwvVmlldz4KICApOwp9OwoKY29uc3Qgc3R5bGVzID0gU3R5bGVTaGVldC5jcmVhdGUoewogIGNvbnRhaW5lcjogewogICAgZmxleDogMSwKICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJywKICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLAogIH0sCiAgcmFua0NvbnRhaW5lcjogewogICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLAogICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICB3aWR0aDogNTAsCiAgICBoZWlnaHQ6IDUwLAogICAgYmFja2dyb3VuZENvbG9yOiAnc2t5Ymx1ZScsCiAgICBib3JkZXJSYWRpdXM6IDI1LAogIH0sCiAgcmFua1RleHQ6IHsKICAgIGZvbnRTaXplOiAyMCwKICAgIGZvbnRXZWlnaHQ6ICdib2xkJywKICB9LAp9KTsKCmV4cG9ydCBkZWZhdWx0IFNsaWRlQW5pbWF0aW9uOwo=