CODEWITHSUNDEEP
javascriptreactjsreact-native
shira
shira

Reputation: 394

react native: what is the way to add frame around the picker to make it look nice?

How to add a frame around a picker ? In my example I try to make a frame around the picker to make it look nice but I am not success and it is not clear to me why. I'm running with Android and I can not see a frame around

import { Picker } from '@react-native-community/picker';


<Picker
          mode="dropdown"
          //pickerStyleType={}
          selectedValue={selectedValue}
          style={{
            color: 'black',
            placeholderTextColor: 'black',
            borderColor: 'black',
            borderWidth: 3,
            height: 50,
            width: 150,
            justifyContent: 'flex-end',
          }}
          onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        >
          <Picker.Item label="1" value="1" />
          <Picker.Item label="2" value="2" />
          <Picker.Item label="3" value="3" />
        </Picker>

Upvotes: 1

Views: 136

Answers (2)

Lingaraj Sahoo
Lingaraj Sahoo

Reputation: 71

<View style={{borderWidth:1}}>
  <Picker
          mode="dropdown"
          selectedValue={selectedValue}
          style={{
            height: 50,
            width: 150,
          }}
          onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        >
          <Picker.Item label="1" value="1" />
          <Picker.Item label="2" value="2" />
          <Picker.Item label="3" value="3" />
   </Picker>

<View/>

Upvotes: 1

Chefk5
Chefk5

Reputation: 469

Try to wrap your picker with a view like this

<View style={ { borderWidth: 1 } }></View>

Upvotes: 1

Related Questions