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

Closes #608

Author: SkMamtajuddin

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);
+      });
+
 });