react-native-sticky-notification
Customizable Sticky Notification for Android, that contains maximum of five clickable buttons. This act as a Service in android. You have to use the buttons respectively for any operataions in your react native project.
Installation
Step 1
npm install react-native-sticky-notification
Step 2
Go to your android/app/src/main/AndroidManifest.xml
and then add Permissions for Foreground Service in your AndroidManifest.xml
as below.
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.BROADCAST_CLOSE_SYSTEM_DIALOGS" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
Step 3
Go to your android/app/src/main/AndroidManifest.xml
and then Register Service by adding this line inside application tag
<application>
....
<service android:name="com.stickynotification.StickyNotificationService" android:enabled="true" android:foregroundServiceType="shortService"/>
</application>
Step 4
Go to your android/app/src/main/res/drawable
. If the res
and drawable
directories does not exist, then you have to create it and continue the below steps.
Add the Image resources (uses for buttons background images) inside the drawable
directory.
Step 5
Go to your android/app/src/main/res/layout
. If the layout
directory does not exist inside the res
directory, then you have to create it and continue the below steps.
Create an xml file inside the layout
directory, and the file name should be notification_panel.xml
, then copy and paste the below code to the notification_panel.xml
file and make the changes mentioned as comments in the below code.
This is the Notification Appearance Design in the Notification Panel.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/b1"
<!-- ID should be same -->
android:layout_margin="10dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_1"
<!-- ID should be same -->
android:layout_gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginHorizontal="10dp"
android:src="@drawable/record"/>
<TextView
android:id="@+id/t1"
<!-- ID should be same -->
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/b2"
<!-- ID should be same -->
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_2"
<!-- ID should be same -->
android:layout_gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginHorizontal="10dp"
android:src="@drawable/screenshot"/>
<TextView
android:id="@+id/t2"
<!-- ID should be same -->
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/b3"
<!-- ID should be same -->
android:layout_margin="10dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_3"
<!-- ID should be same -->
android:layout_gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginHorizontal="10dp"
android:src="@drawable/tools"/>
<TextView
android:id="@+id/t3"
<!-- ID should be same -->
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/b4"
<!-- ID should be same -->
android:layout_margin="10dp"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_4"
<!-- ID should be same -->
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginHorizontal="10dp"
android:src="@drawable/home"/>
<TextView
android:id="@+id/t4"
<!-- ID should be same -->
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/b5"
<!-- ID should be same -->
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:id="@+id/icon_5"
<!-- ID should be same -->
android:layout_gravity="center"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginHorizontal="10dp"
android:src="@drawable/exit"/>
<TextView
android:id="@+id/t5"
<!-- ID should be same -->
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
Step 6
Update your MainActivity.java
to use react-native-sticky-notification
via the following changes.
import com.facebook.react.ReactActivity;
import android.content.Intent;
import com.stickynotification.Adapter.StickyNotificationHelper;
public class MainActivity extends ReactActivity {
public boolean isFromMinimized = false;
@Override
public void onNewIntent(Intent intent) {
super.onNewIntent(intent);
isFromMinimized=true;
StickyNotificationHelper.open(intent);
}
@Override
protected void onStart() {
super.onStart();
if(!isFromMinimized){
StickyNotificationHelper.open(getIntent());
}
}
}
Usage
In your App.js
(Root Folder)
Note: You can use this for Navigations
import {
StickyNotificationService,
createChannel,
stopService,
startService,
removeOnClickListener,
isGrantedNotificationPermission
} from 'react-native-sticky-notification';
export const App = () => {
const channelConfig = {
channelId: 'YOUR_CHANNEL_ID',
channelName: 'YOUR_CHANNEL_NAME',
importance: 'default',
totalProcessCount: PROCESS_COUNT,
}
const serviceConfig = {
displayTexts = ['abc', 'def', 'ghi'],
displayIcons = [0, 1, 2, 3, 4],
exitEnabled = false,
icon = 'app-icon',
}
useEffect(() => {
isGrantedNotificationPermission().then(response=>{
console.log(response)
}).catch((error)=>{
console.log(error)
})
return () => {
removeOnClickListener();
};
}, []);
createChannel(channelConfig)
.then((action) => {
console.log(action);
})
.catch((error) => {
console.log(error);
});
startService(serviceConfig)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
stopService()
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
const onPressButton = (clickedButton) => {
console.log(clickedButton);
};
return (
<StickyNotificationService onPressButton={onPressButton} />
);
};
API
Method | Type | Description |
---|
isGrantedNotificationPermission() | Promise | Notification Permission for Android 13 and above. |
createChannel(channelConfig) | Promise | Create the Notification Channel. |
startService(serviceConfig) | Promise | To Start the Notification Service. |
stopService() | Promise | To Stop the Notification Service. |
removeOnClickListener() | Function | To Remove all the Listeners. |
Props
onPressButton
When Clicking the Button on Notification Service,
it will call and returns the name of button as Parameter, which you clicked.
Config
This is an Object Which you pass as parameter to the createChannel()
API.
Key | type | Required | Default |
---|
channelId | String | Yes | |
channelName | String | Yes | |
importance | String | No | "default" |
totalProcessCount | Integer | Yes | |
This is an Object Which you pass as parameter to the startService()
API.
Key | type | Required | Default |
---|
displayTexts | String Array | No | ["b1","b2","b3","b4","b5"] |
displayIcons | Integer Array | No | [0, 1, 2, 3, 4] |
exitEnabled | Boolean | No | false |
icon | String | No | "app-icon" |
Note: Now, Service worked only in app open state. It may solved in the future release
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT