@env couldn't found

[sumit96367]

@env could not be found within the project or in these directories:
node_modules
1 | import { useState, useEffect } from "react";
2 | import axios from "axios";

3 | import { RAPID_API_KEY } from '@env'
| ^
4 |
5 | const rapidApiKey = RAPID_API_KEY;

[JPaul23]

Hello @sumit96367 , after some research this is how I resolved it on my end
In my useFetch.js

import { RAPID_API_KEY } from '@env';
const rapidApiKey = RAPID_API_KEY;

and in my babel.config.js I added this ["module:react-native-dotenv"] in plugin as below:

plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin",
      require.resolve("expo-router/babel"),
      ["module:react-native-dotenv"],
    ],

Let me know if it works for you.

[JatinBisht2308]

@JPaul23 @sumit96367 @adrianhajdin
After that, it will give and error like react-native-dotenv module not found so download the react-native-dotenv module.
npm install react-native-dotenv
Then it will work.

[AlejandroSuero]

Hello @sumit96367 and everyone else who has this problem,

I've started with react native through JavaScriptMastery this week and I've been getting the same error. And here is my solution.

I added this to my app.json, which I renamed as app.config.js

// app.config.js
import "dotenv/config"

export default {
    // Default app.json
    extra: {
        // Default extra
        rapidApiKey: process.env.RAPID_API_KEY,
        // ...
    }
}

If you don't have dotenv installed:

npm install --save-dev dotenv

Then to call these enviroment variables:

// useFetch.js
// ... imports
import Constants from "expo-constants"

const rapidApiKey = Constants.expoConfig.extra.rapidApiKey
// ...

If you don't have expo-constants installed:

npx expo install expo-constants

[adewale2018]

Hello @sumit96367 and everyone else who has this problem,

I've started with react native through JavaScriptMastery this week and I've been getting the same error. And here is my solution.

I added this to my app.json, which I renamed as app.config.js

// app.config.js
import "dotenv/config"

export default {
    // Default app.json
    extra: {
        // Default extra
        rapidApiKey: process.env.RAPID_API_KEY,
        // ...
    }
}

If you don't have dotenv installed:

npm install --save-dev dotenv

Then to call these enviroment variables:

// useFetch.js
// ... imports
import Constants from "expo-constants"

const rapidApiKey = Constants.expoConfig.extra.rapidApiKey
// ...

If you don't have expo-constants installed:

npx expo install expo-constants

Thank you for this solution. This is my first time of learning react-native.

[JohnnyZhov]

Hello coders!

I found solution the next way:

1. Install the following packages:

   npx expo install expo-constants expo-config
   npm install --save-dev metro-react-native-babel-preset

2. Rename 'app.json' to 'app.config.js':

const extra = require('./extra');

module.exports = {
  expo: {
    name: "react_native_jobs",
    slug: "react_native_jobs",
    version: "1.0.0",
    orientation: "portrait",
    icon: "./assets/images/icon.png",
    scheme: "myapp",
    userInterfaceStyle: "automatic",
    splash: {
      image: "./assets/images/splash.png",
      resizeMode: "contain",
      backgroundColor: "#ffffff"
    },
    assetBundlePatterns: [
      "**/*"
    ],
    ios: {
      supportsTablet: true
    },
    android: {
      adaptiveIcon: {
        foregroundImage: "./assets/images/adaptive-icon.png",
        backgroundColor: "#ffffff"
      }
    },
    web: {
      bundler: "metro",
      output: "static",
      favicon: "./assets/images/favicon.png"
    },
    plugins: [
      "expo-router"
    ],
    experiments: {
      typedRoutes: true
    },
    extra: extra,
  }
};

3. Create a file named 'extra.js' in the root directory:

module.exports = {
  RAPID_API_KEY: 'rapid_api_key',
};

4. Your 'Babel.config.js':

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module:react-native-dotenv']
  ],
};

5. Use the following approach in 'useFetch.js':

   import Constants from 'expo-constants';
   // This extracts the RAPID_API_KEY from our Expo configuration. This is the API key that we're using to authenticate our requests.
   const { RAPID_API_KEY } = Constants.expoConfig; 
   // This creates a new variable rapidApiKey and assigns it the value of RAPID_API_KEY. This step is not strictly necessary, as you could use RAPID_API_KEY directly. However, it can make your code clearer by giving a more descriptive name to the API key.
   const rapidApiKey = RAPID_API_KEY; 

Hopefully, the original set-up works for the majority. If not, this approach could be a solution for someone who runs into the same problem as I did.

Happy coding!