React Native in-app notifications.

onDragEvent example
force touch example
  • Compatible with iPhone X, XR, XS, XS Max.
  • Allows you to use your own components.
  • Swipeable
  • Force Touch support
  • Taptic Engine feedback support
  • onDrag gesture event support

Installation

  • Run npm install react-native-in-app-message
  • Run react-native link react-native-in-app-message – required for iOS
  • Run npm install react-native-gesture-handler and follow the linking guide. Required for both platforms

Usage

import {Notification} from "react-native-in-app-message";

...
// Somewhere call
Notification.show(); // if You have one instance
// or ref.show() if You need to show specific instance
...

//It's important to declare Notification component next to root component
//otherwise component will be shown inside the navigator
render() {
    return (
      <React.Fragment>
        <AppNavigator/>
        <Notification text={'Hello world'} onPress={Notification.hide} />
      </React.Fragment>
    )
  }

Methods

  • static show()
  • static hide()
  • ref.show()
  • ref.hide()

Props

  • blurType – must be one of 'xlight' | 'light' | 'dark'. iOS Only
  • blurAmount – number. iOS Only
  • tapticFeedback – boolean. iOS 10 and upper
  • showKnob – boolean. iOS Only
  • duration – number
  • autohide – boolean
  • hideStatusBar – boolean
  • text – string. The text for the message. Required if customComponent is not used.
  • textColor – string.
  • customComponent – ReactNode.
  • onPress – () => void.
  • onDragGestureEvent – (event: PanGestureHandlerGestureEvent) => void.
  • onDragGestureHandlerStateChange – (event: PanGestureHandlerGestureEvent) => void.
  • onForceTouchGestureEvent – (event: ForceTouchGestureHandlerGestureEvent) => void. iOS Only and iPhone 6s and upper
  • onForceTouchHandlerStateChange – (event: ForceTouchGestureHandlerStateChangeEvent) => void. iOS Only and iPhone 6s and upper
  • useForceTouch – boolean. iOS Only and iPhone 6s and upper (default – false)

Modules

  • Notification import {Notification} from "react-native-in-app-message";
  • Blur import {Blur} from "react-native-in-app-message";
  • TapticFeedback import {TapticFeedback} from "react-native-in-app-message";Usage: TapticFeedback.impact();