Creating a simple opacity animation

Initially, our blank App.js looks like this:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We need to create a custom component (a const) called AnimatedText which we are going to pass props through.

We need to change this in line 3 to import Animated:

import { StyleSheet, Text, View, Animated } from 'react-native';

Then setting up the const is like this:

  const AnimatedText = (props) => {
    return (
       <Animated.Text>
       TEST // placeholder text
       </Animated.Text>
    )
  }

Now we have to add this component in our App. To do this, and be able to change the text within the App rather than in the const variable, we need to do this:

  const AnimatedText = (props) => {
    return (
       <Animated.Text>
        {props.children}
       </Animated.Text>
    )
  }

and

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <AnimatedText>
      TEST!
      </AnimatedText>
    </View>
  );

Next step is to create styling. We can do this by doing 2 things. First we need to make sure the custom component can carry our styles across, like this:

  const AnimatedText = (props) => {
    return (
       <Animated.Text
          style={{
            ...props.style
          }}
        >
          {props.children}
       </Animated.Text>
    )
  }

and then add styling in the AnimatedText here:

      <AnimatedText style={{color: "red", fontSize: 100}}>
      TEST 2!
      </AnimatedText>

Next step is to actually animate it. Let’s do something which changes the opacity. We’re going to use useRef to store the value of the opacity. We’ll need to import this, and useEffect, like this:

import React, { useRef, useEffect } from 'react';

then we need to create a constant in the component like this:

  const textOpacity = useRef(new Aminated.Value(0)).current;

Then we have to add this to the style in the component:

opacity: textOpacity

If we save it now we’ll see that TEST 2! disappers, because opacity is 0 (fully transparent). We need to animate this from 0 to 1 over a set amount of time.

    React.useEffect(() => {
      Animated.timing(
        textOpacity,
        {
          toValue: 1,
          duration: 3000
        }
      ).start();
    }, [textOpacity]);

Note that when we animate this we get a warning saying useNativeDriver was not specified. We can use this option by doing the following:

useNativeDriver: true

This is the full code to get it all working:

import { StatusBar } from 'expo-status-bar';
import React, { useRef, useEffect } from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

export default function App() {

  const AnimatedText = (props) => {

    const textOpacity = useRef(new Aminated.Value(0)).current;

    React.useEffect(() => {
      Animated.timing(
        textOpacity,
        {
          toValue: 1,
          duration: 3000,
          useNativeDriver: true
        }
      ).start();
    }, [textOpacity]);

    return (
       <Animated.Text
          style={{
            ...props.style,
            opacity: textOpacity
          }}
        >
          {props.children}
       </Animated.Text>
    )
  }

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <AnimatedText style={{color: "red", fontSize: 100}}>
      TEST 2!
      </AnimatedText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Monday 30 January 2023, 167 views

Next post: Gestures
Previous post: Setting up a blank app