styling not working for react-native-wheel-pick

Question

Styling not working for react-native-wheel-pick's Picker.

this is my picker,

 <View style={styles.pickerContainer}>
                <Picker
                    style={styles.picker}
                    selectedValue={selectedHeight}
                    itemStyle={{ color: 'black', fontSize: 12 }}
                    onValueChange={(value) => setSelectedHeight(value)}
                    pickerData={heightData.map(item => `${item.ft} ${item.cm}`)}
                    itemSpace={40} 
                    highlightColor={"transparent"} 
                    indicatorColor={"transparent"}
                    renderItem={(data, index) => {
                        return (
                            <View style={[styles.heightItemContainer, index === selectedHeightIndex && styles.highlightedItem]}>
                                <Text style={[styles.heightText, index === selectedHeightIndex && styles.highlightedText]}>
                                    {data}
                                </Text>
                            </View>
                        );
                    }}
                />
            </View>

style for "pickerContainer" works, but for "picker" does not work, nor the font size change, nothing is reflected in the styles.

I tried inline styling directly to picker component, it does not work as well.

this is what im working on:

Answer 1

You have to add fontSize in ItemStyle it can reflect your changes on android but you need hard reload for get changes on android.

And In ios Picker give a Prop of textSize you can change textSize on that.

You can use like this

<View style={styles.pickerContainer}>
  <Picker
    textSize={12}
    textColor={'black'}
    style={styles.picker}
    selectedValue={selectedHeight}
    itemStyle={{ color: 'black', fontSize: 12 }}
    onValueChange={(value) => setSelectedHeight(value)}
    pickerData={heightData.map(item => `${item.ft} ${item.cm}`)}
    itemSpace={40} 
    highlightColor={"transparent"} 
    indicatorColor={"transparent"}
    renderItem={(data, index) => {
      return (
        <View style={[styles.heightItemContainer, index === selectedHeightIndex && styles.highlightedItem]}>
          <Text style={[styles.heightText, index === selectedHeightIndex && styles.highlightedText]}>
            {data}
          </Text>
        </View>
      );
    }}
  />
</View>