react-native-lw-notify-headsup

Installation

React-Native-lw-notify can be installed using npm or yarn. Here are the steps to install it.

1. First, open your terminal and navigate to the root directory of your React Native project.
2. If you are using npm, run the following command:

1npm install react-native-lw-notify-headsup
2

If you are using yarn, run the following command instead:

1yarn add react-native-lw-notify-headsup
2

1. In android/app/build.gradle under dependencies {}

1dependencies {
2    implementation("com.facebook.react:react-android")
3    implementation platform('com.google.firebase:firebase-bom:32.5.0')
4    implementation 'com.google.firebase:firebase-analytics'
5    implementation project(':react-native-lw-notify-headsup') // Add this line
6}
7

1. android/settings.gradle

1include ':react-native-lw-notify-headsup'
2project(':react-native-lw-notify-headsup').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lw-notify-headsup/android')

1. AndroidManifest.xml

1<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
2<uses-permission android:name="android.permission.VIBRATE" />
3<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
4<uses-permission android:name="android.permission.WAKE_LOCK" />
5<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
6
7<activity
8		android:name="com.lwnotifyheadsup.FullScreenNotification"
9    android:launchMode="singleTask"
10    android:excludeFromRecents="true"
11    android:exported="true"
12    android:showWhenLocked="true"
13    android:turnScreenOn="true"
14 />
15<service
16  android:name="com.lwnotifyheadsup.LwNotifyService"
17  android:enabled="true"
18  android:stopWithTask="false"
19  android:exported="true" 
20/>

1. In android/build.gradle

1// Top-level build file where you can add configuration options common to all sub-projects/modules.
2
3buildscript {
4    ext {
5        buildToolsVersion = "33.0.0"
6        minSdkVersion = 21
7        compileSdkVersion = 34 //change to 33
8        targetSdkVersion = 33
9        ndkVersion = "23.1.7779620"
10    }
11    repositories {
12        google()
13        mavenCentral()
14    }
15    dependencies {
16        classpath("com.android.tools.build:gradle:7.4.2") // add this version
17        classpath("com.facebook.react:react-native-gradle-plugin")
18    }
19}

Usage example

1import * as React from 'react';
2
3import { StyleSheet, View, Text, Button } from 'react-native';
4import LWNotify from 'react-native-lw-notify-headsup';
5
6export default function App() {
7  const [result, setResult] = React.useState<string>();
8
9  const displayNotiee = () => {
10    const uniqueIds = 'C-04-channel';
11    LWNotify.displayNotification({
12      channelId: uniqueIds,
13      channelName: uniqueIds,
14      notificationSound: 'type1',
15      notificationId: '3432drd',
16      notificationTitle: 'ORDER ALERT',
17      notificationInfo: 'You can 40 sec to choose',
18      timeout: 300000,
19      icon: 'ic_launcher',
20      acceptText: 'Accept',
21      rejectText: 'Reject',
22      notificationColor: 'colorAccent',
23      payload: {
24        key1: 'value1',
25        key2: 'value2',
26      },
27    });
28
29    // Listen to headless action events
30    LWNotify.addEventListener('endCall', (data: any) => {
31      setResult(JSON.stringify(data));
32    });
33
34    LWNotify.addEventListener('answer', (data: any) => {
35      setResult(JSON.stringify(data));
36    });
37
38    LWNotify.addFullScreenEventListener('accept', (data: any) => {
39      setResult(JSON.stringify(data));
40    });
41  };
42
43  return (
44    <View style={styles.container}>
45      <Text>Result payload: {result}</Text>
46      <Button title="PRESS" onPress={displayNotiee} />
47    </View>
48  );
49}
50
51const styles = StyleSheet.create({
52  container: {
53    flex: 1,
54    alignItems: 'center',
55    justifyContent: 'center',
56  },
57  box: {
58    width: 60,
59    height: 60,
60    marginVertical: 20,
61  },
62});