CODEWITHSUNDEEP
react-nativepicker
soling
soling

Reputation: 551

react-native: Picker in Modal not showing

When my Picker is embedded in Modal, it doesn't appear on screen (only tested for android)

  renderModal() {
    return (
      <Modal
        transparent={true}
        visible={this.state.showModal}
        onRequestClose={() => this.setState({ modalIsVisible: false })}
        animationType={'fade'}>
        <View
          style={{ backgroundColor:'rgba(0, 0, 0, 0.7)', flex: 1, justifyContent: 'center', padding: 20, height:100 }}>
        <View style={{ borderRadius:10, alignItems: 'center', backgroundColor: '#fff', padding: 20 }}>
          <Text>
            Choisissez la priorité de cet emplacement
          </Text>
          <Picker
            selectedValue={this.state.storagePriority}
            onValueChange={(priority) => this.setState({storagePriority: priority})}>
            <Picker.Item label="Basse" value="LOW" />
            <Picker.Item label="Normale" value="MEDIAN" />
            <Picker.Item label="Haute" value="HIGH" />
            <Picker.Item label="Réserve" value="STOCK" />
          </Picker>
        </View>
        </View>
      </Modal>
    );
  }

Any suggestion?

Upvotes: 2

Views: 5542

Answers (2)

JainZz
JainZz

Reputation: 612

Give proper styling for picker and run it.

Here is a sample code for styling picker.

    <Picker
        style={styles.picker}
        mode="dropdown"
        itemStyle={styles.itemStyle}>
            <Item label="Basse" value="LOW" />
            <Item label="Normale" value="MEDIAN" />
    </Picker>

styles:

itemStyle: {
    fontSize: 15,
    height: 75,
    color: 'black',
    textAlign: 'center',
    fontWeight: 'bold'
  }
picker: {
    width: 100
  },

Upvotes: 7

soling
soling

Reputation: 551

Setting a style={{ width: 100 }} for Picker solved it

Upvotes: 2

Related Questions