If IOS is forced to dark mode, userInterfaceStyle prop doesnt override it.

[hani-q]

 props.showActionSheetWithOptions(
            {
                options: calcValArray,
                destructiveButtonIndex: _.indexOf(
                    calcValArray,
                    prayerSettings.caclMethod,
                ),
                cancelButtonIndex: 0,
                useModal: true,
                userInterfaceStyle: 'light',
            },
            (buttonIndex) => {
                if (buttonIndex !== 0)
                    setCalcMethod(
                        calcValArray[buttonIndex],
                    );
            },
        );

in the above example IOS physical phone is forced to Dark Mode. But if sheet is opened with light interfaceStyle. it still opens as dark.

[bradbyte]

@hani-q Are you able to replicate this with the out of box react ActionSheetIOS? We're just passing the prop through to them. Thanks.

[david50407]

@bradbyte nop, this only happens with this library, if I passed userInterfaceStyle to react-native's ActionSheetIOS, it works well.

[david50407]

And the wired thing is:

If I open the just-installed node_modules/@expo/react-native-action-sheet/lib/module/ActionSheet/index.ios.js and save with formatter without modifing any codes maunally, it works again. (And it works even I change back until I re-install the whole package)

This also happened in node_modules/@expo/react-native-action-sheet/lib/module/ActionSheet/ActionGroup.js which should show destructive color on destructive button on Android, but it won't work before I do this TRICK.

This might only happens in dev mode (with online metro bundler). In production mode (with pre-built bundled js), it seems well.

I'm not sure this is a bundler bug in this package or the issue is on the react-native side.

[bradbyte]

@david50407 So are you saying that in production the ActionSheet uses the correct style, but only when developing locally it has the issue? It could be an issue with caching... perhaps deleting the dependency from your node_modules and and then reinstalling, or running expo with expo start --clear to reset it's cache too. If you put the app in production mode locally does it work again?

Thank you!

[david50407]

@bradbyte Yes, I faced this issue only in development mode, but after I clean cache, the problem still happens. I tried many times to deleting node_module/, cleaning up caches (npx react-native start --reset-cache), reinstalling @expo/react-native-action-sheet, but nothing helps. Until I do the trick "re-save files in node_modules/@expo/react-native-action-sheet/lib/module". I know, this is so weird though.

btw, I'm using React Native without expo and yarn (I use npm instead), if this is also important information to you.

[francismarcus]

Facing somewhat of a similar issue.

userInterfaceStyle: 'dark'

Is being displayed as light. Clearing the cache does not help nor does removing the package and reinstalling. However, when ejecting from Expo the issue is gone.

[bradbyte]

I did some digging and found this works as expected when your view is wrapped in a Modal. I remember something like this effecting other native pickers... where the expo userInterfaceStyle was overriding the view but when you are in a modal it's a separate layer and isn't being "forced".

[ryan-reichenberg]

This doesn't work in expo go regardless of whether the view is wrapped in a modal. What I did find is if you "force" the userInterfaceStyle in the app.json file. It should filter through to react-native-action-sheet