{"id":4808,"url":"https://github.com/hybriteq/react-native-floating-bubble","last_synced_at":"2025-08-04T02:31:51.564Z","repository":{"id":38954942,"uuid":"196380990","full_name":"hybriteq/react-native-floating-bubble","owner":"hybriteq","description":"A simple Facebook Chat Head like bubble for react native","archived":false,"fork":false,"pushed_at":"2023-09-06T08:57:20.000Z","size":2426,"stargazers_count":216,"open_issues_count":38,"forks_count":62,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-08-03T03:03:46.905Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hybriteq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-07-11T11:25:35.000Z","updated_at":"2025-07-23T09:26:42.000Z","dependencies_parsed_at":"2024-01-08T01:40:19.065Z","dependency_job_id":"42b3e978-3ee2-4b10-a50d-66ff309e94b9","html_url":"https://github.com/hybriteq/react-native-floating-bubble","commit_stats":{"total_commits":39,"total_committers":7,"mean_commits":5.571428571428571,"dds":0.2564102564102564,"last_synced_commit":"224824d41bf25e6fa736992ac550f5914dae3354"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/hybriteq/react-native-floating-bubble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybriteq%2Freact-native-floating-bubble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybriteq%2Freact-native-floating-bubble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybriteq%2Freact-native-floating-bubble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybriteq%2Freact-native-floating-bubble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hybriteq","download_url":"https://codeload.github.com/hybriteq/react-native-floating-bubble/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hybriteq%2Freact-native-floating-bubble/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268639931,"owners_count":24282678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:24.833Z","updated_at":"2025-08-04T02:31:51.180Z","avatar_url":"https://github.com/hybriteq.png","language":"Java","funding_links":[],"categories":["Components"],"sub_categories":["Extension"],"readme":"\n# react-native-floating-bubble\n\n\nA simple Facebook Chat Head like bubble for react native. Special thanks to [bubble-for-android](https://github.com/txusballesteros/bubbles-for-android) because this is just react native wrapper for that library. \n\n![Preview](https://github.com/hybriteq/react-native-floating-bubble/raw/master/preview.gif)\n\n\n\n\n## Installation\n\n`$ npm install react-native-floating-bubble --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-floating-bubble`\n\n### Manual installation\n\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import com.reactlibrary.RNFloatingBubblePackage;` to the imports at the top of the file\n  - Add `new RNFloatingBubblePackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-floating-bubble'\n  \tproject(':react-native-floating-bubble').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-floating-bubble/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-floating-bubble')\n  \t```\n\n\n#### iOS\n\n1. This library is not supported for iOS. This functionality is not there.\n\n## Usage\n\n### Methods\n\n```javascript\nimport { showFloatingBubble, hideFloatingBubble, requestPermission, initialize } from \"react-native-floating-bubble\"\n\n// To display the bubble over other apps you need to get 'Draw Over Other Apps' permission from androind.\n// If you initialize without having the permission App could crash\nrequestPermission()\n\t.then(() =\u003e console.log(\"Permission Granted\"))\n\t.catch(() =\u003e console.log(\"Permission is not granted\"))\n\t\n// Initialize bubble manage\ninitialize()\n\t.then(() =\u003e console.log(\"Initialized the bubble mange\"))\n\n\n// Show Floating Bubble: x=10, y=10 position of the bubble\nshowFloatingBubble(10, 10)\n\t.then(() =\u003e console.log(\"Floating Bubble Added\"));\n\n// Hide Floatin Bubble\nhideFloatingBubble()\n\t.then(() =\u003e console.log(\"Floating Bubble Removed\"));\n```\n### Events\n\nYou can listen to bubble press and bubble remove events using `DeviceEventEmitter`. \n\nEvents: `floating-bubble-press`, `floating-bubble-remove`\n\n```javascript\n    DeviceEventEmitter.addListener(\"floating-bubble-press\", (e) =\u003e {\n\t\t// What to do when user press the bubble\n\t\tconsole.log(\"Press Bubble\")\n    });\n    DeviceEventEmitter.addListener(\"floating-bubble-remove\", (e) =\u003e {\n\t\t// What to do when user removes the bubble\n\t\tconsole.log(\"Remove Bubble\")\n    });\n```\n\n\n  ### Change Bubble Icon\n\n Place the icon file as `android/app/src/main/res/drawable/bubble_icon.png` \n \n\n ## Contribute \n\n If you want to contribute the source code is here.\n  https://github.com/hybriteq/react-native-floating-bubble\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhybriteq%2Freact-native-floating-bubble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhybriteq%2Freact-native-floating-bubble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhybriteq%2Freact-native-floating-bubble/lists"}