dropdownStyle's boxShadow does not work

[tony221004]

Device: ios simulator(xcode 13.4.1 > iphone 13 mini simulator)

Summary

Styles related with boxShadow can't be applied on dropdown container.

Steps to Reproduce

If you type codes below, can check same issue. (it's all!)

const options = [
   {value: 1, label: '01'},
   {value: 2, label: '02'}, 
   {value: 3, label: '03'}, 
   {value: 4, label: '04'},
   {value: 5, label: '05'}
]

function Select({onChange}) {
    return (
        <SelectDropdown
            data={options}
            rowTextForSelection={({label})=>label}
            buttonTextAfterSelection={({label}) => label}
            dropdownOverlayColor={'transparent'}
            dropdownStyle={{
                backgroundColor: '#ffffff',
                overflow: 'visible',
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: {
                    width: 0,
                    height: 1
                },
                shadowRadius: 5,
                shadowOpacity: 1,
                borderRadius: 8,
            }}
            onSelect={console.log}
        />
    )
}

Expected Behavior

A dropdown container be applied boxShadow.

(there is no problem about android)

Actual Behavior

nothing happened about dropdown container.(only boxShadow don't work, other styling is work well)

A thing I tried

In the case of buttonStyle, overflow: hidden is applied to dropdownButton, but it works well if I style the boxShadow after applying overflow:visible in duplicate.

With the same principle, even if overflow: hidden was applied to useLayoutDropdown, I thought it would be successful to try boxShadow styling after duplicate application of overflow:visible to dropdownStyle. However, it does not apply.

Why I attempted overflow: visible

link

[tony221004]

I found the cause of the problem.

below code is github source code.

const dropdownWindowStyle = useMemo(() => {
    const top =
      remainigHeightAvoidKeyboard < dropdownPY + safeDropdownViewUnderKeyboard
        ? remainigHeightAvoidKeyboard - safeDropdownViewUnderKeyboard
        : dropdownPY;
    return {
      ...{
        borderTopWidth: 0,
        overflow: 'hidden',
      },
      ...dropdownStyle,
      ...{
        position: 'absolute',
        top: top,
        height: dropdownHEIGHT,
        width: dropdownWIDTH,
      },
      ...(I18nManager.isRTL ? {right: dropdownStyle?.right || dropdownPX} : {left: dropdownStyle?.left || dropdownPX}),
    };
  }, [dropdownStyle, remainigHeightAvoidKeyboard, dropdownPX, dropdownPY, dropdownHEIGHT, dropdownWIDTH]);

And below code is real source code.

const dropdownWindowStyle = useMemo(() => {
    const top =
      remainigHeightAvoidKeyboard < dropdownPY + safeDropdownViewUnderKeyboard
        ? remainigHeightAvoidKeyboard - safeDropdownViewUnderKeyboard
        : dropdownPY;
    return {
      ...dropdownStyle,
      ...{
        position: 'absolute',
        top: top,
        height: dropdownHEIGHT,
        width: dropdownWIDTH,
        borderTopWidth: 0,
        overflow: 'hidden',
      },
      ...(I18nManager.isRTL ? {right: dropdownStyle?.right || dropdownPX} : {left: dropdownStyle?.left || dropdownPX}),
    };
  }, [dropdownStyle, remainigHeightAvoidKeyboard, dropdownPX, dropdownPY, dropdownHEIGHT, dropdownWIDTH]);

I can't override style property about overflow, borderTopWidth.

So I couldn't adapt shadowing style.

Can you fix this problem? or if this is not your mistake, please tell me why you architected code like that?

[tony221004]

This problem was solved after applying 3.1 version.

[hemaljoshi]

This problem can be solved by ading simple style like overflow: "visible"