Picker cannot accept borderRadius form style

user_2017175 0
Viewed 10992

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.

react-native reactjs
5 Answers

Use this code. This works for me.

<View
    style={{
    paddingVertical: 8,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderRadius: 20,
}}>
    <Picker style={{height: 24}}>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
    </Picker>
</View>
user_105226330

for drop down style with border radios and color along with icon copy past this code will save a lot time

I hope this will help some one in future

import RNPickerSelect from 'react-native-picker-select';
<RNPickerSelect
                 style={{
                    ...pickerSelectStyles,
                    inputAndroid: {color: 'black',borderWidth:1,borderColor:'#000',borderRadius:10},
                    inputIOS:{}   //for ios style code go here
                    iconContainer: {
                      paddingLeft: 20,
                      right: 10,
                    },
                  }}
                //   placeholder={}
                placeholder={{
                    label: 'Select a issue...',
                    value: null,
                }}
        onValueChange={(value) => console.log(value)}
        items={option}
        useNativeAndroidPickerStyle={false}
        Icon={() => {
            return (
              <View
                style={{
                  backgroundColor: 'transparent',
                  borderTopWidth: 8,
                  borderTopColor: 'gray',
                  borderRightWidth: 10,
                  alignItems:'center',
                  justifyContent:'center',
                  borderRightColor: 'transparent',
                  borderLeftWidth: 10,
                  borderLeftColor: 'transparent',
                  width: 10,
                  marginTop:'100%',
                  height: 0,
                }}
              />
            );
          }}
    />


    const pickerSelectStyles = StyleSheet.create({
inputIOS: {
  fontSize: 16,
  paddingVertical: 12,
  paddingHorizontal: 20,
  borderWidth: 1,
  height: 50,
  borderRadius: 4,
  borderColor: 'grey',
  paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'green',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
},
})
user_146540690
user_136862770

Using borderRadius doesnt change anything and using borderTopLeftRadius, topRight .. breaks when dropdown is clicked. This fixed my issue

      <DropDownPicker 
            containerStyle={{ height: 50, width: '100%', marginBottom: 20}}
            style={{ backgroundColor: '#fafafa',
              borderRadius: 50,
              borderTopStartRadius: 50,
              borderTopEndRadius: 50,
              borderBottomStartRadius: 50,
              borderBottomEndRadius: 50,
              borderColor: '#c72525',
              borderWidth: 1,
            }}
            itemStyle={{
              justifyContent: 'flex-start',
            }}
            dropDownStyle={{ backgroundColor: '#fafafa' }}
            onChangeItem={(item) =>
              this.setState({
                selectedContact: item.value,
              })
            }
          />
user_89345740
Related