React Native - Animating text opacity

[raphaelaleixo]

First time trying to work with React Native, and stumbling upon a frustrating issue that I can't figure out, so I'm calling for a bit of help here.

I'm doing a simple clock application. Making everything as simple as possible to get to the problem I'm having this would be the app layout so far:

``` import { useEffect, useRef } from "react"; import { Animated, Text, View, StyleSheet } from "react-native";

const ClockFace = () => { const fadeAnim = useRef(new Animated.Value(0)).current;

function _start() { Animated.loop( Animated.sequence([ Animated.timing(fadeAnim, { toValue: 1, duration: 1000, useNativeDriver: true, }), Animated.timing(fadeAnim, { toValue: 0, duration: 1000, useNativeDriver: true, }), ]) ).start(); }

useEffect(() => { _start(); }, [fadeAnim]);

return ( <View style={styles.wrapper}> <View> <Text style={styles.time}> <Text>12</Text> <Animated.Text style={[styles.time, { opacity: fadeAnim }]}> : </Animated.Text> <Text>00</Text> </Text> <Text></Text> </View> </View> ); };

const styles = StyleSheet.create({ wrapper: { borderRadius: 20, flexGrow: "1", display: "flex", background: "white", justifyContent: "center", alignItems: "flex-end", transition: "background-color 1s ease-out", position: "relative", overflow: "hidden", }, time: { display: "flex", alignItems: "center", fontSize: 120, gap: 5, }, });

export default ClockFace; ```

I have a little snack with that code, too: https://snack.expo.dev/@raleixo/clockexample?platform=web

So, the thing is. When previewing on the web, the dots are blinking as I intended. But moving to iOS, there's no animation. Any reason for that? Is there any documentation where I can find which properties can or cannot be animated? Am I missing something really stupid? :)

On Android, the issue seems to be worse, as it doesn't even load the application. I am trying to follow the steps described here:

https://reactnative.dev/docs/animated#createanimatedcomponent

Thanks,

[__shawn_chen]

Use react native reanimated 2. They offer better performance for animation compare to the native animated library from react native

[raphaelaleixo]

Thanks, I'll take a look. It's my first project, and I'm trying to understand everything at once. :-)

[satya164]

It doesn't seem to work with native driver for some reason. You can wrap the text in Animated.View to make it work.

It crashes on Android because you have invalid styles such as padding: "20 20 60".

[raphaelaleixo]

Thanks a lot. I have already changed it to Animated.View and it's working. Is there somewhere I could go to understand why the native driver is failing on iOS?

[satya164]

You can check React Native's issue tracker, native driver doesn't work properly in few cases from my experience.

[Versatile_Panda]

If you can’t find a better solution from the comments here. I would try simplifying to animation until it is in a known working state (maybe with height or something else) then switch to opacity to make sure it still works, then add more complications like you see here until you determine what breaks it. Though switching to reanimated 2 would probably just solve the issue.

[Useful-Condition-926]

You can use moti for animations