react-native picker example.jsx

import React, {PureComponent} from 'react'
import {View, ScrollView, Dimensions,
  Modal, TouchableOpacity}    from 'react-native'
import {constants} from '../../core/constants'
import getTheme from '../../core/helpers/theme'
import strings           from '../../platformhelpers/localization'
import Icon, {iconNames} from '../../platformhelpers/icon'
import ListItem    from './list-item'
import CustomText  from './text'
import Touchable   from './touchable-opacity'


const modalStyle = {
  flex           : 1,
  alignItems     : 'center',
  justifyContent : 'center',
  backgroundColor: constants.TRANS_BLACK
}

const getModalChildStyle = (props) => {
  return {
    backgroundColor: getTheme().background,
    width          : 250,
    padding        : 20,
    justifyContent : 'center',
    alignItems     : 'center',
    overflow       : 'visible',
    shadowOffset   : {width:20, height:20},
    shadowColor    : constants.BLACK,
    shadowRadius   : 50,
    shadowOpacity  : 1,
    elevation      : 10,
    ...props.style
  }
}

const titleStyle = {
  fontWeight  : '400',
  fontSize    : 20,
  marginBottom: 20
}

export default function CustomModal (props) {
  return (
    <Modal
      transparent
      animationType='fade'
      visible={props.visible}
      onRequestClose={props.close}
    >
      <TouchableOpacity
        onPress={props.close}
        style={modalStyle}
      >
        <View style={getModalChildStyle(props)}>

          <CustomText style={titleStyle}>{props.title}</CustomText>
          {props.children}

        </View>
      </TouchableOpacity>
    </Modal>
  )
}

const pickerItemStyle = {width:250}

function PickerItem ({id, onPress, label}) {
  return (
    <ListItem
      valid
      onPress={onPress}
      style={pickerItemStyle}
    >
      <CustomText>
        {label}
      </CustomText>
    </ListItem>
  )
}

function getStyle () {
  return {backgroundColor:getTheme().background}
}

function getModalStyle () {
  return {
    padding   : 0,
    paddingTop: 20,
    maxHeight : Dimensions.get('window').height * (2 / 3)
  }
}

function getModalContentStyle () {
  return {borderTopWidth:1, borderTopColor:getTheme().main}
}

const pickerStyle = {
  flexDirection : constants.ROW,
  justifyContent: constants.SPACEBETWEEN,
  alignItems    : constants.CENTER
}

const selectedNameStyle = {flex:9, margin:4}

const pickerArrowStyle = {flex:1, margin:4, paddingRight:4}

export default class Picker extends PureComponent {
  state = {visible:false}

  hideModal = () => {
    this.setState({visible:false})
  }

  showModal = () => {
    this.setState({visible:true})
  }

  onValueChange = eventId => {
    this.props.onValueChange(eventId)
    this.hideModal()
  }

  makeItemNodes = function * (items) {
    for (let [id, item] of Object.entries(items)) {
      if (item.name) {
        yield (
          <PickerItem
            key={id}
            onPress={() => this.onValueChange(id)}
            label={item.name}
          />
        )
      } else {
        throw new Error(`can not make picker node without item name:\n${JSON.stringify(item)}`)
      }
    }
  }

  getSelectedName () {
    if (
      this.props.items &&
      this.props.selectedValue &&
      this.props.items[this.props.selectedValue]
    ) {
      return this.props.items[this.props.selectedValue].name
    } else {
      return strings.chooseEvent
    }
  }

  render () {
    return (
      <View style={getStyle()}>
        <CustomModal
          title={strings.chooseEvent}
          visible={this.state.visible}
          close={this.hideModal}
          style={getModalStyle()}
        >
          <ScrollView style={getModalContentStyle()}>
            {[...this.makeItemNodes(this.props.items)]}
          </ScrollView>
        </CustomModal>

        <Touchable onPress={this.showModal}>
          <View style={pickerStyle}>
            <CustomText style={selectedNameStyle}>
              {this.getSelectedName()}
            </CustomText>
            <Icon name={iconNames.PICKER} size={constants.ICON_SIZE} style={pickerArrowStyle} />
          </View>
        </Touchable>
      </View>
    )
  }
}