Strange overlay on multiple select

[nschurmann]

Here you can see the select components that are supposed to be hiding behind the overlay, what may be happening?, this is my code:

import React, {
  Component,
  View,
  Text,
  StyleSheet,
  Picker,
} from 'react-native'

import DropDown, {
  Select,
  Option,
  OptionList,
} from 'react-native-selectme'

import _ from 'lodash'

const HOUR = _.range(24)
const MIN = [15, 30, 45]
class ParkingDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  selectedPark() {
    if (this.state.selectedPark) {
      return (
        <Text style={styles.selectedPark}>Estacionamiento:
          <Text style={styles.bold} > {this.state.selectedPark.name}</Text>
        </Text>
      )
    }
  }

  selectPark(id) {
    let park = _.find(this.props.parkingList, x => x.id == id)
    this.setState({selectedPark: park})
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.address} >{this.props.address}</Text>
        <Text>Selecciona estacionamiento</Text>

        {/* estacionamiento */}
        <Select
        width={300}
          optionListRef={x => this.refs['PARKINGLIST']}
          defaultValue="Selecciona un estacionamiento"
          onSelect={x => this.selectPark(x)}>
          {this.props.parkingList.map( pl =>
            <Option key={pl.id} value={pl.id}>{pl.name}</Option>
          )}
        </Select>
        {this.selectedPark()}
        <OptionList ref="PARKINGLIST"/>

        <View style={styles.time}>
          {/* hora */}
          <Select
            width={140}
            optionListRef={x => this.refs['HOURLIST']}
            onSelect={x => this.setState({selectedHour: x})}>
            {HOUR.map( h =>
              <Option key={h} value={h}>{h}</Option>
            )}
          </Select>
          <OptionList overlayStyles={{backgroundColor: '#fff'}} ref="HOURLIST"/>

        {/* minutos */}
          <Select
            width={140}
            optionListRef={x => this.refs['MINLIST']}
            onSelect={x => this.setState({selectedMin: x})}>
            {MIN.map( m =>
              <Option key={m} value={m}>{m}</Option>
            )}
          </Select>
          <OptionList ref="MINLIST"/>
        </View>
      </View>

    )
  }
}

let styles = StyleSheet.create({
  time: {
    flexDirection: 'row',
  },
  bold: {
    fontWeight: 'bold',
  },
  selectedPark: {
    marginTop: 10,
  },
  overlay: {
    marginLeft: -10,
    marginTop: -120,
  },
  address: {
    fontSize: 18,
    marginBottom: 5,
  },
  container: {
    marginTop: 62,
    paddingTop: 15,
    paddingHorizontal: 10,
    backgroundColor: '#eee',
    flex: 1,
  }
})

export default ParkingDetail

[gs-akhan]

Closing this