I wanted to use the Picker component in my React Native application, but it takes up too much height of the screen. Is there a way to make the picker limit itself to show only, say, two items at a time, then be scrollable within?
4 Answers
From playing around with the styling, it looks like the most important part is to set the itemStyle
prop and define the height
value there. You'll probably also want to style the Picker
component itself and set the height
value to be the same for the best looking results, but you don't need to do that.
About trying to show two rows:
- Showing one item looks to be around a height of 44.
- You can't really show exactly two items in iOS because of how the native Picker component is designed. It'll show parts of what's above and below the currently selected value. So at best you can sort of show half/half of those values. You'll have to play around with the height to find something that works for you.
Minimal Example:
<Picker style={{width: 200, height: 44}} itemStyle={{height: 44}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
Here's a Snack showing a full example for varying heights (code copy pasted below):
import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
language: 'haxe',
firstLanguage: 'java',
secondLanguage: 'js',
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Unstyled:</Text>
<Picker
style={[styles.picker]} itemStyle={styles.pickerItem}
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows one row:</Text>
<Picker
style={[styles.onePicker]} itemStyle={styles.onePickerItem}
selectedValue={this.state.firstLanguage}
onValueChange={(itemValue) => this.setState({firstLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
<Text style={styles.title}>Shows above and below values:</Text>
<Picker
style={[styles.twoPickers]} itemStyle={styles.twoPickerItems}
selectedValue={this.state.secondLanguage}
onValueChange={(itemValue) => this.setState({secondLanguage: itemValue})}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
padding: 20,
backgroundColor: 'white',
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 10,
},
picker: {
width: 200,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
pickerItem: {
color: 'red'
},
onePicker: {
width: 200,
height: 44,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
onePickerItem: {
height: 44,
color: 'red'
},
twoPickers: {
width: 200,
height: 88,
backgroundColor: '#FFF0E0',
borderColor: 'black',
borderWidth: 1,
},
twoPickerItems: {
height: 88,
color: 'red'
},
});
-
1itemStyle={{height: 44}} does not change the item height... react-native:0.55.4– chenopCommented Aug 3, 2018 at 12:59
-
3
Set the Picker
's itemStyle
height to the height of one: 44. Set its style
height to 44. Remove flex: 1 if it exists.
<Picker
selectedValue={this.state.selectedState}
onValueChange={onValueChange}
style={styles.picker}
itemStyle={styles.pickerItem}
>
{this.state.states.map((v, i) => (
<Picker.Item key={i} label={v.label} value={v.value} />
))}
</Picker>
StyleSheet.create({
picker: {
// flex: 1,
width: "100%",
height: 44,
},
pickerItem: {
height: 44
}
})
import React, { Component } from 'react';
import { View, ScrollView, TouchableOpacity, Text, StyleSheet } from "react-native";
import { Container, Content, Picker } from 'native-base';
export default class MyScreen extends Component {
constructor(props) {
super(props);
this.state = {
selected: "key1",
};
}
onValueChange(value: string) {
this.setState({
selected: value
});
}
render() {
return (
<View style={styles.mainContainer}>
<View style={styles.pickerBoxContainer}>
<View style={styles.pickerBoxInner}>
<Picker
selectedValue={this.state.district}
style={styles.pickerStyle}
placeholder="Select your SIM"
onValueChange={(itemValue) =>
this.setState({ district: itemValue })
}>
<Picker.Item label="Wallet" value="key0" />
<Picker.Item label="ATM Card" value="key1" />
<Picker.Item label="Debit Card" value="key2" />
<Picker.Item label="Credit Card" value="key3" />
<Picker.Item label="Net Banking" value="key4" />
</Picker>
<Icon style={styles.pickerBoxIcon} name="arrow-drop-down" type="MaterialIcons" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: BaseColors.white,
flex: 1,
},
// picker box style
pickerBoxContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 8,
marginTop: 10,
},
pickerBoxInner: {
borderWidth: 0.6,
borderColor: BaseColors.gray9,
borderRadius: 2,
overflow: 'hidden',
flexDirection: 'row',
alignItems: 'center',
flex: 1,
height: 37,
},
pickerBoxIcon: {
position: 'absolute',
right: 0,
fontSize: 23,
color: BaseColors.gray7,
},
pickerStyle: {
width: '120%',
paddingBottom: 0,
paddingLeft: 0,
transform: [{ scaleX: 0.85 }, { scaleY: 0.85 }],
left: -25,
position: 'absolute',
backgroundColor: 'transparent'
}
});
What about this from NativeBase:
import React, { Component } from 'react';
import { Container, Content, Picker } from 'native-base';
const Item = Picker.Item;
export default class PickerExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedItem: undefined,
selected1: 'key1',
results: {
items: []
}
}
}
onValueChange (value: string) {
this.setState({
selected1 : value
});
}
render() {
return (
<Container>
<Content>
<Picker
iosHeader="Select one"
mode="dropdown"
selectedValue={this.state.selected1}
onValueChange={this.onValueChange.bind(this)}>
<Item label="Wallet" value="key0" />
<Item label="ATM Card" value="key1" />
<Item label="Credit Card" value="key2" />
<Item label="Debit Card" value="key3" />
</Picker>
</Content>
</Container>
);
}
}
-
6He asked about RN picker and you offer a completely different lib– user1971598Commented May 2, 2017 at 5:55