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

[chaman-khan]

Hey cgilvas, my problem was sort out by installing [email protected] when my [email protected],,

I think these both libraries are co-related so

firstly install react-native-gesture-handler by

yarn add react-native-gesture-handler

and then clear cache by

npm start -- --reset-cache

After that it worked in my case

[chaman-khan]

Hey devs,

My same problem was sort out by installing [email protected] when my [email protected],,

I think these both libraries are co-related so

firstly install react-native-gesture-handler by

yarn add react-native-gesture-handler

and then clear cache by

npm start -- --reset-cache

After that it worked in my case

[MatiPl01]

Interesting that installation of react-native-gesture-handler solves the problem with react-native-reanimated. Reanimated should work fine without other dependencies. Could you please share a repo/minimal repro where you experience problems with reanimated installation if possible?

[chaman-khan]

The Reanimated library integrates tightly with the Gesture Handler library, especially for handling gestures like taps, swipes, and other user interactions. So you should know about gesture handling which works with animation, pich-zoom, swiping etc

[MatiPl01]

Yes, I understand you and know about the gesture handler but I mean that react-native-reanimated should work as a standalone library and shouldn't need gesture handler if you want to just use reanimated for animations.

Do you use react-native-gesture-handler somehow in your project or just installed it to fix the issue with reanimated?

[Ali-Raza-Gill]

in my case i also get this error, when i added this plugins to babel.config file "plugins: ['react-native-reanimated/plugin']" and add react-native-gesture-handler and run with
npm run start -- --reset-cache
it works for me