React Native Picker Styling - ANDROID

Question

I'm trying to add some styling to react-native picker, like underlying and set placeholder, but unable to do so.

const styles = StyleSheet.create({
  picker: {
    textDecorationLine: 'underline'
  }
});

<Picker
   style={[styles.picker]}>
   <Picker.Item label="Country" value="" />
   <Picker.Item label="United States" value="US" />
   <Picker.Item label="India" value="IN" />
</Picker>

1. If i use value="", then it shows country as a selectable value, which i don't want.
2. textDecorationLine is not able to set the underline styling to picker.

Basically, i am looking to create something like this,

where, i can set the color of placeholder as well.

Thanks in adv.

Answer 1

You can also use this one for make more attractive to your react-native picker.You can add styles to your view so it can easily make changes to your picker.

import React, { Component } from 'react';
import { View, Picker } from 'react-native';
export default class DropdownDemo extends Component{
    state = { user: '' }
    updateUser = (user) => {
        this.setState({ user: user })
    }
    render(){
        return(
            <View
                    style={{
                        width: 300,
                        marginTop: 15,
                        marginLeft:20,
                        marginRight:20,
                        borderColor: 'black',
                        borderBottomWidth:1,
                        borderRadius: 10,
                        alignSelf: 'center'
                    }}>
                    <Picker
                        selectedValue={this.state.user}
                        onValueChange={this.updateUser}


                    >
                        <Picker.Item label="Male" value="Male" />
                        <Picker.Item label="Female" value="Female" />
                        <Picker.Item label="Other" value="Other" />
                    </Picker>
                </View>
        );
    }
}

Answer 2

You need to modify your activity theme as follows:

<!-- Base application theme. -->
<style name="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:spinnerStyle">@style/Base.Widget.AppCompat.Spinner.Underlined</item>
    ...
</style>

The colorAccent controls the color of the underline, and using @style/Base.Widget.AppCompat.Spinner.Underline provides the underline on your Picker.

You can use this technique to set the styling on almost any android component in React. android:editTextStyle, android:textViewStyle, etc.

Unfortunately, because the React Picker extends Spinner and not AppCompatSpinner, the styling will be a bit different if you're running on API < 21.