[RN] React Native 환경변수 설정

react-native-dotenv

React Native 애플리케이션에서 .env 파일을 활용할 수 있도록 도와주는 라이브러리

설치

npm install -D react-native-dotenv
npm insall @types/react-native-dotenv // typescript

-------

yarn add -D react-native-dotenv
yarn add @types/react-native-dotenv // typescript

사용법

babel.config.js

프로젝트 내의 .env.local 파일을 불러올 수 있도록 구성

module.exports = {
	presets: ['module:metro-react-native-babel-preset'],
	plugins: [
		// react-native-dotenv
		[
			'module:react-native-dotenv',
			{
				"envName": "APP_ENV",
				"moduleName": "@env", // import 해올 때 react-native-env -> @env 가능.
				"path": ".env",
				"blocklist": null,
				"allowlist": null,
				"blacklist": null, 
				"whitelist": null, 
				"safe": false, // .env 파일에 정의된 환경 변수만 허용
				"allowUndefined": true, // 정의되지 않은 변수 가져오기를 허용
				"verbose": false
			},
		],
	]
}

.env

프로젝트의 루트 경로에 파일을 생성

API_URL = https://velog.io/....

.env.d.ts

타입스크립트 환경에서는 env.d.ts 파일을 생성하고 사용하고자 하는 환경 변수 타입을 지정 해야한다.
추가를 안 할 시, 환경 변수를 사용하려 할 때 해당 변수를 찾을 수 없다고 오류가 발생하게 된다.

declare module '@env' {
	export const API_URL: string;
  	// ... export const 환경변수 이름: string;
}

Import

import {API_URL} from "@env"
// 또는
// import {API_URL, API_TOKEN} from "react-native-dotenv"

fetch(`${API_URL}/users`, {
  headers: {
    'Authorization': `Bearer ${API_TOKEN}`
  }
});