25

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?

0

4 Answers 4

20

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'
  },
});
2
  • 1
    itemStyle={{height: 44}} does not change the item height... react-native:0.55.4
    – chenop
    Commented Aug 3, 2018 at 12:59
  • 3
    @chenop itemStyle ios only
    – Nerius Jok
    Commented Oct 30, 2018 at 15:53
2

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
  }
})
0
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'
  }
});
-4

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>
        );
    }
}

https://docs.nativebase.io/COMPONENTS.html#Picker

1
  • 6
    He asked about RN picker and you offer a completely different lib
    – user1971598
    Commented May 2, 2017 at 5:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.