DEV Community: Paul Oloyede

Can we Animate Opacity in React Native?

Paul Oloyede — Fri, 02 Sep 2022 11:43:07 +0000

Introduction

Opacity means transparency of an object or element used to control the visibility of an element.

It helps with a gradual entrance and gradual exit to prevent any sort of jarring layout movements that may affect the user negatively. When change occurs for an opacity value, it affects the visibility of the component in which such change is been acted upon.

You can set opacity values from 0 to 1 which is equivalent to 0% to 100%. So for example, we can set our opacity value to 0.1, or 0.5 based on how much visibility or transparency we want or the message being conveyed to a user at the time.

Benefit of Animating Opacity

One of the core importance of animating this value when changed is to give the smooth transitioning effect to the eye of the user, basically not changing visuals in an unappealing manner. This can at times irritate the user.
Allow the user to see the effect of their action, and not living them to wonder if there was any at all.
Creating a connection between each state of your application.
it helps to convey or drive the message home with ease.
it can be used as a guide for the user when they need to perform some actions that are required. Take, for example, a button that can remain disabled until some form fields are filled and validated. it is often implemented by blurring out the button component until these actions or requirements are met.

Prerequisites

Basic knowledge of JavaScript
Basic knowledge of React
Basic knowledge of running CLI commands
Node.js and npm installed on your machine
XCode or Android Studio installed on your machine
Some experience with React Native (suggested, not required)

Getting Started

Let's create a new expo project using this command:



npx create-expo-app rn-opacity

In the root of our application that we've just created, there is a App.js file that contains a starter code to show us the application is up and running properly after installation.

So let's run our app using this command yarn ios for iOS and yarn android for android devices respectively, we will see the content of the component appear on our screen.



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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Building the UI

Can we add a component structure to demonstrate our example? Yes, that's possible!

In our source code is an orange box, where we use View component to build the UI and style the backgroundColor to orange

we import the react library on line 1.

On line 2 we import StyleSheet for writing external styles, View for building our UI, and TouchableWithoutFeedback button component for achieving interaction or state switch trigger.



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

export default function App() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => null}>
        <View
          style={styles.box}
        ></View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
            backgroundColor: "orange",
            height: 200,
            width: 200,
            opacity: 0.5,
          }
});

Putting Everything Together

In our App.js file below, we have added quite many changes, let's go through the lines of code for explanation.




import React, { useRef } from "react";
import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Animated,
} from "react-native";

export default function App() {

  const opacityAnimation = useRef(new Animated.Value(0.5)).current;


  const opacityStyle = { opacity: opacityAnimation };

  const animateElement = () => {

    Animated.timing(opacityAnimation, {
      toValue: 0,
      duration: 1500,
      useNativeDriver: true
    }).start(() => {
      Animated.timing(opacityAnimation, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true
      }).start()
    })
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => animateElement()}>
        <Animated.View style={[styles.box, opacityStyle]}></Animated.View>
      </TouchableWithoutFeedback>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    backgroundColor: "orange",
    height: 200,
    width: 200,
    opacity: 0.5,
  },
});

We declare an opacityAnimation variable to hold the Animated.value which is set to 0.5. This means that the opacity value of our box at default when rendering it's 0.5

While on line 13, in our code, we also declare a variable to hold an object for the opacity style we would be changing dynamically and we set the opacity property to the value of opacityAnimation.

In the animateElement function we access the Animated.timing method. Timing will specify the animation of a single value to another value over a set period, so its function signature is opacityAnimation and then the configuration object. In our config object we have the following options:

toValue: the new value we are animating to.
duration: lenght of animation in milliseconds
useNativeDriver: allows native code to perform the animation on the UI thread.

To trigger a change, we need to call start method as we have it in our source code.

Also where we are rendering our UI we have replaced the View component with Animated.View component. The Animated library wraps around the normal View element

The call the animateElement function in our TouchableWithoutFeedback button component. Where it is passed into the onPress function props.

Clicking within the box area would trigger our animations, allowing it to fade out from 0.5 to 0 and then fade in from 0 to 1 for 1500 milliseconds on both calls.

Here is a demo of the app:

Summary

A good use case where this can be applied is in a Button component, a Checkbox component, and a Radio Button component. You will find this implementation useful for achieving visual effects appealing to the user when interacting with your apps.

Thanks for stopping by, hope you find this tutorial useful.

Cheers!!!

Setup Vanilla React Native with TypeScript

Paul Oloyede — Mon, 11 Apr 2022 14:50:08 +0000

An attempt to create a simple react native typescript project without the bells and whistles you get when using a template or boilerplate, seen to be a challenge and hardly is there any tutorial that covers these steps vividly.

So, while at it I enjoyed creating this blogpost and solving the problem highlighted above, hopefully you will enjoy it too!

