[v4] [Reanimated] Tried to modify key `reduceMotion` of an object which has been already passed to a worklet

[Willham12]

Bug

[Reanimated] Tried to modify key reduceMotion of an object which has been already passed to a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.74.1
react-native-reanimated	3.12.0
react-native-gesture-handler	2.16.2

Steps To Reproduce

Open a Bottomsheet

Describe what you expected to happen:

Reproducible sample code

https://github.com/gorhom/react-native-bottom-sheet/blob/4b2a73991d4356ab13904262206abd3e6c8e2869/src/components/bottomSheet/BottomSheet.tsx#L1202

[fahad86]

https://github.com/gorhom/react-native-bottom-sheet/pull/1848

[pixellet14]

any solution yet?

[MonishReddyDev]

ANY SOLUTION

[paulschreiber]

@MonishReddyDev @pixellet14 The PR was just approved a few hours ago. Give them time to release a new version.

[ebere-hoag]

Its still showing up for me.

[duyrk]

I have the same problem

[ebere-hoag]

@paulschreiber because its not showing up for you doesn't mean you should put a thumbs down on others comments.

It happens when i open the bottomsheetmodal

[paulschreiber]

@ebere-hoag I am still seeing the problem. I am putting the 👎 because the people are being impatient. The fix has been approved, but not merged or released. Piling on "me too" comments at this point is not helpful.

[larsmunkholm]

@paulschreiber Anyone can approve the pull requests, so I'm not sure that really means anything. It hasn't been approved by @gorhom yet :)

[emrekilavuz]

if I downgrade to 4.6.1, will this warning be gone?

[sayan-avantai]

if I downgrade to 4.6.1, will this warning be gone?

nothing works till yet.

any update? neither have to use yellowbox/logbox for now.

[Nurulloh01]

did someone resolve it

[shymaaMohmed]

I have the same problem

[mrtawil]

+1

[Willham12]

There is a PR https://github.com/gorhom/react-native-bottom-sheet/pull/1848

[hdvinhhoang]

I have the same problem

[duyrk]

#1848 Apply the patch that mentioned in this issue, everything will work just fine.

[sayan-avantai]

There is a PR #1848

thanks. it's working .

[kashkashio]

Merging anytime soon?

[H4mxa]

+1

[shuo-hiwintech]

+1

[ksevil]

+1

[LeandroAlberti]

+1

[Zergus-s]

+1

[darkartur]

+1

[thianphat]

+1

[1mike12]

another quick workaround without having to fiddle with patches is to set the installation to the proposed PR for now

{
"dependencies": {
    "@gorhom/bottom-sheet": "pafry7/react-native-bottom-sheet#fix/config-reducerMotion-in-worklet",
    }
}

[tboy44wiz]

@1mike12 How do I go about with this your suggestion. Which of the app dependencies?

[bgever]

Thanks for the tip @1mike12, and thanks for the fix @pafry7!

For yarn, add the following to the root package.json (leave your existing dependencies unchanged):

  "resolutions": {
    "@gorhom/bottom-sheet": "github:pafry7/react-native-bottom-sheet#fix/config-reducerMotion-in-worklet"
  },

See https://yarnpkg.com/configuration/manifest#resolutions for what it does.

Then run yarn from the root package:

bart%Barts-MBP2 ~/repos/myapp ➜ yarn                                                                                                                                                                                                                                                                                         
➤ YN0000: · Yarn 4.3.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @gorhom/bottom-sheet@https://github.com/pafry7/react-native-bottom-sheet.git#commit=9c4c6eba41197a92990e79591dc9e6546ab9edbb
➤ YN0085: │ - @gorhom/bottom-sheet@npm:4.6.3
➤ YN0000: └ Completed in 33s 710ms
[...]

I had to clear the Metro cache before it started to work.

[LukasMod]

Any idea why even with this fix I get this warning after modal is opened second time?

First open / close is working fine, but next time when I try to open the same or another BottomSheetModal it shows warning with reduceMotion info. Is it something wrong with implementation here? I use same HOC for all my modals. In children it's usually BottomSheetScrollView. Tried both patch-package and this solution. I can see these code changes in my node_modules so fix is there.

const animationConfig: WithSpringConfig | WithTimingConfig = { duration: 400 };

const DrawerModal: React.FC<DrawerModalPropsType> = ({
    visible,
    children,
    onDismiss,
    snapPoints = ['70%'],
    ...rest
}) => {
    const styles = theme();

    const modalRef = useRef<BottomSheetModal>(null);

    if (modalRef) {
        useBottomSheetBack(visible, modalRef, onDismiss);
    }

    useEffect(() => {
        if (visible) {
            InteractionManager.runAfterInteractions(() => {
                modalRef.current?.present();
            });
        } else {
            if (modalRef.current) {
                modalRef.current.close();
            }
        }
    }, [visible]);

    const handleSheetChanges = useCallback((index: number) => {
        if (index === -1) {
            onDismiss?.();
        }
    }, []);

    const renderBackdrop = useCallback(
        (props: BottomSheetBackdropProps) => (
            <BottomSheetBackdrop
                {...props}
                disappearsOnIndex={-1}
                appearsOnIndex={0}
                pressBehavior='close'
            />
        ),
        [],
    );

    return (
        <BottomSheetModal
            ref={modalRef}
            index={0}
            snapPoints={snapPoints}
            onChange={handleSheetChanges}
            animationConfigs={animationConfig}
            enableDismissOnClose
            backdropComponent={renderBackdrop}
            enableContentPanningGesture={false}
            {...rest}>
            {children}
        </BottomSheetModal>
    );
};

export default DrawerModal;