React Native - Animated Functional Components

Question

I love the React Native animated API but it conflicts heavily with my preferred way of writing components which is completely stateless functional components.

Take this component as an example. How would I make the Image animated without reverting to class syntax and a state variable to drive the Image style?

const Logo = () => (
  <View style={styles.container}>
    <View style={styles.imageContainer}>
      <Animated.Image 
        resizeMode='contain'
        style={styles.image}
        source={require(img/sample.png')}
      />
    </View>
  </View>
)

export default Logo

Answer 1

As farwayer mentioned you can use react hooks. They were introduced in React 16.8, and added to React Native in version 0.59.

You will have to use both useState and useEffect.

const AnimatedComponent = (props)=>{

    // Need to create state first. Setter is not used in this case
    const [value] = useState(new Animated.Value(props.value))

    useEffect(()=>{
        Animated.timing(value, {
            toValue: props.value,
            duration: 100,
        }).start() // < Don't forget to start!
    }, [props.value]) // < Run animation only when props.value changed

    // Apply animated property to your style
    return (
        <Animated.View style={{width: value}} />
    )
}

---

For example this is how I implemented a progress bar:

const ProgressBar = (props)=>{

    const [value] = useState(new Animated.Value(props.value))

    useEffect(()=>{
        Animated.timing(value, {
            toValue: props.value,
            duration: 100,
        }).start()
    }, [props.value])

    const width = value.interpolate({
        inputRange: [0, 100],
        outputRange: ['0%', '100%'],
    })

    return (
        <View style={{
            width: '100%',
            height: '100%',
            flexDirection: 'row',
            backgroundColor: 'white',
        }}>
            <Animated.View style={{
                width: width,
                height: '100%',
                backgroundColor: 'green',
            }}></Animated.View>
        </View>
    )
}

UPTADED

Answer 2

You can use store to keep animated values of course. But IMO it is bad idea. Just use classes. You should be more flexible ;)

As alternative you can try https://github.com/oblador/react-native-animatable with declarative syntax. I didn't use it before but look like it can help.

UPDATED: With React Native 0.59 and above you can use hooks inside functional components.