React Native Bubble Select

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

Features

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

iOS Example

Advanced Example

Android Example

Installation

Install the library using either yarn or npm like so:

yarn add react-native-bubble-select

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

iOS Installation

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

Additional 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

Android Installation

Note as of version 0.5.0, android support is experimental.

For versions below 0.60.0, follow the linking instructions above.

Usage

You can view the example project for more usage.

Simple 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>
  );
};

Advanced Usage

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>
  );
};

Props

Common Props

iOS Only Props

Android Only Props

Gradient

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

Acknowledgments

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

Known Issues

iOS

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

Android

• 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.

Roadmap

iOS

• [ ] enable support for images

Android

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

General

• [ ] Improve documentation
• [ ] Unit tests
• [ ] Flow support

License

MIT