feat: apply custom styling to active dropdown item (#609)

Closes #608

index.d.ts

@@ -91,6 +91,8 @@ export interface PickerSelectProps {
  Icon?: React.FC;
  InputAccessoryView?: React.ReactNode;
  darkTheme?: boolean;
+ dropdownItemStyle?: StyleProp<ViewStyle>,
+ activeItemStyle?: StyleProp<ViewStyle>,
 }
 
 declare class Picker extends React.Component<PickerSelectProps> {

src/index.js

@@ -61,6 +61,7 @@ export default class RNPickerSelect extends PureComponent {
  Icon: PropTypes.func,
  InputAccessoryView: PropTypes.func,
  dropdownItemStyle: PropTypes.shape({}),
+ activeItemStyle: PropTypes.shape({}),
  };
 
  static defaultProps = {
@@ -91,6 +92,7 @@ export default class RNPickerSelect extends PureComponent {
  InputAccessoryView: null,
  darkTheme: false,
  dropdownItemStyle: {},
+ activeItemStyle: {},
  };
 
  static handlePlaceholder({ placeholder }) {
@@ -276,14 +278,15 @@ export default class RNPickerSelect extends PureComponent {
  }
 
  renderPickerItems() {
- const { items } = this.state;
+ const { items, selectedItem } = this.state;
  const defaultItemColor = this.isDarkTheme() ? '#fff' : undefined;
- const { dropdownItemStyle } = this.props;
+
+ const { dropdownItemStyle, activeItemStyle } = this.props;
 
  return items.map((item) => {
  return (
  <Picker.Item
- style={dropdownItemStyle}
+ style={selectedItem.value === item.value ? activeItemStyle : dropdownItemStyle}
  label={item.label}
  value={item.value}
  key={item.key || item.label}

test/test.js

@@ -579,4 +579,47 @@ describe('RNPickerSelect', () => {
  expect(item.props().style).toEqual(customDropdownItemStyle);
  });
  });
+
+ it('should apply custom styles to the active dropdown item', () => {
+ const customActiveItemStyle = {
+ backgroundColor: '#d0d4da',
+ color: '#000',
+ };
+
+ const selectItems = [
+ { label: 'Item 1', value: 'item1', key: '1' },
+ { label: 'Item 2', value: 'item2', key: '2' },
+ ];
+
+ const placeholder = { label: 'Select an item...', value: null };
+
+ const wrapper = shallow(
+ <RNPickerSelect
+ items={selectItems}
+ placeholder={placeholder}
+ onValueChange={() => {}}
+ activeItemStyle={customActiveItemStyle}
+ value="item2" // Select "Item 2"
+ />
+ );
+
+ // Open the picker
+ wrapper.find('[testID="ios_touchable_wrapper"]').simulate('press');
+
+ // Find picker items
+ const pickerItems = wrapper.find('Picker').find('PickerItem');
+
+ // Ensure picker items are found
+ expect(pickerItems.length).toBeGreaterThan(0);
+
+ // Check if the active item has the custom styles
+ const activeItem = pickerItems.findWhere((item) => item.prop('value') === 'item2');
+
+ // Ensure activeItem is found
+ expect(activeItem.exists()).toBe(true);
+
+ // Check styles applied to the active item
+ expect(activeItem.prop('style')).toEqual(customActiveItemStyle);
+ });
+
 });