Crear un picker para Andorid/iOS usando React Native

Tiempo de lectura: 2 minutos

Os voy a enseñar cómo crear un componente picker en Android/iOS con React Native.

Lo primero que tenemos que hacer es importar la librería react-native-picker-select

Para importar esta librería, tenemos que ejecutar estos dos comandos (uno para la librería y otro para la dependencia):

npm install react-native-picker-select

expo install @react-native-picker/picker

Una vez instalada, ya podemos crear el componente. Vamos a crear un nuevo componente y añadir lo siguiente:

import SelectInputPicker from 'react-native-picker-select';

Ahora vamos a crear el render:

   const [valueInput, setValueInput] = useState("");

var arrayLista= [
        { label: "Coches", value: 'coches' },
        { label: "Barcos", value: 'barcos' }
    ];

return (
<SelectInput      
      onValueChange={(value) => setValueInput(value)}
      items={arrayLista}
      />
);

Hemos creado todas las variables necesarias para crear nuestro Picker:

1. Primero creamos un State para poder guardar/actualizar el valor seleccionado en el picker.
2. arrayLista es la lista de valores que queremos que aparezca en el picker (es un JSON).
3. Se crea el componente que hemos importado:
   • onValueChange –> Obtiene el valor que ha seleccionado el usuario.
   • items –> Asigna los valores creados en arrayLista (JSON)

Con esto ya tenemos nuestro componente funcionando en iOS/Android.

Si queremos ponerle un valor por defecto, tendremos que añadir placeholder de la siguiente manera:

placeholder={{ label: "Selecciona un transporte", value: 0 }}

Hay que añadir label, value para que muestre y funcione correctamente el placeholder.

Queda de la siguiente forma:

   const [valueInput, setValueInput] = useState("");

var arrayLista= [
        { label: "Coches", value: 'coches' },
        { label: "Barcos", value: 'barcos' }
    ];

return (
<SelectInput      
      onValueChange={(value) => setValueInput(value)}
      items={arrayLista}
placeholder={{ label: "Selecciona un transporte", value: 0 }}
      />
);