meditmoblibrary/src/ADFComponents/CPicker/CPicker.js

MedIT ADF Mobile Library

import React from 'react'
import { StyleSheet, View, Platform } from 'react-native'
import RNPickerSelect from 'react-native-picker-select'
import { Picker } from '@react-native-picker/picker'

const CPicker3 = ({ items, label, value, onSelect = () => {}, ...rest }) => {
  if (Platform.OS === 'ios') {
    return (
      <View style={styles.container}>
        <RNPickerSelect
          {...rest}
          onValueChange={(value, index) => onSelect(value, index)}
          items={items}
          placeholder={{
            textAlign: 'center',
            label: label,
            value: null,
            color: '#9EA0A4',
          }}
        />
      </View>
    )
  } else {
    return (
      <View style={styles.container}>
        <Picker selectedValue={value} onValueChange={onSelect}>
          {label && <Picker.Item label={label} value='' />}
          {items &&
            items.map((item, index) => (
              <Picker.Item key={index} label={item.label} value={item.value} />
            ))}
        </Picker>
      </View>
    )
  }
}

export default CPicker3

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 2,
    borderBottomColor: '#044372',
    justifyContent: 'center',
    width: '100%',
    alignContent: 'center',
    textAlign: 'center',
    paddingBottom: 10,
  },
})