question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chevron disappears on Android with useNativeAndroidPickerStyle set to false and padding

See original GitHub issue

Describe the bug
When setting useNativeAndroidPickerStyle={false} and adding inputAndroid: { paddingVertical: 8 }, the chevron disappears. Removing the padding reintroduces the chevron.

To Reproduce
Steps to reproduce the behavior:

  1. Set up a simple RNPicker instance
  2. Set useNativeAndroidPickerStyle to false
  3. Add vertical padding to the component
  4. See how the chevron disappears

Expected behavior
The dropdown chevron should always be visible if only changing the vertical padding of the input.

Screenshots
2019-07-29 17_28_07-Snack

Smartphone (please complete the following information):

  • Device: [Google Pixel 3 Emulator]
  • OS: [Android 9 Pie]
  • react-native-picker-select version: [6.3.0]
  • react-native version: [Expo v33]
  • react version: [Expo v33]

Reproduction and/or code sample
You can view the snack here: https://snack.expo.io/SJbzLk6MS

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jdhornercommented, Jul 30, 2019

if that’s all you’re wanting to accomplish, what about wrapping the component (with useNativeAndroidPickerStyle set to true) in a view with negative margin on the sides?

So I’ll be honest… I had no idea negative margins were even a “thing”. It worked like a charm. Thank you.

0reactions
akkravikumarcommented, Dec 9, 2019

@jdhorner use this style below, it should work.

useNativeAndroidPickerStyle={false} inputAndroid: { borderWidth: 1, borderColor: “red”,
elevation: 2, color: “#000000” }

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native-picker-option - npm package - Snyk
For Android, by default we are using the native Picker component. If you prefer, you can set useNativeAndroidPickerStyle to false, ...
Read more >
A Picker Component For React Native Which Emulates The ...
For Android, by default we are using the native Picker component. If you prefer, you can set useNativeAndroidPickerStyle to false, which will also...
Read more >
KeyboardAvoidingView not Working Properly - Stack Overflow
In my case, I was only able to get this working with behavior set to padding on both platforms. Setting it to null...
Read more >
How to use react-native-picker-select - LogRocket Blog
Android users can force it to use an unstyled TextInput by passing false to the useNativeAndroidPickerStyle prop.
Read more >
Real Time Image Classification with TensorFlow and React ...
In this case, you need to install and configure the respective ... open your freshly installed expo-client android/ios app and read the QR ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found