# Push Notifications

Referd uses Firebase to deliver maximum experience in your app. This includes push notifications, interactive in-app messaging.

![](https://983627972-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1bAQ4IvAKNqrQlsRN5b4%2Fuploads%2Fgit-blob-a66f2be73d572c61caf08b67884cf8000620a8ae%2Fimage%20\(11\).png?alt=media)

### Configure Referd With Your Firebase

Before you start, you must configure your Firebase on your **Referd** account. Follow the steps in [Configure your Firebase account on Referd for mobile push notifications](https://help.tryreferd.com/en/articles/8668480-get-your-referd-integration-details) article from our Help Center related to push notifications.

### Handling Push Notifications Integration

For notifications handling, add this code to the **`onNotification`** function in your app:

```typescript
onNotification: (notification) => {
// you need to check the platform because firebase send the notification based on the platform

if (Platform.OS === 'android') { // Android
          if(notification.isGB){
                  // send notification direct to InAppNotification as described below
          }
        }
        else { // IOS
          if (notification.data.isGB) {
                  // send notification.data to InAppNotification as described below
          }
        }
}
```

Import **InAppNotification**

```typescript
import {InAppNotification} from 'react-native-gameball';
```

**InAppNotification** takes the following properties:

| Parameter      | Required     | Description                                         | Type         |
| -------------- | ------------ | --------------------------------------------------- | ------------ |
| `notification` | **Required** | Pass the notification data received from the server | Notification |

You can use it in different two ways: one is by adding it directly underneath the main app like shown.

```jsx
<Provider>
    <AppNavigator>
    <InAppNotification 
      notification={this.props.notification}
    />
</Provider>
```

Another approach is to have a separate component which handles the InAppNotification component and pass to it the data directly.

{% code title="SeparateComponent.tsx" %}

```jsx
render(){
    return(
    <InAppNotification
        readnotification={this.props.notification}
    />
   )
}
```

{% endcode %}

After that, add it underneath your main app component as follows.

```jsx
<Provider>
        <AppNavigator />
        <SeparateComponent/>
</Provider>
```

Your users can now receive push notifications from **Referd**.