reactjsreact-nativestyles

React native: How to stylize native Picker(border and arrow)?


In docs there is no info about what styles is supported for Picker.


I trying to make components Picker alongside TextInput, all my attempts to style Picker the same way I'm styling TextInput fail.

So I ask You to help me to style border , borderRaduis, borderWidth for Picker.

And maybe You know how to customise arrow sign in Picker.

A simplified version of my code, see below :

<View>
    <View>
        <Picker
            selectedValue={this.state.source}
            style={{
               // Styles here 
            }}
              onValueChange={(itemValue, itemIndex) =>
                  this.setState({ source: itemValue })
              }
        >
            <Picker.Item label="Item-1" value="item1" />
            <Picker.Item label="Item-2" value="item2" />
        </Picker>
    </View>
</View>

Thanks for your attention. I’m looking forward to your reply.


Solution

  • I hope it will work to give you Picker Border ...

              <View style={{  alignItems: 'center', borderColor: 'black', borderWidth: 1, borderRadius: 5, width: '60%', backgroundColor: 'transparent'  }}>
                  <Picker
                     selectedValue={this.state.source}
                     style={{
                       height: 30,width: "100%",
                        }}
                     onValueChange={(itemValue, itemIndex) =>
                         this.setState({ source: itemValue })
                        }
                    >
                   <Picker.Item label="Item-1" value="item1" />
                   <Picker.Item label="Item-2" value="item2" />
               </Picker>
            </View>