CODEWITHSUNDEEP
javascriptreact-nativestyles
bekanur98
bekanur98

Reputation: 520

How to set up picker's border

I have Picker from 'react-native'. Picker.Item there are :"Monday, Tuesday, Wednesday etc".

I want to set up picker's properties like borderRadius:10

even style={{borderRadius:30}} not helped.

<Picker
        style={styles.pickerStyle}
        tvParallaxTiltAngle
        selectedValue={this.props.shift}
        onValueChange={value => this.props.employeeUpdate({ prop: 
    'shift', value })}
      >
        <Picker.Item color="#A4A4A5" label="Monday" value="Monday" 
     />
        <Picker.Item color="#A4A4A5" label="Thuesday" 
    value="Thuesday" />
        <Picker.Item color="#A4A4A5" label="Wednesdady" 
    value="Wednesdady" />
        <Picker.Item color="#A4A4A5" label="Thursday" 
    value="Thursday" />
        <Picker.Item color="#A4A4A5" label="Friday" value="Friday" 
    />
        <Picker.Item color="#A4A4A5" label="Saturday" 
    value="Saturday" />
        <Picker.Item color="#A4A4A5" label="Sunday" value="Sunday" 
    />
</Picker>

Upvotes: 3

Views: 5345

Answers (2)

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

MoKhajavi75
MoKhajavi75

Reputation: 2702

You can wrap your <Picker> inside a <View> like this:

<View
  style={{flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'stretch',
  borderWidth: 1,
  borderRadius: 10
}}>
    <Picker>
        ...
    </Picker>
</View>

Upvotes: 6

Related Questions