A Little Backstory about React Native and TypeScript

React Native is an exciting framework that enables web developers to create robust mobile applications using their existing JavaScript knowledge. It offers faster mobile development, and more efficient code sharing across iOS, Android, and the Web, without sacrificing the end user’s experience or application quality.

It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.
Web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

TypeScript is a superset of the JavaScript language that has a single open-source compiler and is developed mainly by a single vendor: Microsoft. The goal of TypeScript is to help catch mistakes early through a type system and to make JavaScript development more efficient.

Requirements

Basic knowledge of JavaScript
Basic knowledge of React
Basic knowledge of running CLI commands
Node.js and npm installed on your machine
XCode or Android Studio installed on your machine
Some experience with React Native (suggested, not required)

Getting Started

The first step is to install and initialise a project and it's dependencies. To achieve that we run this command in the terminal:

npx react-native init Foobaz

The above commands creates a project with the name Foobaz with the basic setup to run our JavaScript files.

Now that we have setup the project, here is what we get out of the box:

The project created here gives us a barebone structure for pure JavaScript files or source code.
So we have to integrate TypeScript.

Integrate TypeScript

The next thing is to add typescript to our app. We add these packages @types/react @types/react-native react-native-typescript-transformer and integrate into our app:

yarn add typescript -D @types/react @types/react-native  react-native-typescript-transformer

.ts is the default file extension while .tsx is a special extension used for files which contain JSX

Now that we've installed these packages, in our project root, we rename this file App.js to App.tsx, so we are able to write TypeScript code and let the compiler transform our source code.

The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called tsconfig.json.

Let's add a tsconfig.json file in the root of our project and paste in the following content:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Compiling TypeScript Source Code

In our App.tsx file, you can replace the source code in there with the one below, where we are using the fetch api to pull users list and displaying in our app.

import React from 'react';
import {useState, useEffect} from 'react';
import {
  FlatList,
  ActivityIndicator,
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  Pressable,
  Image,
} from 'react-native';


type DataItem = {
  id: string;
  first_name: string;
  last_name: string;
  email: string;
  avatar: string;
};


const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState<DataItem[]>([]); //set the type of what the hook expects to be an array of DataItem.

  useEffect(() => {
    fetch('https://reqres.in/api/users?page=2')
      .then(response => response.json())
      .then((responseJson: {data: any}) => {
        setIsLoading(false);
        setDataSource(responseJson?.data);

      })
      .catch(error => {
        setIsLoading(false);
        // do something with the error...
      });
  }, []);

  if (isLoading) {
    return (
      <View
        style={{flex: 1, padding: 20, marginTop: 40, backgroundColor: 'white'}}>
        <ActivityIndicator />
      </View>
    );
  }
  return (
    <SafeAreaView
      style={styles.safeArea}>
      <FlatList
        data={dataSource}
        renderItem={({item}) => (
          <Pressable
          onPress={() => null}
          style={styles.cardContainer}>
          <View
            style={styles.cardContent}>
            <Image
              source={{uri: item?.avatar}}
              style={styles.avatar}
            />
            <View>
              <Text style={{color: '#000'}}>{item?.first_name} {item?.last_name}</Text>
            </View>
          </View>
        </Pressable>
        )}
        keyExtractor={({id}, index) => id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'white',
    flex: 1,
    marginTop: 80,
    marginHorizontal: 16,
  },
  avatar: {
    height: 60,
    width: 55,
    marginLeft: 16,
    marginRight: 15,
    borderRadius: 35,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardContainer: {
    marginBottom: 10,
    flexDirection: 'row',
    paddingVertical: 16,
    backgroundColor: '#EEEFF2',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8,
    shadowColor: '#EEEFF2',
    shadowRadius: 50,
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.1,
    elevation: 5,
  },
  cardContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  }
});

export default App;

In our App.tsx on line 15 we construct a data type to define the users list expected from our api endpoint.

On line 25 we declare a useState hook for conditional rendering to check if the data has loaded.

Also, on line 26 we declare a useState hook to hold our data to be rendered in our UI. We specified that the hook should accept an array of DataItem.

On line 53 we use the FlatList component, in-built into the react native package to display our UI.
FlatList is used to render list of data with minimal effort.

Running Our App

Let's navigate to the root folder in our project from a code editor and run the commands below to build the UI and start the application:

# MacOS
yarn run ios

# Windows/Linux
yarn run android

This is what our app should look like:

You can view the source code on GitHub here

Conclusion

Hurray!!! We are done at the moment.

Hope you enjoyed the tutorial and you were able to follow through without any errors?

Would appreciate your comments and suggestions about the tutorial in comment box.

Also, you can reach me on twitter @ayopaulofficial and on LinkedIn at Paul Oloyede

Thanks for Reading.