CODEWITHSUNDEEP
react-native
Vikky
Vikky

Reputation: 770

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

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:

RN Android Picker closed RN Android Picker opened

Thanks in advance! :)

Upvotes: 3

Views: 5863

Answers (3)

Ashutosh Tiwari
Ashutosh Tiwari

Reputation: 424

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.

Upvotes: 1

RemCoding
RemCoding

Reputation: 11

Try :

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

It worked for me

Upvotes: 1

Melih Mucuk
Melih Mucuk

Reputation: 7066

Would you try like below :

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

Upvotes: 0

Related Questions