Reach Android native styles from React-Native

I want to style Picker in React-Native, if with iOS I handled through with styling with css, Android picker not styling with React-Native styles. I found how to create the Android native styles with xml files but I can't reach them from my React-Native components. This is my code for Android version of Picker.

if (Platform.OS === 'android') {
  return (
    <Picker
      style={styles.inputContainer}
      selectedValue={this.props.value}
      onValueChange={this.props.onValueChange}
      mode='dropdown'>
      {this.props.items.map((i, index) => (
        <Picker.Item key={index} label={i.label} value={i.value} />
      ))}
    </Picker>
  );
}

Android styles

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
  <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>

<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
  <item name="android:fontFamily">sans-serif-light</item>
  <item name="android:textSize">18dp</item>
</style>

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">18dp</item>
    <item name="android:fontFamily">sans-serif-light</item>
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/mydivider</item>
</style>

How to reach Android native styles from React-Native?

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue