Select.jsx

import React, { PureComponent } from "react";
import {
  View,
  Text,
  TouchableWithoutFeedback,
  Picker,
  PickerItemProps,
  Modal,
  Animated,
  TouchableWithoutFeedbackProps,
} from "react-native";

type SelectProps = {
  options: PickerItemProps[],
};

const TouchableContainer = (props: TouchableWithoutFeedbackProps) => {
  return (
    <TouchableWithoutFeedback {...props}>
      <View {...props}>{props.children}</View>
    </TouchableWithoutFeedback>
  )
}

class Select extends PureComponent<SelectProps> {

  constructor() {
    super();

    this.state = {
      value: 0,
      modalVisible: false,
      animatedHeight: new Animated.Value(0),
    };

    this.setModelVisible = this.setModelVisible.bind(this);
    this.onValueChange = this.onValueChange.bind(this);
  }

  setModelVisible(visible: boolean) {
    if (visible) {
      this.setState({
        modalVisible: visible,
      });

      Animated.timing(
        this.state.animatedHeight,
        {
          toValue: 275,
          duration: 250
        }
      ).start();
    } else {
      Animated.timing(
        this.state.animatedHeight,
        {
          toValue: 0,
          duration: 250
        }
      ).start(() => this.setState({ modalVisible: false }));
    }
  }

  onValueChange(value: any) {
    console.log(123);
    this.setState({ value });
  }

  render() {
    const { options } = this.props;
    const { value, modalVisible, animatedHeight } = this.state;

    const text = options[0].label;

    return (
      <TouchableContainer onPress={() => this.setModelVisible(true)}>
        <Text>{text}</Text>
        <Modal
          transparent={true}
          supportedOrientations={['landscape', 'portrait']}
          animationType="none"
          visible={modalVisible}
          onRequestClose={() => this.setModelVisible(false)}
        >
          <View style={{ flex: 1 }}>
            <TouchableContainer
              onPress={() => this.setModelVisible(false)}
              style={{
                backgroundColor: '#00000077',
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-end',
              }}
            >
              <TouchableContainer
                style={{ flex: 1, backgroundColor: 'white' }}
              >
                <Animated.View
                  style={{
                    height: animatedHeight,
                  }}
                >
                  <Picker selectedValue={value} onValueChange={(value) => this.onValueChange(value)}>
                    {options.map((o, i) => <Picker.Item key={i} {...o} />)}
                  </Picker>
                </Animated.View>
              </TouchableContainer>
            </TouchableContainer>
          </View>
        </Modal>
      </TouchableContainer>
    )
  }
}

Select.defaultProps = {
  options: [{
    label: 'X',
    value: 1
  }, {
    label: 'Y',
    value: 2
  }, {
    label: 'Z',
    value: 3
  }]
}

export default Select;