react-native-sticky-notification
v1.4.8
Published
Customizable Sticky Notification for Android
Downloads
44
Readme
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"/> <!-- Add this -->
</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">
<!-- One Button Code Start -->
<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"/> <!-- android:src="@drawable/YOUR_IMAGE_NAME" -->
<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>
<!-- One Button Code End -->
<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"/> <!-- android:src="@drawable/YOUR_IMAGE_NAME" -->
<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"/> <!-- android:src="@drawable/YOUR_IMAGE_NAME" -->
<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"/> <!-- android:src="@drawable/YOUR_IMAGE_NAME" -->
<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"/> <!-- android:src="@drawable/YOUR_IMAGE_NAME" -->
<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;
// ...other imports
import android.content.Intent; //Add this Line
import com.stickynotification.Adapter.StickyNotificationHelper; //Add this Line
public class MainActivity extends ReactActivity {
public boolean isFromMinimized = false; //Add this Line
// ...other code
//Add this....Begin...
@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());
}
}
//...End
//...other code
}
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', //required
channelName: 'YOUR_CHANNEL_NAME', //required
importance: 'default', //1. "high" 2. "low" 3. "default" //default value is "default"
totalProcessCount: PROCESS_COUNT, // Minimum 1 and Maximum 60
}
const serviceConfig = {
displayTexts = ['abc', 'def', 'ghi'], //default value is ["b1","b2","b3","b4","b5"]
displayIcons = [0, 1, 2, 3, 4], //Display Icons indices // Default [0, 1, 2, 3, 4] maximum 5 // same length as displayTexts
exitEnabled = false, //default value is false //If true Service stopped when click the last button
icon = 'app-icon', //1. app-icon 2.app-icon-rounded 3.other //default "app-icon"
}
useEffect(() => {
// ...
isGrantedNotificationPermission().then(response=>{ // Permission for Android 13 and above
console.log(response)
}).catch((error)=>{
console.log(error)
})
return () => {
// ...
removeOnClickListener(); // To remove all listeners
};
}, []);
createChannel(channelConfig)
.then((action) => {
console.log(action); // returns Successfull Message
})
.catch((error) => {
console.log(error); // returns Error if any problem
});
startService(serviceConfig)
.then((res) => {
console.log(res); // returns Successfull Message
})
.catch((err) => {
console.log(err); // returns Error Message
});
stopService()
.then((res) => {
console.log(res); // returns Successfull Message
})
.catch((err) => {
console.log(err); // returns Error Message
});
const onPressButton = (clickedButton) => {
console.log(clickedButton); //returns {"action": CLICKED_BUTTON_NAME ( from serviceConfig.displayTexts which you created above )}.
// Do your operations according to this result...
};
// ...
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.
| Type | Required | | -------- | -------- | | function | Yes |
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