Cannot read property 'makeMutable' of undefined

[Bebrevski]

Hey guys

I found this nice library Reanimated for react native, but i have some issues with the using

I have installed the package with
npm i react-native-reanimated

Added plugin into babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel', 'react-native-reanimated/plugin'],
    },
  },
};

And using the library like this

import { StyleSheet, View, TouchableWithoutFeedback, TouchableOpacity } from 'react-native'
import React, { useState, useEffect } from 'react'
import Animated, {
    interpolateColor,
    useAnimatedStyle,
    withTiming,
    useDerivedValue
} from 'react-native-reanimated'

const Switch = () => {

    const [active, setActive] = useState(false);

    const progress = useDerivedValue(() => {
        return withTiming(active ? 22 : 0)
    });
    const backgroundColorStyle = useAnimatedStyle(() => {
        const backgroundColor = interpolateColor(
            progress.value,
            [0, 22],
            ['#F2F5F7', '#FFA901']
        );

        return {
            backgroundColor
        }
    });

    return (
        <TouchableWithoutFeedback onPress={() => {
            console.log('Pressed')
            setActive(!active)
        }}>
            <Animated.View style={[styles.container, backgroundColorStyle]}>
                <Animated.View style={styles.circle} />
            </Animated.View>
        </TouchableWithoutFeedback>
    )
}

export default Switch

const styles = StyleSheet.create({
    container: {
        width: 50,
        height: 32,
        backgroundColor: '#C1E1FF',
        borderRadius: 30,
        justifyContent: 'center'
    },
    circle: {
        width: 20,
        height: 20,
        marginLeft: 5,
        backgroundColor: 'white',
        borderRadius: 30,
        shadowColor: 'black',
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.2,
        shadowRadius: 2.5
    }
})

But when i start the project i get this error
TypeError: Cannot read property 'makeMutable' of undefined

Current dependencies and versions of the project

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@reduxjs/toolkit": "^2.0.1",
    "react": "18.2.0",
    "react-native": "0.73.1",
    "react-native-paper": "^5.11.4",
    "react-native-reanimated": "^3.6.1",
    "react-native-safe-area-context": "^4.8.0",
    "react-native-screens": "^3.29.0",
    "react-native-svg": "^14.1.0",
    "react-native-svg-transformer": "^1.2.0",
    "react-native-vector-icons": "^10.0.3",
    "redux": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.18",
    "@react-native/eslint-config": "^0.73.1",
    "@react-native/metro-config": "^0.73.2",
    "@react-native/typescript-config": "^0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-optional-require": "^0.3.1",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },

I really struggle with it. I have made a research for the problem, but no working solutions for my exact problem

[MatiPl01]

Are you sure you want to put 'react-native-reanimated/plugin' under env.production in the babel.config.js file? Probably you face the issue because you specify this plugin for production builds only. I think it should be listed in the plugins array as in this example:

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

A similar example can be found in reanimated docs.

[chaman-khan]

I did it according to reanimated docs as
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ['react-native-reanimated/plugin']
};

but still facing same issue
ERROR TypeError: Cannot read property 'makeMutable' of undefined

what can be problem is?

[cgilvas]

Hey !
can u find solution ? i have same probleme