Creating a package based on reanimated

[muraterd]

Hi,
I'm trying to create a npm package for react native. Basically I have an AnimatedBox component in my package which is a basic Animated.View changing width with time. When i put the code below in node_modules with a simple package.json file the box doesn't animate and the console giving me a warning. which says "Tried to call timer with ID 3 but no such timer exists."

import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

export var AnimatedBox = function () {
  var width = useSharedValue(100);

  var animatedStyle = useAnimatedStyle(function () {
    return {
      width: width.value,
    };
  });

  useEffect(function () {
    width.value = withTiming(200);
  }, []);

  return <Animated.View style={[styles.box, animatedStyle]} />;
};

var styles = StyleSheet.create({
  box: {
    height: 100,
    backgroundColor: 'red',
    marginTop: 20,
    borderRadius: 10,
  },
});

Also I tried to compile the code with babel using the configuration below but the result is same.

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["react-native-reanimated/plugin"],
};

It may be a silly question but I can't figure out what to do.

[yatessss]

same issue

[MatiPl01]

Hey!
Can you share some more details about your repository setup? Share the package.json file and show/describe directory structure?
It's hard to suggest a solution without knowing your configuration.

[yatessss]

After investigating, I found that it was indeed caused by the redux-persist library. I removed it, the animations started working again. However, I don't know why

[MatiPl01]

Thanks for information! Good to hear that you resolved the issue.
It is interesting that the issue was caused by the redux-persist, as it is unrelated and shouldn't break anything.

I am closing this discussion, since the problem is resolved. Feel free to re-open the discussion if you have more questions.