[React Native] react-native-floating-bubble

# React Native에서 Floating Bubble UI 사용 방법

- 안드로이드 기기에서 페이스북 채팅 기능을 사용하다보면, 아래와 같은 아이콘을 볼 수 있습니다. 앱이 백그라운드에 있어도, 사용자와 상호작용할 수 있기 때문에, 필요에 따라 유용할 것 같습니다. 이와 같은 기능을 React Native에서 개발하기 위한 라이브러리를 소개하려고 합니다

 

---

# react-native-floating-bubble

- 본 라이브러리는 bubbles-for-android를 React Native 용으로 Wrapping한 라이브러리 입니다

---

사용 예시

 

---

# 사용 방법

- 설치

---

npm install react-native-floating-bubble --save 
// yarn add react-native-floating-bubble

---

- 권한 요청, 초기화, 버블 UI 보여주기, 숨기기

---

import { showFloatingBubble, hideFloatingBubble, requestPermission, initialize } from "react-native-floating-bubble"

// To display the bubble over other apps you need to get 'Draw Over Other Apps' permission from androind.
// If you initialize without having the permission App could crash
requestPermission()
	.then(() => console.log("Permission Granted"))
	.catch(() => console.log("Permission is not granted"))
	
// Initialize bubble manage
initialize()
	.then(() => console.log("Initialized the bubble mange"))


// Show Floating Bubble: x=10, y=10 position of the bubble
showFloatingBubble(10, 10)
	.then(() => console.log("Floating Bubble Added"));

// Hide Floatin Bubble
hideFloatingBubble()
	.then(() => console.log("Floating Bubble Removed"));

---

- 버블 UI 이벤트 핸들링

---

DeviceEventEmitter.addListener("floating-bubble-press", (e) => {
    // What to do when user press the bubble
    console.log("Press Bubble")
});

DeviceEventEmitter.addListener("floating-bubble-remove", (e) => {
    // What to do when user removes the bubble
    console.log("Remove Bubble")
});

---

- 버블 아이콘 변경은 android/app/src/main/res/drawable/bubble_icon.png 파일을 변경하면 됩니다. Facebook Chat과 같이 아이콘의 이미지를 동적으로 변경하는 기능은 아직 지원하지 않는 것으로 보입니다. 사용에 참고하시기 바랍니다.

※ 본 포스팅에는 소개하고자 하는 라이브러리의 웹사이트의 문서 및 관련 이미지를 참조하였습니다. 문제가 있을 경우 삭제하겠습니다.