{"id":14974345,"url":"https://github.com/jesster2k10/react-native-bubble-select","last_synced_at":"2025-04-09T20:03:52.349Z","repository":{"id":40288257,"uuid":"251074877","full_name":"jesster2k10/react-native-bubble-select","owner":"jesster2k10","description":"An easy-to-use customizable bubble animation picker, similar to the Apple Music genre selection","archived":false,"fork":false,"pushed_at":"2023-03-04T09:10:12.000Z","size":24094,"stargazers_count":136,"open_issues_count":43,"forks_count":37,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T20:03:45.048Z","etag":null,"topics":["animation","apple","apple-music","bubble","bubble-picker","music","picker","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/jesster2k10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-29T16:11:32.000Z","updated_at":"2025-03-01T12:41:44.000Z","dependencies_parsed_at":"2024-06-21T14:36:27.987Z","dependency_job_id":null,"html_url":"https://github.com/jesster2k10/react-native-bubble-select","commit_stats":{"total_commits":64,"total_committers":5,"mean_commits":12.8,"dds":0.125,"last_synced_commit":"5e6b091e3ed7f243d87ded8b85880a7dbf68de89"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesster2k10%2Freact-native-bubble-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesster2k10%2Freact-native-bubble-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesster2k10%2Freact-native-bubble-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesster2k10%2Freact-native-bubble-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jesster2k10","download_url":"https://codeload.github.com/jesster2k10/react-native-bubble-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103864,"owners_count":21048245,"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","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":["animation","apple","apple-music","bubble","bubble-picker","music","picker","react","react-native"],"created_at":"2024-09-24T13:50:25.691Z","updated_at":"2025-04-09T20:03:52.319Z","avatar_url":"https://github.com/jesster2k10.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Bubble Select\n\n\u003e This project is mostly `stale` at the moment. I haven't had time to maintain it, so the code is outdated. Feel free to open a pull request though and I will try review it once I get the chance to\n\nAn easy-to-use customizable bubble animation picker, similar to the Apple Music genre selection\n\n![Screenshot](./screenshot.png)\n\n## Features\n\n- iOS \u0026 Android Support (In beta)\n- Typescript Support\n- Customizable\n\n## iOS Example\n\n![iOS Demo](./Bubble-select-ios.gif)\n\nAdvanced Example\n\n![Advanced iOS Demo](./advanced-example.gif)\n\n## Android Example\n\n![Android Demo](./android-example.gif)\n\n## Installation\n\nInstall the library using either yarn or npm like so:\n\n```sh\nyarn add react-native-bubble-select\n```\n\n```sh\nnpm install --save react-native-bubble-select\n```\n\n### iOS Installation\n\nIf you're using React Native versions \u003e 60.0, it's relatively straightforward.\n\n```sh\ncd ios \u0026\u0026 pod install\n```\n\nFor versions below 0.60.0, use rnpm links\n\n- Run `react-native link react-native-bubble-select`\n- If linking fails, follow the\n  [manual linking steps](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)\n\n#### Additional Steps\n\nThis library was written in Swift, so in-order for you app to compile, you need to have at least on .swift file in your source code a bridging header to avoid a runtime error like so:\n\n![swift error](./swift-error.png)\n\nAll you have to do is:\n\n- File \u003e New \u003e File\n- Swift File\n- Name the file whatever you wish\n- When prompted to create a bridging header, do so\n\nYou must also include `use_frameworks!` at the top of your `Podfile`\n\n### Android Installation\n\n\u003e **Note** as of version 0.5.0, android support is experimental.\n\nFor versions below 0.60.0, follow the linking instructions above.\n\n## Usage\n\nYou can view the [example project](./example/src/App.tsx) for more usage.\n\n### Simple Usage\n\n```js\nimport React from 'react';\nimport BubbleSelect, { Bubble } from 'react-native-bubble-select';\nimport { Dimensions } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst App = () =\u003e {\n  return (\n    \u003cBubbleSelect\n      onSelect={bubble =\u003e console.log('Selected: ', bubble.id)}\n      onDeselect={bubble =\u003e console.log('Deselected: ', bubble.id)}\n      width={width}\n      height={height}\n    \u003e\n      \u003cBubble id=\"bubble-1\" text=\"Bubble One\" /\u003e\n      \u003cBubble id=\"bubble-2\" text=\"Bubble Two\" /\u003e\n      \u003cBubble id=\"bubble-3\" text=\"Bubble Three\" /\u003e\n      \u003cBubble id=\"bubble-4\" text=\"Bubble Four\" /\u003e\n    \u003c/BubbleSelect\u003e\n  );\n};\n```\n\n### Advanced Usage\n\n```tsx\nimport React from 'react';\nimport { Platform, Dimensions } from 'react-native';\nimport BubbleSelect, { Bubble, BubbleNode } from 'react-native-bubble-select';\nimport randomCities from './randomCities';\n\nconst { width, height } = Dimensions.get('window');\n\nconst App = () =\u003e {\n  const [cities, setCities] = React.useState(randomCities());\n  const [selectedCites, setSelectedCities] = React.useState\u003cBubbleNode[]\u003e([]);\n  const [removedCities, setRemovedCities] = React.useState\u003cBubbleNode[]\u003e([]);\n\n  const addCity = () =\u003e {\n    setCities([...cities, randomCity()]);\n  };\n\n  const handleSelect = (bubble: BubbleNode) =\u003e {\n    setSelectedCities([...selectedCites, bubble]);\n  };\n\n  const handleDeselect = (bubble: BubbleNode) =\u003e {\n    setSelectedCities(selectedCites.filter(({ id }) =\u003e id !== bubble.id));\n  };\n\n  const handleRemove = (bubble: BubbleNode) =\u003e {\n    setRemovedCities([...removedCities, bubble]);\n  };\n\n  return (\n    \u003cBubbleSelect\n      onSelect={handleSelect}\n      onDeselect={handleDeselect}\n      onRemove={handleRemove}\n      width={width}\n      height={height}\n      fontName={Platform.select({\n        ios: 'SinhalaSangamMN-Bold',\n      })}\n      fontSize={16}\n    \u003e\n      {cities.map(city =\u003e (\n        \u003cBubble\n          key={city.id}\n          id={city.id}\n          text={city.text}\n          color={city.color}\n          selectedColor={city.selectedColor}\n          selectedScale={city.selectedScale}\n        /\u003e\n      ))}\n    \u003c/BubbleSelect\u003e\n  );\n};\n```\n\n## Props\n\n### Common Props\n\n| property        | type   | required | description                                                            | default      |\n| --------------- | ------ | -------- | ---------------------------------------------------------------------- | ------------ |\n| id              | string | TRUE     | A custom identifier used for identifying the node                      | -            |\n| text            | string | TRUE     | The text of the bubble. **Note: on android the text must be unique**   | -            |\n| color           | string | FALSE    | The background color of the bubble                                     | black        |\n| radius          | number | FALSE    | The radius of the bubble. This value is ignored if autoSize is enabled | 30           |\n| fontName        | string | FALSE    | The name of the custom font applied to the bubble                      | Avenir-Black |\n| fontSize        | number | FALSE    | The size of the custom font applied to the bubble                      | 13           |\n| fontColor       | string | FALSE    | The color of the bubble text                                           | white        |\n| backgroundColor | string | FALSE    | The background color of the picker                                     | white        |\n\n### iOS Only Props\n\n| property          | type     | required | description                                                                                                                                    | default      |\n| ----------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| id                | string   | TRUE     | A custom identifier used for identifying the node                                                                                              | -            |\n| text              | string   | TRUE     | The text of the bubble. **Note: on android the text must be unique**                                                                           | -            |\n| color             | string   | FALSE    | The background color of the bubble                                                                                                             | black        |\n| radius            | number   | FALSE    | The radius of the bubble. This value is ignored if autoSize is enabled                                                                         | 30           |\n| marginScale       | number   | FALSE    | The margin scale applied to the physics body of the bubble. **recommend that you do not change this value unless you know what you are doing** | 1.01         |\n| fontName          | string   | FALSE    | The name of the custom font applied to the bubble                                                                                              | Avenir-Black |\n| fontSize          | number   | FALSE    | The size of the custom font applied to the bubble                                                                                              | 13           |\n| fontColor         | string   | FALSE    | The color of the bubble text                                                                                                                   | white        |\n| lineHeight        | number   | FALSE    | The line height of the bubble. This value is ignored if autoSize is enabled                                                                    | 1.5          |\n| borderColor       | string   | FALSE    | The border color of the buble                                                                                                                  | -            |\n| borderWidth       | number   | FALSE    | The border width of the bubble                                                                                                                 | -            |\n| padding           | number   | FALSE    | Extra padding applied to the bubble contents, if autoSize is enabled                                                                           | 20           |\n| selectedScale     | number   | FALSE    | The scale of the selected bubble                                                                                                               | 1.33         |\n| deselectedScale   | number   | FALSE    | The scale of the deselected bubble                                                                                                             | 1            |\n| animationDuration | number   | FALSE    | The duration of the scale animation                                                                                                            | 0.2          |\n| selectedColor     | string   | FALSE    | The background color of the selected bubble                                                                                                    | -            |\n| selectedFontColor | string   | FALSE    | The color of the selected bubble text                                                                                                          | -            |\n| autoSize          | boolean  | FALSE    | Whether or not the bubble should resize to fit its content                                                                                     | TRUE         |\n| initialSelection  | string[] | FALSE    | An id array of the initially selected nodes                                                                                                    | -            |\n\n### Android Only Props\n\n| property          | type     | required | description                                    | default |\n| ----------------- | -------- | -------- | ---------------------------------------------- | ------- |\n| bubbleSize        | number   | FALSE    | The size of all the bubbles                    | -       |\n| gradient          | Gradient | FALSE    | A custom gradient to be applied to the bubbles | -       |\n| maxSelectionCount | number   | FALSE    | The max number of selected bubbles             | -       |\n\n#### Gradient\n\n| property   | type                           | required | description                                    | default |\n| ---------- | ------------------------------ | -------- | ---------------------------------------------- | ------- |\n| startColor | string                         | TRUE     | The size of all the bubbles                    | -       |\n| endColor   | string                         | TRUE     | A custom gradient to be applied to the bubbles | -       |\n| direction  | enum('vertical', 'horizontal') | TRUE     | The direction of the gradient                  | -       |\n\n\u003e **Note** all required fields must be provided else the application will crash.\n\n## Acknowledgments\n\n- The iOS version is based off of [Magnetic](https://github.com/efremidze/Magnetic)\n- The Android version is based off of [Bubble-Picker](https://github.com/igalata/Bubble-Picker)\n\n## Known Issues\n\n### iOS\n\n- on certain occasions only half of the bubbles are shown on the screen #2\n\n### Android\n\n- the title of each bubble must be unique else the wrong element may be returned\n- hot reloading does not work #3\n- selection handlers are not triggered\n- after 5 items are selected, the picker rests, likewise with removed.\n\n## Roadmap\n\n### iOS\n\n- [ ] enable support for images\n\n### Android\n\n- [ ] enable long press to remove\n- [ ] auto size bubble based on content\n- [ ] enable support for images\n\n### General\n\n- [ ] Improve documentation\n- [ ] Unit tests\n- [ ] Flow support\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesster2k10%2Freact-native-bubble-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjesster2k10%2Freact-native-bubble-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesster2k10%2Freact-native-bubble-select/lists"}