MyNativeSelect.js

import React from 'react';
import {
  Picker,
  Alert,
  Button,
  View,
} from 'react-native';

const Roulette = (props) => {
  const handlePress = () => {
    const randInt = Math.floor(Math.random() * 3);
    // this is where the magic happens :)
    props.onPress(randInt);
  };

  return <Button title="Roulette" onPress={handlePress} />;
};

class MyNativeSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: 'Two',
    };

    // don't forget the bindings
    this.handleValueChange = this.handleValueChange.bind(this);
    this.handleRoulette = this.handleRoulette.bind(this);
  }

  handleValueChange(selectedValue) {
    this.setState({ selectedValue });
    Alert.alert(`selectedValue: ${selectedValue}`);
  }

  handleRoulette(index) {
    let selectedValue = '';
    switch (index) {
      case 0:
        selectedValue = 'One';
        break;
      case 1:
        selectedValue = 'Two';
        break;
      default:
        selectedValue = 'Three';
    }
    this.handleValueChange(selectedValue);
  }

  render() {
    return (
      <View>
        <Picker
          selectedValue={this.state.selectedValue}
          onValueChange={this.handleValueChange}
        >
          <Picker.Item label="One" value="One" />
          <Picker.Item label="Two" value="Two" />
          <Picker.Item label="Three" value="Three" />
        </Picker>
        <Roulette
          onPress={this.handleRoulette}
        />
      </View>
    );
  }
}


export default MyNativeSelect;