Form select in react native

A form select in react native

Creating form select component in both iOS and Android using react native

picker-android.js

import React, { Component } from "react";
import { Picker } from "react-native";

class FormPicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false
    }
  }
  
  render() {
    return (
        <Picker
          selectedValue={this.props.value}
          onValueChange={this.props.onValueChange}
        >
          {this.props.items.map((i, index) => (
            <Picker.Item key={index} label={i.label} value={i.value} />
          ))}
        </Picker>
      );
  }
}

picker-complete.js

import React, { Component } from "react";
import {
  Modal,
  TouchableWithoutFeedback,
  Text,
  StyleSheet,
  Platform,
  View,
  Picker,
  TextInput,
  TouchableOpacity,
  AppRegistry
} from "react-native";

const programmingLanguages = [
  {
    label: "Java",
    value: "java"
  },
  {
    label: "JavaScript",
    value: "js"
  },
  {
    label: "Python",
    value: "python"
  },
  {
    label: "Ruby",
    value: "ruby"
  },
  {
    label: "C#",
    value: "csharp"
  },
  {
    label: "C++",
    value: "cpp"
  },
  {
    label: "C",
    value: "c"
  },
  {
    label: "Go",
    value: "go"
  }
];

class FormPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false
    };
  }

  render() {
    if (Platform.OS === "android") {
      return (
        <Picker
          selectedValue={this.props.value}
          onValueChange={this.props.onValueChange}
        >
          {this.props.items.map((i, index) => (
            <Picker.Item key={index} label={i.label} value={i.value} />
          ))}
        </Picker>
      );
    } else {
      const selectedItem = this.props.items.find(
        i => i.value === this.props.value
      );
      const selectedLabel = selectedItem ? selectedItem.label : "";

      return (
        <View style={styles.inputContainer}>
          <TouchableOpacity
            onPress={() => this.setState({ modalVisible: true })}
          >
            <TextInput
              style={styles.input}
              editable={false}
              placeholder="Select language"
              onChangeText={searchString => {
                this.setState({ searchString });
              }}
              value={selectedLabel}
            />
          </TouchableOpacity>
          <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.modalVisible}
          >
            <TouchableWithoutFeedback
              onPress={() => this.setState({ modalVisible: false })}
            >
              <View style={styles.modalContainer}>
                <View style={styles.modalContent}>
                  <Text
                    style={{ color: "blue" }}
                    onPress={() => this.setState({ modalVisible: false })}
                  >
                    Done
                  </Text>
                </View>
                <View
                  onStartShouldSetResponder={evt => true}
                  onResponderReject={evt => {}}
                >
                  <Picker
                    selectedValue={this.props.value}
                    onValueChange={this.props.onValueChange}
                  >
                    {this.props.items.map((i, index) => (
                      <Picker.Item
                        key={index}
                        label={i.label}
                        value={i.value}
                      />
                    ))}
                  </Picker>
                </View>
              </View>
            </TouchableWithoutFeedback>
          </Modal>
        </View>
      );
    }
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text1: "",
      text2: "",
      language: ""
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.content}>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder={"Some input"}
              style={styles.input}
              onChangeText={text1 => this.setState({ text1 })}
              value={this.state.text1}
            />
          </View>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder={"Some input 2"}
              style={styles.input}
              onChangeText={text2 => this.setState({ text2 })}
              value={this.state.text2}
            />
          </View>
          <FormPicker
            items={programmingLanguages}
            value={this.state.language}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({ language: itemValue })}
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  content: {
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 5,
    alignSelf: "stretch",
    justifyContent: "center"
  },
  inputContainer: {
    ...Platform.select({
      ios: {
        borderBottomColor: "gray",
        borderBottomWidth: 1
      }
    })
  },
  input: {
    height: 40
  },
  modalContainer: {
    flex: 1,
    justifyContent: "flex-end"
  },
  modalContent: {
    justifyContent: "flex-end",
    flexDirection: "row",
    padding: 4,
    backgroundColor: "#ececec"
  }
});

AppRegistry.registerComponent('FormPicker', () => App);

picker-ios.js

import React, { Component } from "react";
import { 
  Picker,
  Modal,
  TouchableWithoutFeedback,
  Text,
  View,
  View,
  Picker,
  TextInput,
  Dimensions,
  TouchableOpacity
} from "react-native";

class FormPicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false
    }
  }
  
  render() {
    return (
        <View style={styles.inputContainer}>
          <TouchableOpacity
            onPress={() => this.setState({ modalVisible: true })}
          >
            <TextInput
              style={styles.input}
              editable={false}
              placeholder="Select language"
              onChangeText={searchString => {
                this.setState({ searchString });
              }}
              value={this.props.value}
            />
          </TouchableOpacity>
          <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.modalVisible}
          >
            <TouchableWithoutFeedback
              onPress={() => this.setState({ modalVisible: false })}
            >
              <View style={styles.modalContainer}>
                <View style={styles.buttonContainer}>
                  <Text
                    style={{ color: "blue" }}
                    onPress={() => this.setState({ modalVisible: false })}
                  >
                    Done
                  </Text>
                </View>
                <View>
                  <Picker
                    selectedValue={this.props.value}
                    onValueChange={this.props.onValueChange}
                  >
                    {this.props.items.map((i, index) => (
                      <Picker.Item
                        key={index}
                        label={i.label}
                        value={i.value}
                      />
                    ))}
                  </Picker>
                </View>
              </View>
            </TouchableWithoutFeedback>
          </Modal>
        </View>
      );
  }
};

const styles = StyleSheet.create({
  inputContainer: {
    ...Platform.select({
      ios: {
        borderBottomColor: "gray",
        borderBottomWidth: 1
      }
    })
  },
  input: {
    height: 40
  },
  modalContainer: {
    flex: 1,
    justifyContent: "flex-end"
  },
  buttonContainer: {
    justifyContent: "flex-end",
    flexDirection: "row",
    padding: 4,
    backgroundColor: "#ececec"
  }
});

picker-original.js

import React, { Component } from "react";
import {
  AppRegistry,
  Picker,
  Platform,
  StyleSheet,
  TextInput,
  View
} from "react-native";

const programmingLanguages = [
  {
    label: 'Java',
    value: 'java',
  },
  {
    label: 'JavaScript',
    value: 'js',
  },
  {
    label: 'Python',
    value: 'python',
  },
  {
    label: 'Ruby',
    value: 'ruby',
  },
  {
    label: 'C#',
    value: 'csharp',
  },
  {
    label: 'C++',
    value: 'cpp',
  },
  {
    label: 'C',
    value: 'c',
  },
  {
    label: 'Go',
    value: 'go',
  }
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text1: '',
      text2: '',
      language: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.content}>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder={'Some input'}
              style={styles.input}
              onChangeText={text1 => this.setState({ text1 })}
              value={this.state.text1}
            />
          </View>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder={'Some input 2'}
              style={styles.input}
              onChangeText={text2 => this.setState({ text2 })}
              value={this.state.text2}
            />
          </View>
          <Picker
            selectedValue={this.state.language}
            onValueChange={itemValue => this.setState({ language: itemValue })}>
            {programmingLanguages.map((i, index) => (
              <Picker.Item key={index} label={i.label} value={i.value} />
            ))}
          </Picker>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 5,
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  inputContainer: {
    ...Platform.select({
      ios: {
        borderBottomColor: 'gray',
        borderBottomWidth: 1,
      },
    }),
  },
  input: {
    height: 40
  }
});

AppRegistry.registerComponent('FormPicker', () => App);