Lista de seleção do React Native equivalente ao Select do HTML "

• Estilize-o do seu jeito com adereços de estilo de cada vista.
• Desempenho suave em todas as plataformas IOS, Android e Web.
• Alterar família de fontes Facilmente qual seletor de comunidade não tem.
• Zero dependências

Compatibilidade

| iOS | Android | Web | Expo | --------|---------|-----|------| | ✅ | ✅ | ✅ | ✅ |

🔌 Instalação

$ npm install react-native-lista-selecao-suspensa

OU

$ yarn add react-native-lista-selecao-suspensa

#🤩 Uso básico para ListaSelecao

import { ListaSelecao } from 'react-native-lista-selecao-suspensa'

const App = () => {

  const [selecionado, setSelecionado] = React.useState("");
  
  const dados = [
      {chave:'1', valor:'Celulares', desabilitado:true},
      {chave:'2', valor:'Aparelhos'},
      {chave:'3', valor:'Câmeras'},
      {chave:'4', valor:'Computadores', desabilitado:true},
      {chave:'5', valor:'food space'},
      {chave:'6', valor:'inottec'},
      {chave:'7', valor:'vitrine'},
  ]

  return(
    <ListaSelecao
        setSelecionada={(val) => setSelecionado(val)} 
        dados={dados} 
        salvar="valor"
    />
  )

};

🤩 Uso básico para ListaSelecaoMultipla

import { ListaSelecaoMultipla } from 'react-native-lista-selecao-suspensa'

const App = () => {

  const [selecionado, setSelecionado] = React.useState("");
  
  const dados = [
      {chave:'1', valor:'Celulares', desabilitado:true},
      {chave:'2', valor:'Aparelhos'},
      {chave:'3', valor:'Câmeras'},
      {chave:'4', valor:'Computadores', desabilitado:true},
      {chave:'5', valor:'food space'},
      {chave:'6', valor:'inottec'},
      {chave:'7', valor:'vitrine'},
  ]

  return(
    <ListaSelecaoMultipla
        setSelecionada={(val) => setSelecionado(val)} 
        dados={dados} 
        salvar="valor"
        selecionada={selecionado} 
        subtituloListaItens="Categorias"
    />
  )

};

Para ao vivo Demo (Expo Snack)

🔧 Adereços Gerais

Aplicável em ambos os componentes ListaSelecao & ListaSelecaoMultipla

| Nome | Tipo | Descrição | | ---- | ---- | ----------- | | salvar| string | Passe ('chave' ou 'valor') para salvar dados de sua escolha em sua variável de estado local | aoSelecionar| Function | Passe qualquer função que você deseja acionar imediatamente após uma opção ser selecionada | textoCaixaSelecao | String | Texto de espaço reservado que será exibido na caixa de seleção | pesquisar | boolean | Definir como False se você não quiser usar a funcionalidade de pesquisa | maxAltura| Number | Altura máxima do invólucro suspenso a ser ocupado | dados| array OU array[object]| Dados que serão iterados como opções de selecionar lista | setSelecionada| Function | Para Definir o valor da opção que será armazenado em seu estado local | iconePesquisa| JSX Element | Passe qualquer JSX para este acessório como Texto, Imagem ou Ícone para mostrar em vez do ícone de pesquisa | iconeSeta| JSX Element | Passe qualquer JSX para este acessório como Texto, Imagem ou Ícone para mostrar em vez do ícone de divisa | iconeFechar| JSX Element | Passe qualquer JSX para este acessório como Texto, Imagem ou Ícone para mostrar em vez de fechar ícone | textoCampoPesquisar| String | Texto de espaço reservado personalizado para pesquisa TextInput | selecionada| String ou array[object]| Passar opção selecionada por padrão String para ListaSelecao OU array[object] para ListaSelecaoMultipla | fontFamily| string | Passar nome da fonte para aplicar globalmente em cada campo de texto do componente | textoItemNaoEncontrado| string | Passe sua mensagem personalizada se algum resultado da pesquisa retornar vazio | ListaVisivel| boolean | Controle seu estado suspenso (on & off) alterando seu valor para true ou false

🔧 Adereços de estilo geral

Aplicável em ambos os componentes ListaSelecao & MultipleSelectList

| Nome | Tipo | Descrição | | ---- | ---- | ----------- | | estiloCaixaSelecao| Object| Estilos adicionais para caixa de seleção | estiloTextoCaixaSelecao| Object| Estilos adicionais para o texto da caixa de seleção | estiloLista| Object| Estilos adicionais para o modo de exibição de rolagem suspenso | estiloItemLista| Object| Estilos adicionais para item de lista única suspensa | estiloTextoItemLista| Object| Estilos adicionais para texto de itens de lista suspensa | estiloItemDesabilitado| Object| Estilos adicionais para item de lista suspensa desabilitado | estiloTextoItemDesabilitado| Object| Estilos adicionais para texto de itens de lista suspensa desabilitados

🤩 Uso avançado

import { ListaSelecao } from 'react-native-lista-selecao-suspensa'

const App = () => {

   const [selecionado, setSelecionado] = React.useState("");  

   const dados = [      
      {chave:'2', valor:'Aparelhos'},
      {chave:'3', valor:'Câmeras'},
      {chave:'5', valor:'food space'},
      {chave:'6', valor:'inottec'},
      {chave:'7', valor:'vitrine'},
  ]

  return(
    <SelectList 
      aoSelecionar={() => alert(selecionado)}
      setSelecionada={setSelecionado} 
      fontFamily='lato'
      dados={dados}  
      iconeFechar={<FontAwesome name="chevron-down" size={12} color={'black'} />} 
      iconePesquisar={<FontAwesome name="search" size={12} color={'black'} />} 
      pesquisar={false} 
      estiloCaixaSelecao={{borderRadius:0}} 
      selecionada={selecionado}  
    />
  )

};

🤩 Obtendo opções do banco de dados

import { ListaSelecao } from 'react-native-lista-selecao-suspensa'

const App = () => {

  const [selecionado, setSelecionado] = React.useState("");  
  const [dados,setDados] = React.useState([]);
  
  React.useEffect(() => 
    //Obter valores do banco de dados
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        // Armazenar valores na matriz temporária
        let lista = response.data.map((item) => {
          return {chave: item.id, valor: item.name}
        })
        // Definir variável de dados
        setDados(lista)
      })
      .catch((e) => {
        console.log(e)
      })
  ,[])

  return(
    <SelectList setSelecionada={setSelecionado}  dados={dados}  aoSelecionar={() => alert(selecionado)} />
  )

};

🔧 Adereços adicionais

Aplicável somente em ListaSelecaoMultipla

| Nome | Tipo | Descrição | | ---- | ---- | ----------- | | subtituloListaItens| string| Passar qualquer cadeia de caracteres a ser colocada em vez do rótulo padrão

🔧 Adereços de estilo adicionais

Aplicável somente em ListaSelecaoMultipla

| Nome | Tipo | Descrição | | ---- | ---- | ----------- | | estiloCheckBoxDesabilitado| Object| Caixa de seleção de estilos adicionais desabilitada dentro da lista suspensa | estiloCheckBox| Object| Caixa de seleção Estilos adicionais para ativo | estiloTag| Object| Estilos adicionais para emblemas de valores selecionados | estiloTextoTag| Object| Estilos adicionais para Texto de selos de valores selecionados | estiloTituloTag| Object| Estilos adicionais para rótulo de várias listas de seleção

Para ao vivo Demo (Expo Snack)

Felipe Silva