Question 260274 in React native Question posted in
The official React Native documentation can be found here.

React native – web compiled with 33 warnings – Expo react-native-web Drawer Navigator and reanimated issue

I’m working on expo and react native project for all platforms (web ,android ,ios) but I got this error once I add drawer navigator to my app
I already included import ‘react-native-gesture-handler’; into my entry point at the top

WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:11:4
export ‘default’.’greaterThan’ (imported as ‘Animated’) was not found in ‘react-native-reanimated’ (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
9 | cond,
10 | greaterThan,

11 | } = Animated;
| ^
12 |
13 | const interpolate: typeof interpolateNode =
14 | interpolateNode ?? interpolateDeprecated;

any help would be appreciated I’ve been stucking here since two days
babel.config.js

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

package.json

{
  "name": "react_native_carsec",
  "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"
  },
  "dependencies": {
    "@expo-google-fonts/roboto": "^0.2.3",
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^19.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@types/react-native": "^0.72.2",
    "babel-preset-expo": "^9.5.2",
    "expo": "~49.0.8",
    "expo-constants": "~14.4.2",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "react-native-reanimated": "~3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

what I’ve tried :

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    'react-native-reanimated/plugin',],
  
  };
};
//and tried that    

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

and once I changed the presets I’m getting that error
Uncaught TypeError: (0 , _nonSecure.nanoid) is not a function

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it after a long hard search it's just related to webpack bundler , I've replaced my bundler with metro bundler which is built and optimized for react native. here https://docs.expo.dev/guides/customizing-metro/#web-support .

    1- make sure you're correctly install these dependencies for the drawer navigator and reanimated as it's recommended here https://reactnavigation.org/docs/drawer-navigator/#props and to add necessary plugins into babel.config.js file .

    2- uninstall @expo/webpack-config .

    3- add to app.json file

    {
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

    and should web bundling complete with no warnings


  2. 0

    Solution from official Expo docs helps me: https://docs.expo.dev/router/advanced/drawer/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search