withTiming callback unknown error

Description

I’m want to dismiss overlay when the animation is complete, but app crash when provide withTiming callback function. Maybe I do something wrong?

Screenshots

Snack or minimal code example

import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Colors, Spacing } from '@styles';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    withTiming,
    useDerivedValue,
} from 'react-native-reanimated';
import { Navigation } from 'react-native-navigation';

export const Toast = function ({ componentId }) {
    const progress = useSharedValue(-1);
    const translateY = useDerivedValue(() => {
        return progress.value * 130;
    });
    const animatedStyles = useAnimatedStyle(() => {
        if (progress.value == 0) {
            progress.value = withTiming(-1, null, (isFinished) => {
                if (isFinished) {
                    Navigation.dismissOverlay(componentId);
                }
            });
        }
        return {
            transform: [{ translateY: translateY.value }],
        };
    });
    useEffect(() => {
        progress.value = withTiming(0);
    }, []);
    return (
        <View style={styles.root}>
            <Animated.View style={[styles.toast, animatedStyles]} />
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        flex: 1,
        backgroundColor:Colors.BLACK,
        paddingHorizontal: Spacing.SPACING_LG,
    },
    toast: {
        height: 130,
        width: '100%',
        borderRadius: Spacing.SPACING_SM,
        backgroundColor: Colors.GRAY_DARK,
    },
});

Toast.options = {
    overlay: {
        interceptTouchOutside: false,
    },
};

Package versions

• React: “16.13.1”
• React Native: “0.63.2”
• React Native Reanimated: “2.0.0-alpha.7”

[karol-bisztyga]

Hey! Thanks for the repo 😃 I managed to get it working using new release https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0-alpha.8

With runOnJS functionality such code works:

const dismiss = () => {
  Navigation.dismissOverlay(componentId);
};
const animatedStyles = useAnimatedStyle(() => {
  if (progress.value == 0) {
    progress.value = withTiming(-1, null, (isFinished) => {
      if (isFinished) {
        runOnJS(dismiss)();
      }
    });
  }
  return {
    transform: [{translateY: translateY.value}],
  };
});

[caiphaav]

@terrysahaidak ad 1 - doesn’t matter, can be undefined or null - both work as a passed config object is implicitly converted when checked ad 2 - true, @caiphaav why don’t you try to move this part

if (progress.value == 0) {
            progress.value = withTiming(-1, null, (isFinished) => {
                if (isFinished) {
                    Navigation.dismissOverlay(componentId);
                }
            });
        }

outside of the useAnimatedStyle. This is considered to be a bad practice. Not sure if that would fire this particular error though.

@karol-bisztyga Thank you for your reply. Where I should move this part? To useeffect or another reanimated hook?