Crear un componente tipo Select (picker) en React Native

Tiempo de lectura: 2 minutos

En el tutorial de React de hoy, os voy a enseñar cómo crear un select (combo o picker) dónde seleccionar distintas opciones.

Lo primero que vamos a hacer es importar la librería que vamos a utilizar (react-native-picker-select):

npm install react-native-picker-select

Una vez importada, vamos a crear el componente, primero hacemos el import:

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

Una vez importado, vamos a crear el render:

const Componente = (props) => {
//Creamos el array de categorias:

    var categoriasPrincipales = [
        { label: Ciencia, value: 'ciencia' },
        { label: Cómic, value: 'comic' },
        { label: Educación, value: 'educacion' },
        { label: Historia, value: 'historicos' },
    ];

//Se añade el componente:
return (
        <View style={styles.container}>
            <SelectInput
            style={styles.selectInput}
                onValueChange={(value) => console.log(value)}
                items={categoriasPrincipales}
            />

        </View>
    );

};

exoprt default Componente;

Aparece de la siguiente forma:

Si queremos cambiar el texto de Select an item… que viene por defecto, tenemos que añadir la propiedad placeholder y pasarle el objeto de forma correcta con label y value:

    return (
        <View style={styles.container}>
            <SelectInput
            style={styles.selectInput}
                onValueChange={(value) => console.log(value)}
                placeholder = {{label: "Selecciona una categoría", value: null}}
                items={categoriasPrincipales}
            />

        </View>
    );

Y aparecerá de la siguiente forma:

El valor que seleccionemos se guardará con la propiedad onValueChange:

            onValueChange={(value) => console.log(value)}