Picker cannot accept borderRadius form style

Question

I am new in react native. I need to have a dropdownlist that read from a file.js. I used picker as below:

<Picker
style={Commonstyles.dropdownStyle}
mode="dropdown"
selectedValue={this.state.PickerValueHolderCity}
onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolderCity: itemValue})}>
{ console.log("mydataxxx", mydata) && this.renderPickerItemsCity(mydata)}

</Picker>

Everything works fine for me. My problem is that I need to apply a style with gray background and curve ages. However, it shows me just the gray background without curve border.

I used the following style for it:

  dropdownStyle: {
    //flex: 1,
    backgroundColor: '#ecf0f1',
    marginBottom: 7,
    padding: 7,
    alignSelf: "stretch",
    // Set border width.
    borderWidth: 1,
    // Set border Hex Color Code Here.
    borderColor: '#bdc3c7',
    // Set border Radius.
    borderRadius: 10 ,
    //  marginBottom: 10,
  },

Can you please help me to apply the following style on picker. I should mention that, my style works fine on my textbox.

Answer 1

Put your Picker inside a View

<View style={{borderRadius: 10, borderWidth: 1, borderColor: '#bdc3c7', overflow: 'hidden'}}>

and set the width of your Picker as the width of the View.