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

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 />.
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.

React Native FacePile Component

Comments

More from this blog

Why Bun is Leaving Zig: The Full Story of the Rust Rewrite

Next.js 16.3 Preview

React Compiler in Rust

Is C++ the Real Engine Behind AI?

Inside the "Mini" Shai-Hulud Supply Chain Crisis

OverView

Objective

1. React Native Project Creation

2. Installing Native Base and Lodash

3. Creating FacePile Component

FacePile.tsx

FacePileStyleSheet.ts

4. Adding the FacePile Component in App.tsx

5. Run the Project

Congratulations!

Happy Learning!!!!

Command Palette

Comments

More from this blog

OverView

Objective

1. React Native Project Creation

2. Installing Native Base and Lodash

3. Creating FacePile Component

FacePile.tsx

FacePileStyleSheet.ts

4. Adding the FacePile Component in App.tsx

5. Run the Project

Congratulations!

Happy Learning!!!!