react native and native base picker component

Question

I want to create picker component for android and as well as for ios, but facing problem in styling.

What I want to accomplish is to style picker text which is being displayed by default(it can be placeholder or the selected item from picker list).

I have tried the below code but it is not working.

<View style={{ backgroundColor: "#FFFFFF", borderRadius: 3, height: 39, marginTop:5, }}>
  <Picker style={{ width: screenWidth, opacity:0.4, }}

    textStyle={{ color: "blue" }}
    itemStyle={{
    backgroundColor: "green",
    marginLeft: 0,
    paddingLeft: 10
    }}
    itemTextStyle={{ color: '#788ad2' }}
  >
  
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
  </Picker>
</View>

Any help will be a big plus.

score 0 · Answer 1 · answered Oct 13 '18 at 06:45

Try to replace itemStyle code with the snippet below.

itemStyle={{
          color: "red",
          fontFamily: "Georgia",
          fontSize: 50,
          backgroundColor: "green",
          textAlign: 'left',
        }}

You can apparently use Text Style Props to add styling to the text of Picker, PickerIOS in React Native.

score 0 · Answer 2 · answered Oct 13 '18 at 09:16

To style the selected item, you just need to put your preference styles into itemStyle. 'textStyle' and 'itemTextStyle' are illegal props, you could check the provided props on this docs

Furthermore, you could use any of this text styles for itemStyle as described on this section

edit: you could import Dimension from react-native package

import { Dimensions } from 'react-native';

    <View style={styles.container}>
    <Picker style={{ width: Dimensions.get('window').width, opacity:0.4}}
      itemStyle={{
        color: "blue",
        backgroundColor: "green",
        marginLeft: 0,
        paddingLeft: 10
      }}
    >

      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
    </Picker>
  </View>

react native and native base picker component

2 Answers2