---
title: "React Native SDK: In-app notifications"
description: "Configure in-app notifications for customer messages with the Gleap React Native SDK. Follow the integration code examples."
url: https://docs.gleap.ai/en/articles/506-react-native-sdk-in-app-notifications
collection: "React Native"
updated: 2026-11-01
language: en
---

# React Native SDK: In-app notifications

Configure in-app notifications for customer messages with the Gleap React Native SDK. Follow the integration code examples.

With Gleap, in-app notifications appear directly within the app when a new message is sent to a customer who has the app open. The same applies to news updates.

We also support push notification. Please see the push notifications documentation for more information on it.

## Disable in-app notifications

The following method allows you to disable the in app notifications.

```js
Gleap.setDisableInAppNotifications(true);
```

## Notification container offset

You can adjust the position of the in-app notification container by setting an offset in pixels:

```js
Gleap.setNotificationContainerOffset(x, y);
```

-   **x** – Horizontal offset in pixels (positive values move the container to the right).
    
-   **y** – Vertical offset in pixels (positive values move the container down).
    

## Inline banners

Inline banners (the banner style you pick in the Gleap dashboard) are shown at the top of the screen and cover the status bar. Floating banners float above the app as a card. By default both overlay your app. To push your app down below inline banners instead, like inline banners on the web, wrap it in `GleapBannerArea` (SDK 19.3.0 or later):

```tsx
import Gleap, { GleapBannerArea } from 'react-native-gleapsdk';

export default function App() {
  return (
    <GleapBannerArea>
      <NavigationContainer>
        <AppScreens />
      </NavigationContainer>
    </GleapBannerArea>
  );
}
```

While an inline banner is shown, the content moves down by the banner's height (animated) and back up when the banner closes. Floating banners still float.

The banner already covers the status bar, so screens that add the top safe-area inset themselves (React Navigation headers, `SafeAreaView`) would leave a gap below it. With `react-native-safe-area-context`, pass on the inset that is left:

```tsx
import { SafeAreaInsetsContext, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useGleapBannerHeight } from 'react-native-gleapsdk';

function BannerSafeArea({ children }) {
  const insets = useSafeAreaInsets();
  const bannerHeight = useGleapBannerHeight();
  return (
    <SafeAreaInsetsContext.Provider value={{ ...insets, top: Math.max(0, insets.top - bannerHeight) }}>
      {children}
    </SafeAreaInsetsContext.Provider>
  );
}
```

`useGleapBannerHeight()` returns the height (points on iOS, dp on Android, from the top edge; 0 while no inline banner is shown). `Gleap.getBannerHeight()` and the `bannerHeightChanged` listener (`Gleap.registerListener('bannerHeightChanged', callback)`) give the same value.

## Related

- [React Native SDK setup](https://docs.gleap.ai/en/articles/499-react-native-sdk-setup.md)
- [React Native SDK: User identity](https://docs.gleap.ai/en/articles/500-react-native-sdk-user-identity.md)
- [React Native SDK: Track events](https://docs.gleap.ai/en/articles/501-react-native-sdk-track-events.md)
- [React Native SDK: Track pages](https://docs.gleap.ai/en/articles/502-react-native-sdk-track-pages.md)
- [React Native SDK: Frontend tools](https://docs.gleap.ai/en/articles/503-react-native-sdk-frontend-tools.md)