react-native-template-agile-rn/src/components/utils/Picker/index.js

<h3 align="center"> <b>Agile RN</b> is a <b>React Native ⚛ template</b> that was created to <i>speed up project start-up</i> as well as make <i>app development easier</i>. <h3>

import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import { FormContext } from '../Form';
import Block from '../Block';
import Text from '../Text';

import RNPicker from './styles';

export default function Picker({ name, label, data, weight, ...rest }) {
  const { values, errors, onChange } = useContext(FormContext);

  return (
    <Block weight={weight}>
      {label && (
        <Block distance={[0, 5]}>
          <Text>{label}</Text>
        </Block>
      )}
      <RNPicker
        selectedValue={values[name]}
        onValueChange={value => onChange({ name, value })}
        {...rest}
      >
        <RNPicker.Item label="Pick a item" value={null} />
        {data.map(it => (
          <RNPicker.Item
            key={({ item }) => String(item.id)}
            label={it.label}
            value={it.id}
          />
        ))}
      </RNPicker>
      <Block distance={[0, 5]}>
        <Text grey3>{errors[name]}</Text>
      </Block>
    </Block>
  );
}

Picker.defaultProps = {
  label: null,
  weight: null,
};

Picker.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  data: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string,
      id: PropTypes.number,
    })
  ).isRequired,
  weight: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
};