Skip to content

Instantly share code, notes, and snippets.

@siwananda
Last active January 16, 2018 22:14
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