React Native Picker Styling - ANDROID

Picker and Picker item's styling is handled natively on Android. You need to define style for Android's SpinnerItem in android/app/src/res/styles.xml see: How to style the standard react-native android picker?

I tried to test the underline but couldn't seem to find anything that worked. Here is couple of workarounds Android spinner with underline appcompat

However, I would simply use react native's components to our advantage. I'd create a new component that wraps React Native's Picker and put the picker in a View with the underline style that renders a placeholder if the Picker's value is undefined.

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.

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