Make professional mobile apps with React Native and Typescript — Animations (Chapter 3 — Part 7)

Make animations with React Native.

Photo by Irvan Smith on Unsplash

To create a great user experience, animations take a very important part. In this part, we'll learn how to make animations with React Native using 3 different ways.

Continue with your code from the previous part. Otherwise, clone the repository.

git clone -b internationalization https://github.com/thinhtran3588/react-native-starter-kit.git

The first way is to use the official API: Animated . We’ll make an animated component to show whether the internet connection is available or not. Run:

yarn add @react-native-community/netinfo

Go to src/core/components. Create a new folder internet_connection. Inside it, create 2 new files internet_connection.tsx & internet_connection.styles.ts.

internet_connection

Now, look into the code. We subscribe to NetInfo so when the internet status is changed, the show function is called. In there, we call Animated.timing to change the component's opacity from 0 to 1 if there is no internet connection or from 1 to 0 if vice versa in 500 milliseconds. Note that we use useNativeDriver: true to improve the performance (you can read more here).

Add the below line to src/core/components/index.ts:

export * from './internet_connection/internet_connection';

Add the below line to src/assets/jsons/locales/en/common.json:

"noInternetConnection": "No Internet Connection",

Add the below line to src/assets/jsons/locales/vi/common.json:

"noInternetConnection": "Không có kết nối mạng",

Update app_layout.tsx:

app_layout

We don't want to show internet connection status in all but only some specific screens. Update weather_screen.ts. Change:

<AppLayout>

to

<AppLayout showInternetConnection>

Run yarn ios & yarn android to rebuild your app since we added a new binary library. To test it on iOS, disable wifi on your machine (not on the simulator). To test it on Android, turn of wifi & 3g on your Android simulator.

ios animation 1

android animation 1

Now, open internet_connection.tsx and change:

Animated.timing(animation, {
  toValue: isConnected ? 0 : 80,
  duration: 500,
  useNativeDriver: true,
}).start();

to

Animated.timing(animation, {
  toValue: isConnected ? 0 : 40,
  duration: 500,
  useNativeDriver: false,
}).start();

then change

opacity: animation

to

height: animation

Reload your app and test it.

ios animation 2

android animation 2

Note that this time we don't use nativeDriver since it doesn't support Flexbox and position properties.

If we open our app when there is no internet connection, in the Weather screen, ‘No data’ is displayed on the screen. But when the internet’s available, there is no way to refresh the screen automatically yet. Open the weather screen, add import statement:

import NetInfo from '@react-native-community/netinfo';

Then update useEffect:

useEffect(() => {
  const refresh = async (): Promise<void> => {
    try {
      const data = await weatherService.getDailyWeatherForecast({...conditions, lang});
      setWeatherForecasts(data);
    } catch (error) {
      Alert.alert('Error', error.message);
    }
  };
  refresh();
  const unsubscribe = NetInfo.addEventListener((state) => {
    if (state.isConnected && state.isInternetReachable !== false && weatherForecasts.length === 0) {
      refresh();
    }
  });
  return () => {
    unsubscribe();
  };
}, [conditions, lang, weatherForecasts.length]);

Reload your app and test it.

The 2nd approach is using react-native-animatable, a very popular animation library which already defines many out-of-the-box animations for you.

Run:

yarn add react-native-animatable

Open src/core/components/index.ts and add:

import {View as AnimatableView} from 'react-native-animatable';

Then add AnimatableView to the export statement.

Update setting_screen.tsx.

settings_screen

Reload your app and see the result. You also can try other animations, duration & delay.

ios animation 3

android animation 3

The last approach and also the most powerful one is using lottie-react-native, a Lottie component for React Native. As it claimed: “Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile! Designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand”. Run

yarn add lottie-react-native lottie-ios@3.1.3

Go to https://lottiefiles.com and get a free animation, then save it as src/assets/jsons/loading.json (for example I take this one).

Go to src/core/components, create a new folder loading. Inside it, create loading.tsx.

loading.tsx

Add the below line to src/core/components/index.ts

export * from './loading/loading';

Update src/core/component/loading_screen/loading_screen.tsx

loading screen

Run yarn ios & yarn android to rebuild your app since we added a new binary library. You'll see the new beautiful loading animation now.

Congratulations! That’s all we need to do in this part.

You can clone the sample here:

git clone -b animations https://github.com/thinhtran3588/react-native-starter-kit.git

Things you have learned in this part:

1. make animations with Animated, react-native-animatable, and lottie-react-native.
2. detect internet connection status.

Next: Work with forms.

Prev: Internationalization.

Back to Introduction.