ReanimatedError: Tried to synchronously call a non-worklet function on the UI thread. about react-native-story-view HOT 4 CLOSED

You can resolve this error by applying a patch:

Navigate to:
/node_modules/react-native-story-view/lib/components/MultiStoryContainer/MultiStoryContainer.js

Change line 4:
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
With
import Animated, { useAnimatedStyle, runOnJS } from 'react-native-reanimated';

Then from line 21 to line 30:

    const animationStyle = useAnimatedStyle(() => {
        switch (props.transitionMode) {
            case TransitionMode.Cube:
                return cubeTransition(index, scrollX);
            case TransitionMode.Scale:
                return scaleTransition(index, scrollX);
            default:
                return defaultTransition();
        }
    }, [index, scrollX.value]);

With:

    const animationStyle = useAnimatedStyle(() => {
        switch (props.transitionMode) {
            case TransitionMode.Cube:
                return runOnJS(cubeTransition)(index, scrollX);
            case TransitionMode.Scale:
                return runOnJS(scaleTransition)(index, scrollX);
            default:
                return runOnJS(defaultTransition)();
        }
    }, [index, scrollX.value]);

from react-native-story-view.

You can resolve this error by applying a patch:

Navigate to: /node_modules/react-native-story-view/lib/components/MultiStoryContainer/MultiStoryContainer.js

Change line 4: import Animated, { useAnimatedStyle } from 'react-native-reanimated'; With import Animated, { useAnimatedStyle, runOnJS } from 'react-native-reanimated';

Then from line 21 to line 30:

    const animationStyle = useAnimatedStyle(() => {
        switch (props.transitionMode) {
            case TransitionMode.Cube:
                return cubeTransition(index, scrollX);
            case TransitionMode.Scale:
                return scaleTransition(index, scrollX);
            default:
                return defaultTransition();
        }
    }, [index, scrollX.value]);

With:

    const animationStyle = useAnimatedStyle(() => {
        switch (props.transitionMode) {
            case TransitionMode.Cube:
                return runOnJS(cubeTransition)(index, scrollX);
            case TransitionMode.Scale:
                return runOnJS(scaleTransition)(index, scrollX);
            default:
                return runOnJS(defaultTransition)();
        }
    }, [index, scrollX.value]);

This is not working with react-native-reanimated version 3.4.1. However 3.3.0 works without problem.

from react-native-story-view.

Navigate to: /node_modules/react-native-story-view/lib/components/MultiStoryContainer/utils/StoryTransitions.js

Replace this code:

export const defaultTransition = () => ({ ...StyleSheet.absoluteFillObject });

with this code:

export const defaultTransition = () => {
    'worklet';
    return {
        ...StyleSheet.absoluteFillObject,
    };
};

from react-native-story-view.

@iArchin This issue is fixed.
Thank you for your PR @aawolf1099.

This change will be available in the next release.

from react-native-story-view.