fork download
copy 
  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
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
Error: unexpected '{' in "import {"
Execution halted
https://ideone.com/0FyjW0
language:
R (R 3.5.2)
created:
1 year ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!