How can I center items and selected item in RN Picker android?

Question

Is it possible to center android picker items and selected item? I've searched everywhere, and tried with alignItems:'center' & justifyContent:'center', but items are still aligned left (visible on photos), when I put alignSelf:'center' picker is no longer visible. Anyone have any clues?

    var REPORTS = [
        {name: 'Report 1', id: 'r1'},
        {name: 'Report 2', id: 'r2'},
        {name: 'Report 3', id: 'r3'},
        {name: 'Report 4', id: 'r4'},
        {name: 'Report5', id: 'r5'},
        {name: 'Report6', id: 'r6'}
    ];

    ...
        <Picker style={styles.androidPicker} mode={'dropdown'}
                selectedValue={this.state.report} itemStyle={styles.reports.iosPicker}
                onValueChange={(reportId) => this.onReportChanged(reportId)}>
           {REPORTS.map(function (reports) { 
               return <Picker.Item style={{alignSelf:'center'}} label={reports.name} 
                           value={reports.id} key={reports.name + reports.id}/>;})} </Picker>

    ...

styles:

var styles = StyleSheet.create({
    androidPicker: {
            flex: 1,
            color: '#6D6D6D',
            backgroundColor: '#FFF',
            marginBottom: 20,
            height: 40, 
            alignItems:'center', 
            justifyContent:'center',
            flexDirection: 'row'
        }
})

Here are snapshoots of closed and opened picker:

Thanks in advance! :)

Yep, on Picker.Item style there is textAlign: 'center', as you can see in code snippet, and it's not doing anything - literally, I've tried to set it on Picker style too, but it throws warning: "Invalid props.style key 'textAlign' supplied to 'Picker" ... :/ — Vikky, May 09 '16 at 14:57
You can use native android. Look [there](http://stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker) — Max, Jan 26 '17 at 13:01
Thank you @Max didn't know I can use native android styles :) — Vikky, Feb 03 '17 at 12:19

score 1 · Answer 1 · answered Aug 05 '19 at 20:47

1

Try :

androidPicker: { color: '#6D6D6D', backgroundColor: '#FFF', marginBottom: 20, height: 40, alignSelf: 'center', justifyContent:'center', }

It worked for me

answered Aug 05 '19 at 20:47

RemCoding

11
2

score 1 · Accepted Answer · answered Mar 17 '21 at 08:14

At first you need to set useNativeAndroidPickerStyle={false} as this will allow you to use some styling props like inputAndroid and inputAndroidContainer, etc. then you can do the necessary styling in those styles.Take a look at the docs here, you'll get the idea.

score 0 · Answer 3 · answered May 10 '16 at 08:36

0

Would you try like below :

var styles = StyleSheet.create({
    androidPicker: {
            color: '#6D6D6D',
            backgroundColor: '#FFF',
            marginBottom: 20,
            height: 40,
            alignSelf: 'stretch', 
            alignItems:'center', 
            justifyContent:'center',
        }
})

answered May 10 '16 at 08:36

Melih Mucuk

6,988
6
37
56

Still aligned left :/ tnx for trying anyway! – Vikky May 10 '16 at 08:42
1

on iOS, there is an itemStyle for picker item, but I think android is missing :) @Vikky – Melih Mucuk May 10 '16 at 08:43
1

Yeah I know, and it's working perfectly on iOS - I totally agree,that is exactly what is missing here :) but I was thinking - hey, maybe someone else found some workaround or something to get same behavior on android ^^ – Vikky May 10 '16 at 08:49

How can I center items and selected item in RN Picker android?

3 Answers3