# React Native FacePile Component

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055481507/34d573b0-8138-4fbd-8cf1-b7afbb82588b.png align="left")

### 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:

```javascript
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:

```javascript
react-native run-android
```

Now you will see the output like below:

<iframe src="https://www.youtube.com/embed/sZMtAvmk52I?feature=oembed" width="640" height="480"></iframe>

### Congratulations!

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

### Happy Learning!!!!