React Native SDK: In-app notifications

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.

Gleap.setDisableInAppNotifications(true);

Notification container offset

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

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

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:

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.

Get Started

SDKs

Kai Code

Surveys

Server-side event tracking

Guides

React Native SDK: In-app notifications

Disable in-app notifications

Notification container offset

Inline banners

​Disable in-app notifications

​Notification container offset

​Inline banners

Disable in-app notifications

Notification container offset

Inline banners