SearchablePicker

Un modal tipo alerta que puede contener cualquier componente.

Uso

import React from "react";
import { View } from "react-native";
import { SearchablePicker, Theme, Text } from "@ga-innoval/react-native-ui";

export function Component() {
  const [selectedFruit, setSelectedFruit] = useState(true);

  return (
    <View style={{ flex: 1 }}>
      <SearchablePicker
        selectedItem={selectedFruit}
        onItemSelected={(item) => setSelectedFruit({ ...item })}
        data={[
          { label: "Banana", value: 0 },
          { label: "Apple", value: 1 },
          { label: "Watermelon", value: 2 },
          { label: "Orange", value: 3 },
          { label: "Lemon", value: 4 },
          { label: "Pineapple", value: 5 },
          { label: "Grape", value: 6 },
          { label: "Avocado", value: 7 },
          { label: "Mango", value: 8 },
        ]}
        text="Selecciona una fruta"
      />
    </View>
  );
}

Props

text

Type: string

Placeholder a mostrar cuando no se ha seleccionado ningún elemento.

data

Type: Array<{ label: string; value: string | number }>

Permite pasar una función que se llamará una vez que se haya descartado el modal.

selectedItem

Type: { label: string; value: string | number }

Elemento seleccionado.

onItemSelected

Función a ejecutar cuando se selecciona un elemento.