React Native: How to use the Animated API for a loading state transition?

1import { Animated, View, ActivityIndicator, StyleSheet } from "react-native";
2
3function LoadingTransition({ isLoading, children }) {
4  const contentOpacity = useRef(new Animated.Value(isLoading ? 0 : 1)).current;
5  const loaderOpacity = useRef(new Animated.Value(isLoading ? 1 : 0)).current;
6
7  useEffect(() => {
8    Animated.parallel([
9      Animated.timing(contentOpacity, {
10        toValue: isLoading ? 0 : 1,
11        duration: 300,
12        useNativeDriver: true,
13      }),
14      Animated.timing(loaderOpacity, {
15        toValue: isLoading ? 1 : 0,
16        duration: 300,
17        useNativeDriver: true,
18      }),
19    ]).start();
20  }, [isLoading]);
21
22  return (
23    <View style={styles.container}>
24      <Animated.View style={[styles.loader, { opacity: loaderOpacity }]}>
25        <ActivityIndicator size="large" />
26      </Animated.View>
27      <Animated.View style={{ opacity: contentOpacity }}>
28        {children}
29      </Animated.View>
30    </View>
31  );
32}