diff --git a/index.d.ts b/index.d.ts index 1760dbc5..2924ff41 100644 --- a/index.d.ts +++ b/index.d.ts @@ -91,6 +91,8 @@ export interface PickerSelectProps { Icon?: React.FC; InputAccessoryView?: React.ReactNode; darkTheme?: boolean; + dropdownItemStyle?: StyleProp, + activeItemStyle?: StyleProp, } declare class Picker extends React.Component { diff --git a/src/index.js b/src/index.js index 7d6f44db..6fcb2059 100644 --- a/src/index.js +++ b/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 ( { 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( + {}} + 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); + }); + });