React-native-lista-selecao-suspensa NPM

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

$ 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 arrayobject	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 arrayobject	Passar opção selecionada por padrão String para ListaSelecao OU arrayobject 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