An easy-to-use customizable bubble animation picker, similar to the Apple Music genre selection
MIT License
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
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
react-native link react-native-bubble-select
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:
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>
);
};
property | type | required | description | default |
---|---|---|---|---|
id | string | TRUE | A custom identifier used for identifying the node | - |
text | string | TRUE | The text of the bubble. Note: on android the text must be unique | - |
color | string | FALSE | The background color of the bubble | black |
radius | number | FALSE | The radius of the bubble. This value is ignored if autoSize is enabled | 30 |
fontName | string | FALSE | The name of the custom font applied to the bubble | Avenir-Black |
fontSize | number | FALSE | The size of the custom font applied to the bubble | 13 |
fontColor | string | FALSE | The color of the bubble text | white |
backgroundColor | string | FALSE | The background color of the picker | white |
property | type | required | description | default |
---|---|---|---|---|
id | string | TRUE | A custom identifier used for identifying the node | - |
text | string | TRUE | The text of the bubble. Note: on android the text must be unique | - |
color | string | FALSE | The background color of the bubble | black |
radius | number | FALSE | The radius of the bubble. This value is ignored if autoSize is enabled | 30 |
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 |
fontName | string | FALSE | The name of the custom font applied to the bubble | Avenir-Black |
fontSize | number | FALSE | The size of the custom font applied to the bubble | 13 |
fontColor | string | FALSE | The color of the bubble text | white |
lineHeight | number | FALSE | The line height of the bubble. This value is ignored if autoSize is enabled | 1.5 |
borderColor | string | FALSE | The border color of the buble | - |
borderWidth | number | FALSE | The border width of the bubble | - |
padding | number | FALSE | Extra padding applied to the bubble contents, if autoSize is enabled | 20 |
selectedScale | number | FALSE | The scale of the selected bubble | 1.33 |
deselectedScale | number | FALSE | The scale of the deselected bubble | 1 |
animationDuration | number | FALSE | The duration of the scale animation | 0.2 |
selectedColor | string | FALSE | The background color of the selected bubble | - |
selectedFontColor | string | FALSE | The color of the selected bubble text | - |
autoSize | boolean | FALSE | Whether or not the bubble should resize to fit its content | TRUE |
initialSelection | string[] | FALSE | An id array of the initially selected nodes | - |
property | type | required | description | default |
---|---|---|---|---|
bubbleSize | number | FALSE | The size of all the bubbles | - |
gradient | Gradient | FALSE | A custom gradient to be applied to the bubbles | - |
maxSelectionCount | number | FALSE | The max number of selected bubbles | - |
property | type | required | description | default |
---|---|---|---|---|
startColor | string | TRUE | The size of all the bubbles | - |
endColor | string | TRUE | A custom gradient to be applied to the bubbles | - |
direction | enum('vertical', 'horizontal') | TRUE | The direction of the gradient | - |
Note all required fields must be provided else the application will crash.
MIT