CODEWITHSUNDEEP
react-nativenext.jsenvironment-variablesexporeact-native-web
Luis
Luis

Reputation: 130

Env Variables not working for React Native

I'm working on a React Native Web project with NextJS, so I have the React Native app and NextJS running those componentes with React Native web. I have a single .env file since it's all in a monorepo.

The env variables for NextJS are working, but they're not working for React Native, I have an app.config.js that consumes the .env and then I import with with expo-constants, for NextJS I did the same thing with next.config.js.

Before you ask, yes my .env is in the root folder.

This is the file where I'm using the variables:

import { FirebaseApp, FirebaseOptions, initializeApp } from "firebase/app";
import { Auth, getAuth } from "firebase/auth";
import { Platform } from "react-native";
import Constants from "expo-constants";

const isWeb = Platform.OS === "web";

const { FIREBASE_PUBLIC_API } =
  Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY;
console.log(FIREBASE_PUBLIC_API);

const firebaseCredentials: FirebaseOptions = {
  appId: isWeb ? process.env.NEXT_PUBLIC_FIREBASE_APP_ID : FIREBASE_PUBLIC_API,
  apiKey: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: isWeb
    ? process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
    : Constants.manifest?.extra?.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

let app: FirebaseApp | null = null;
let auth: Auth | null = null;

const initFirebase = () => {
  if (!app) {
    app = initializeApp(firebaseCredentials);
    auth = getAuth();
  }

  return app;
};

This is the app.config.js:

export default {
  name: "CoolApp",
  version: "1.0.0",
  extra: {
    HASURA_GRAPHQL_ADMIN_SECRET: process.env.HASURA_GRAPHQL_ADMIN_SECRET,
    HASURA_GRAPHQL_API_URL: process.env.HASURA_GRAPHQL_API_URL,
    HASURA_GRAPHQL_CORS_DOMAIN: process.env.HASURA_GRAPHQL_CORS_DOMAIN,
    NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY:
      process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
      process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    NEXT_PUBLIC_FIREBASE_PROJECT_ID:
      process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET:
      process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
    NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID,
    NEXT_PUBLIC_LOGROCKET_ID: process.env.NEXT_PUBLIC_LOGROCKET_ID,
    NEXT_PUBLIC_MAPBOX_TOKEN: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
    NEXT_PUBLIC_MAPBOX_STYLE: process.env.NEXT_PUBLIC_MAPBOX_STYLE,
  },
};

Upvotes: 2

Views: 1743

Answers (2)

Kanan Farzali
Kanan Farzali

Reputation: 1063

you just need to prefix .env variables with EXPO_PUBLIC_

Upvotes: 0

vinayr
vinayr

Reputation: 11244

React Native or Expo does not load .env for you. You have to use some library like dotenv and then use it in expo like this -

import 'dotenv/config';

export default {
  name: 'CoolApp',
  version: '1.0.0',
  extra: {
    HASURA_GRAPHQL_API_URL: process.env.HASURA_GRAPHQL_API_URL,
  },
};

import Constants from 'expo-constants';

const { HASURA_GRAPHQL_API_URL } = Constants.manifest.extra;

You can read more about it in Expo documentation.

Upvotes: 1

Related Questions