Feat/picker item label style (#1332)

* add labelStyle prop

* labelStyle type

* Update demo/src/screens/componentScreens/PickerScreen.js

Co-authored-by: Miki Leib <[email protected]>

Co-authored-by: Miki Leib <[email protected]>

Author: lidord-wix

demo/src/screens/componentScreens/PickerScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, Image} from 'react-native';
-import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
@@ -162,7 +162,7 @@ export default class PickerScreen extends Component {
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} label={option.label} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option} label={option.label} labelStyle={Typography.text65} disabled={option.disabled}/>
             ))}
           </Picker>
 

src/components/picker/PickerItem.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useContext} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Text as RNText} from 'react-native';
 import {LogService} from '../../services';
 import {Colors, Typography} from '../../style';
 import * as Modifiers from '../../commons/modifiers';
@@ -23,6 +23,7 @@ const PickerItem = props => {
   const {
     value,
     label,
+    labelStyle,
     disabled,
     selectedIcon = Assets.icons.check,
     selectedIconColor = Colors.primary,
@@ -72,7 +73,7 @@ const PickerItem = props => {
   const _renderItem = () => {
     return (
       <View style={styles.container} flex row spread centerV>
-        <Text numberOfLines={1} style={[styles.labelText, isItemDisabled && styles.labelTextDisabled]}>
+        <Text numberOfLines={1} style={[styles.labelText, isItemDisabled && styles.labelTextDisabled, labelStyle]}>
           {itemLabel}
         </Text>
         {selectedIndicator}
@@ -123,6 +124,10 @@ PickerItem.propTypes = {
    * Item's label
    */
   label: PropTypes.string,
+  /**
+   * Item's label style
+   */
+  labelStyle: RNText.propTypes.style,
   /**
    * Custom function for the item label (e.g (value) => customLabel)
    */