Menu
I am using @react-navigation/stack in my expo app and everything has been working fine. I wanted to start to add tab/drawer navigation to my app and keep running into the following 2 errors when I try to import
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.
and
Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.
The following is my package.json:
{
"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"
},
"dependencies": {
"@react-native-community/async-storage": "^1.11.0",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/material-bottom-tabs": "^5.2.16",
"@react-navigation/material-top-tabs": "^5.2.16",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"@reduxjs/toolkit": "^1.4.0",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-elements": "^2.2.1",
"react-native-gesture-handler": "~1.6.0",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-tab-view": "^2.15.1",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.1",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
I've gone as far as creating a whole new expo app the solve this problem-but I still hit a wall once I import the bottom/top tab navigators. Any idea how to solve this?
430
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'. Attempted import error: 'Appearance' is not exported from 'react-native-web/dist/index'.
The React.js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file. To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports. Here is an example of how the error occurs.
yarn add react-native-reanimated react-native-gesture-handler react-native-tab-view react-native react-native-web In your src/index.js. Add import 'react-native-gesture-handler'; above import React from 'react';. In your root directory create config-overrides.js file and put the following content: In your package.json.
To solve the "Attempted import error 'X' is not exported from" error, be consistent with your ES6 imports and exports. If a value is exported as a default export, it has to be imported as a default import and if it's exported as a named export, it has to be imported as a named import.
Downgrade react-native-paper to 4.0.0-alpha.1 solved my issue. It seemed like [email protected] was incompatible with react-native-paper@^4.0.1.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
