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

An easy-to-use customizable bubble animation picker, similar to the Apple Music genre selection

• iOS & Android Support (In beta)
• Typescript Support
• Customizable

Advanced Example

Install the library using either yarn or npm like so:

yarn add react-native-bubble-select

npm install --save react-native-bubble-select

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

For versions below 0.60.0, use rnpm links

• Run react-native link react-native-bubble-select
• If linking fails, follow the manual linking steps

This 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:

All you have to do is:

• File > New > File
• Swift File
• Name the file whatever you wish
• When prompted to create a bridging header, do so

You must also include use_frameworks! at the top of your Podfile

Note as of version 0.5.0, android support is experimental.

For versions below 0.60.0, follow the linking instructions above.

You can view the example project for more usage.

import React from 'react';
import BubbleSelect, { Bubble } from 'react-native-bubble-select';
import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const App = () => {
  return (
    <BubbleSelect
      onSelect={bubble => console.log('Selected: ', bubble.id)}
      onDeselect={bubble => console.log('Deselected: ', bubble.id)}
      width={width}
      height={height}
    >
      <Bubble id="bubble-1" text="Bubble One" />
      <Bubble id="bubble-2" text="Bubble Two" />
      <Bubble id="bubble-3" text="Bubble Three" />
      <Bubble id="bubble-4" text="Bubble Four" />
    </BubbleSelect>
  );
};

import React from 'react';
import { Platform, Dimensions } from 'react-native';
import BubbleSelect, { Bubble, BubbleNode } from 'react-native-bubble-select';
import randomCities from './randomCities';

const { width, height } = Dimensions.get('window');

const App = () => {
  const [cities, setCities] = React.useState(randomCities());
  const [selectedCites, setSelectedCities] = React.useState<BubbleNode[]>([]);
  const [removedCities, setRemovedCities] = React.useState<BubbleNode[]>([]);

  const addCity = () => {
    setCities([...cities, randomCity()]);
  };

  const handleSelect = (bubble: BubbleNode) => {
    setSelectedCities([...selectedCites, bubble]);
  };

  const handleDeselect = (bubble: BubbleNode) => {
    setSelectedCities(selectedCites.filter(({ id }) => id !== bubble.id));
  };

  const handleRemove = (bubble: BubbleNode) => {
    setRemovedCities([...removedCities, bubble]);
  };

  return (
    <BubbleSelect
      onSelect={handleSelect}
      onDeselect={handleDeselect}
      onRemove={handleRemove}
      width={width}
      height={height}
      fontName={Platform.select({
        ios: 'SinhalaSangamMN-Bold',
      })}
      fontSize={16}
    >
      {cities.map(city => (
        <Bubble
          key={city.id}
          id={city.id}
          text={city.text}
          color={city.color}
          selectedColor={city.selectedColor}
          selectedScale={city.selectedScale}
        />
      ))}
    </BubbleSelect>
  );
};

Note all required fields must be provided else the application will crash.

• The iOS version is based off of Magnetic
• The Android version is based off of Bubble-Picker

• on certain occasions only half of the bubbles are shown on the screen #2

• the title of each bubble must be unique else the wrong element may be returned
• hot reloading does not work #3
• selection handlers are not triggered
• after 5 items are selected, the picker rests, likewise with removed.

• enable support for images

• enable long press to remove
• auto size bubble based on content
• enable support for images

• Improve documentation
• Unit tests
• Flow support

MIT