React Native FacePile Component

OverView

A face pile is a group of round avatars combined together in a single row. We will create a simple FacePile component that will receive an array of images and the number of faces to render. Any faces exceeding numFaces, or faces without images, will show up under the overflow (a circle with the remaining number of users that are not displayed).

Objective

• Initialize a React Native project

• Installing Native Base and Lodash

• Creating the FacePile Component

• Adding the FacePile Component in App.tsx

• Running the project

1. React Native Project Creation

Create a React Native Project using the below command:

react-native init project-name -typescript

Once the project is created, navigate to the project directory.

2. Installing Native Base and Lodash

Install the plugins native base and lodash using the below commands:

• npm i native-base (using react-native link once the plugin is installed)

• npm i lodash

3. Creating FacePile Component

Once the plugins are installed create a folder named it FacePile.

Inside the FacePile directory create the below files:

• FacePile.tsx

• FacePileStyleSheet.ts

• index.ts

FacePile.tsx

1. What we have done here is we receive an array of images and using a loop, we will render each item in the array as a <Thumbnail />.

2. Based on the numFaces, we don’t display the faces that exceed this count and instead show a view that displays the number of images hidden.

FacePileStyleSheet.ts

Here we have created styles for the circle as well as the text that should be displayed inside the circle.

4. Adding the FacePile Component in App.tsx

Now we have created the FacePile component, we add it to App.tsx.

Open App.tsx and replace with the below code:

Here we have imported the FacePile component that we created and pass it an array of image URL along with an ID.

5. Run the Project

It’s time to run the project using the command:

react-native run-android

Now you will see the output like below:

Congratulations!

You have learned how to create a FacePile Component in React Native.

Happy Learning!!!!