fork download
  1. # your code goes hereimport React, { useState, useEffect } from 'react';
  2. import { View, Text, StyleSheet, Animated } from 'react-native';
  3.  
  4. const SlideAnimation = () => {
  5. const [rank, setRank] = useState(1);
  6. const [slideAnim] = useState(new Animated.Value(0));
  7.  
  8. useEffect(() => {
  9. Animated.timing(
  10. slideAnim,
  11. {
  12. toValue: 1,
  13. duration: 1000,
  14. useNativeDriver: true,
  15. }
  16. ).start();
  17. }, [rank]);
  18.  
  19. const slideFromLeft = slideAnim.interpolate({
  20. inputRange: [0, 1],
  21. outputRange: [-200, 0],
  22. });
  23.  
  24. return (
  25. <View style={styles.container}>
  26. <Text style={styles.rankText}>Rank: {rank}</Text>
  27. <Animated.View style={[styles.rankContainer, { transform: [{ translateX: slideFromLeft }] }]}>
  28. <Text style={styles.rankText}>{rank}</Text>
  29. </Animated.View>
  30. <Button onPress={() => setRank(rank + 1)} title="Increase Rank" />
  31. </View>
  32. );
  33. };
  34.  
  35. const styles = StyleSheet.create({
  36. container: {
  37. flex: 1,
  38. justifyContent: 'center',
  39. alignItems: 'center',
  40. },
  41. rankContainer: {
  42. justifyContent: 'center',
  43. alignItems: 'center',
  44. width: 50,
  45. height: 50,
  46. backgroundColor: 'skyblue',
  47. borderRadius: 25,
  48. },
  49. rankText: {
  50. fontSize: 20,
  51. fontWeight: 'bold',
  52. },
  53. });
  54.  
  55. export default SlideAnimation;
  56.  
Success #stdin #stdout #stderr 0.25s 40892KB
stdin
Standard input is empty
stdout
Standard output is empty
stderr
Error: unexpected '{' in "import {"
Execution halted