How do you set a percent width (or flex) for a React Native Picker on Android?

Question

On iOS, you're able to put a <Picker> in a flex box and make the picker(s) flex the entire width of the screen.

Using the new cross-platform <Picker> element in React Native, what's the easiest way to do this on Android?

The Picker on Android only accepts the width element, and obviously doesn't accept percentage values. It does not scale to the width of its container.

Answer 1

You can set a percentage by getting the width of the screen using Dimensions:

import {
 Dimensions
} from 'react-native'

var width = Dimensions.get('window').width;

var fifyPercent = width / 2
var oneHundredPercent = width

Or if you are measuring a component and not the entire device width you can get it's width by using the onLayout function, then use it instead.

onLayout

onLayout implementation

Answer 2

You can kind of set a percentage using layout_weight.

This explanation is extracted from this question.

With layout_weight you can specify a size ratio between multiple views. E.g. you have a MapView and a table which should show some additional information to the map. The map should use 3/4 of the screen and table should use 1/4 of the screen. Then you will set the layout_weight of the map to 3 and the layout_weight of the table to 1.

To get it work you also have to set the height or width (depending on your orientation) to 0px.

So, your iOS flex box will be a LinearLayout.

---

These are also very good and ilustrated examples:

http://www.101apps.co.za/index.php/articles/using-android-s-layout-weight-attribute.html

http://javarticles.com/2015/04/layout_weight-android-example.html