tried to synchronously call function from a different thread

[musetraine]

Can't use moti import { MotiView } from 'moti' <MotiViewfrom={{ opacity: 0, scale: 0.5 }}/>

[nandorojo]

Please provide a full reproduction.

[musetraine]

babel.config

`module.exports = function(api) { api.cache(true);

return {
    presets: [
        'babel-preset-expo',
        '@babel/preset-typescript',
        ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
    ],
    plugins: [
        ['@babel/plugin-proposal-decorators', {'legacy': true}],
        'babel-plugin-parameter-decorator',
        'babel-plugin-transform-typescript-metadata',
        '@babel/plugin-transform-runtime',
        [
            'module-resolver',
            {
                root:       ['./src'],
                extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
                alias:      {
                    src: './src',
                },
            }
        ],
        'react-native-reanimated/plugin',
    ]
};

}; `

`` const createExpoWebpackConfigAsync = require('@expo/webpack-config'); const path = require('path');

const asyncConf = async function(env, argv) { const config = await createExpoWebpackConfigAsync({ ...env, babel: { dangerouslyAddModulePathsToTranspile: ['moti'] }, }, argv);

config.module.rules.forEach(r => {
    if (r.oneOf) {
        r.oneOf.forEach(o => {
            if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                o.include = [
                    path.resolve('.'),
                    path.resolve('../../node_modules/@vxlive/core'),
                ]
            }
        })
    }
})

return config;

};

module.exports = asyncConf;

``

[nandorojo]

It would help if you can start a fresh project, only add moti, and see if you get the same error.

[TijsM]

I'm having the same error, it's a pretty fresh project i'm working on and there are no other packages using reanimated yet.

the error occurs whenever i render the MotiView

babel.config.js:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  }
}

package.json:

{
  "name": "my-cancer-companion-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@bothrs/expo-mixpanel-analytics": "^2.0.0",
    "@bothrs/translations": "^1.0.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.0",
    "@fortawesome/free-solid-svg-icons": "^6.1.0",
    "@fortawesome/react-native-fontawesome": "^0.2.7",
    "@react-native-async-storage/async-storage": "^1.16.1",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "expo": "~44.0.0",
    "expo-auth-session": "~3.5.0",
    "expo-linking": "~3.0.0",
    "expo-notifications": "^0.14.1",
    "expo-random": "~12.1.1",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "graphql": "^16.3.0",
    "i18next": "^21.6.14",
    "moti": "^0.17.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-get-random-values": "^1.7.2",
    "react-native-pager-view": "^5.4.15",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "^12.3.0",
    "react-native-web": "0.17.1",
    "styled-components": "^5.3.3",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@bothrs/eslint-config": "^1.5.0",
    "@bothrs/zero-height": "^0.1.7",
    "@expo/webpack-config": "^0.16.19",
    "@storybook/addon-actions": "6.4.19",
    "@storybook/addon-controls": "6.4.19",
    "@storybook/addon-docs": "6.4.19",
    "@storybook/addon-essentials": "6.4.19",
    "@storybook/addon-interactions": "^6.4.19",
    "@storybook/addon-links": "6.4.19",
    "@storybook/builder-webpack5": "6.4.19",
    "@storybook/manager-webpack5": "6.4.19",
    "@storybook/react": "6.4.19",
    "@storybook/testing-library": "^0.0.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "@types/styled-components": "^5.1.24",
    "@types/styled-components-react-native": "^5.1.3",
    "@types/uuid": "^8.3.4",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^2.0.6",
    "chromatic": "^6.5.2",
    "eslint": "^8.11.0",
    "prettier": "^2.6.0",
    "typescript": "~4.3.5",
    "webpack": "5"
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "private": true
}