1. Visão Geral do Projeto

O react-native-bubble-select é um seletor animado em formato de bolhas, altamente customizável e inspirado na interface de seleção de gêneros do Apple Music. A biblioteca funciona tanto em iOS quanto em Android e inclui suporte a TypeScript. Embora o desenvolvimento ativo do projeto esteja pausado, contribuições via Pull Request ainda são bem-vindas.

Funcionalidadess Principais

• Suporte multiplataforma: iOS e Android (em beta).
• Tipagem TypeScript: Inclui definições de tipos.
• Alta customização: Permite alterar aparência e comportamento das bolhas.
• Projetos de exemplo: Código funcional para ambas as plataformas, facilitando o início.

2. Início Rápido

Instalação

Utilize seu gerenciador de pacotes favorito:

yarn add react-native-bubble-select
# ou
npm install --save react-native-bubble-select

Configuração iOS

Para React Native 0.60.0 ou superior, execute:

cd ios && pod install

Para versões anteriores, use o rnpm para link:

react-native link react-native-bubble-select

Caso falhe, consulte a documentação oficial para link manual.

Configuração Android

A partir da versão 0.5.0, o suporte ao Android é experimental. Para versões do RN abaixo de 0.60.0, siga os mesmos passos de link informados acima.

Exemplo de Uso Básico

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

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

const App = () => {
  return (
    <BubbleSelect
      onSelect={bubble => console.log('Selecionado: ', bubble.id)}
      onDeselect={bubble => console.log('Desselecionado: ', bubble.id)}
      width={width}
      height={height}
    >
      <Bubble id="bolha-1" text="Bolha Um" />
      <Bubble id="bolha-2" text="Bolha Dois" />
      <Bubble id="bolha-3" text="Bolha Três" />
      <Bubble id="bolha-4" text="Bolha Quatro" />
    </BubbleSelect>
  );
};

export default App;

3. Casos de Uso e Boas Práticas

Cenários Comuns

• Seleção de gêneros musicais: Interface similar ao Apple Music.
• Escolha de tags: Usuário seleciona múltiplas palavras-chave.
• Personalização de interesses: Para sistemas de recomendação.

Dicas de Implementação

• Personalização visual: Utilize propriedades como color, fontName e fontSize para alterar o estilo das bolhas.
• Manipulação de eventos: Os callbacks onSelect e onDeselect permitem reagir a cada ação do usuário.
• Performance: Para conjuntos grandes de bolhas, ative a propriedade autoSize para ajustar dinamicamente o tamanho e melhorar a fluidez.

4. Projetos e Ecossistema Relacionado

O react-native-bubble-select pode ser integrado a outras ferramentas do ecossistema React Native:

• React Navigation: Para gerenciar a navegação entre telas.
• Redux: Para controle de estado global.
• React Native Elements: Conjunto de componentes UI que complementa a interface.

Projetos Inspiradores

• Magnetic: Seletor de bolhas para iOS, que serviu de base para esta biblioteca.
• Bubble-Picker: Versão para Android que influenciou a implementação no lado Android.

Ao combinar essas ferramentas, é possível construir aplicações React Native mais completas e com experiência de usuário refinada.