CODEWITHSUNDEEP
reactjsreact-native
Saeid
Saeid

Reputation: 2036

Picker cannot accept borderRadius form style

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.

Upvotes: 13

Views: 14572

Answers (5)

nitin varghese
nitin varghese

Reputation: 19

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,
              })
            }
          />

Upvotes: 1

vibhu
vibhu

Reputation: 377

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

Upvotes: 1

MD. IBRAHIM KHALIL TANIM
MD. IBRAHIM KHALIL TANIM

Reputation: 817

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>

Upvotes: 3

michal
michal

Reputation: 1

solution from https://www.npmjs.com/package/react-native-dropdown-picker. The only thing you have to avoid is borderRadius. All the corners must be set separately.

style={{
    borderTopLeftRadius: 10, borderTopRightRadius: 10,
    borderBottomLeftRadius: 10, borderBottomRightRadius: 10
}}

Upvotes: 0

ugocasalone
ugocasalone

Reputation: 499

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.

Upvotes: 42

Related Questions