[React-Native] 리액트네이티브에서 환경변수 사용하기

React에서 환경변수를 사용할 경우 아래와 같은 방법(process.env)으로 환경변수를 불러와 사용했다.

// .env 파일
REACT_APP_API_KEY = 12345678910

// App.js
const API_KEY = process.env.REACT_APP_API_KEY;

React-Native에서 환경변수 사용하기 (with react-native-dotenv)

0. 환경변수 파일 생성 (.gitignore에 .env 꼭 작성하기!!)

// .env
API_KEY = 12345678910

1. react-native-dotenv 라이브러리 설치하기

yarn add react-native-dotenv

or 

npm install react-native-dotenv

2. babel.config.js 수정하기

// babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

3. 환경변수 불러오기

// App.js

import { API_KEY } from "@env";
// babel.config.js파일에서 모듈네임을 @env로 설정했기 때문에 @env에서 불러온다.
// 모듈네임을 설정하지 않은 경우에는 import { API_KEY } from 'react-native-dotenv;

const data = await fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );

4. 타입스크립트

env.d.ts 파일을 루트에 만들고 아래와 같이 타입 지정을 해줘야한다. 타입스크립트을 사용할 때 아래와 같이 하지 않으면 에러가 발생해서 환경변수에 접근하지 못한다.

declare module '@env' {
  export const API_URL: string;
}