Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Form select in react native
Creating form select component in both iOS and Android using react native
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>
);
}
}
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);
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"
}
});
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment