react-native-chat-head is a React Native library that allows you to create Facebook Messenger-like chat heads for Android applications.
- Create customizable chat heads
- Display badges on chat heads
- Request and manage overlay permissions
- Simple API to show, hide, and update chat heads
To install the package, use npm or yarn:
npm install react-native-chat-head
# or
yarn add react-native-chat-headCreate android/app/src/main/res/layout/chat_head_layout.xml with the following content:
<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="65dp"
android:id="@+id/chat_head_root"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<!-- Profile image for the chat head. -->
<ImageView
android:id="@+id/chat_head_profile_iv"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="8dp"
android:src="@mipmap/ic_launcher"
tools:ignore="ContentDescription"
/>
<!-- Close button -->
<ImageView
android:id="@+id/close_btn"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="40dp"
android:src="@drawable/ic_close"
tools:ignore="ContentDescription"
/>
<!-- Chat head badge -->
<TextView
android:id="@+id/chat_head_badge"
android:layout_margin="5dp"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_alignParentStart="true"
android:text="1"
/>
</RelativeLayout>Create android/app/src/main/res/layout/dismiss_icon_layout.xml with the following content:
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
>
<!-- Dismiss icon -->
<ImageView
android:id="@+id/dismiss_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="bottom|center_horizontal"
android:src="@android:drawable/ic_menu_close_clear_cancel"
android:layout_marginBottom="16dp"
/>
</RelativeLayout>Add an image named ic_close.png in android/app/src/main/res/drawable-nodpi.
Import the library and use the provided methods to manage chat heads:
import ChatHead from "react-native-chat-head";
// Check if overlay permission is granted
const hasPermission = await ChatHead.checkOverlayPermission();
// Request overlay permission
await ChatHead.requestPermission();
// Show chat head
ChatHead.showChatHead();
// Hide chat head
ChatHead.hideChatHead();
// Update chat badge count
ChatHead.updateChatBadgeCount(1);checkOverlayPermission(): Checks if the overlay permission is granted. Returns a boolean.requestPermission(): Requests the overlay permission from the user.showChatHead(): Displays the chat head.hideChatHead(): Hides the chat head.updateChatBadgeCount(count): Updates the badge count on the chat head.
We welcome contributions! Please see the contributing guide to learn how to get involved.
This project is licensed under the MIT License. See the LICENSE file for more details.