Guías Técnicas

Capturar valor de una lista (Picker)

  ¿Qué es Picker?

Picker es un componente de React Native proporcionado por la librería @react-native-picker/picker, utilizado para mostrar listas desplegables (tipo select en HTML) que permiten al usuario seleccionar una opción entre varios valores disponibles.

Instalar Picker

Para usar el componente Picker, primero debes instalar la librería @react-native-picker/picker. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

bash 
npm install @react-native-picker/picker

Ejemplo básico para capturar valor

jsx 
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const SelectorDeFruta = () => {
const [fruta, setFruta] = useState('manzana');

return (
  <View style={styles.container}>
    <Text style={styles.label}>Selecciona tu fruta favorita:</Text>

    <Picker
      selectedValue={fruta}
      onValueChange={(itemValue) => setFruta(itemValue)}
      style={styles.picker}
    >
      <Picker.Item label="Manzana" value="manzana" />
      <Picker.Item label="Banano" value="banano" />
      <Picker.Item label="Naranja" value="naranja" />
      <Picker.Item label="Fresa" value="fresa" />
    </Picker>

    <Text style={styles.resultado}>Fruta seleccionada: {fruta}</Text>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
  },
  label: {
    fontSize: 16,
    marginBottom: 10,
  },
  picker: {
    backgroundColor: '#e0e0e0',
    borderRadius: 8,
  },
  resultado: {
    marginTop: 20,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default SelectorDeFruta;

Este código crea un componente SelectorDeFruta que muestra un Picker con varias opciones de frutas. El componente utiliza el hook useState para gestionar el estado fruta que almacena el valor seleccionado por el usuario. Cuando el usuario selecciona una fruta, se actualiza el estado fruta y se muestra la fruta seleccionada en la pantalla.

  ¿Qué hace cada parte?

  • selectedValue: define el valor actualmente seleccionado en el Picker.
  • onValueChange: función que se ejecuta cuando el usuario selecciona una nueva opción.
  • Picker.Item: representa cada opción de la lista desplegable, usando label (texto visible) y value (valor asociado).


  Importante

Puedes simplificar y optimizar tu manejo de formularios usando la librería react-native-use-form-lite.

Es una solución moderna, intuitiva, liviana y altamente flexible para gestionar formularios en React Native, ideal para desarrollar de forma rápida, limpia y escalable.