<aside> ⚠️ 잘 안될 경우: i. 시뮬레이터 재시작 ii. expo start -c 실행 (캐시 초기화)

</aside>

참고링크

Using environment variables in a React Native App.

react-native-dotenv

Step 0. 패키지 설치

yarn add "@types/react-native-dotenv"

Step 1. .env 파일 생성

# Shoong EC2 instance end point
API_BASE_URL=http://k6a103.p.ssafy.io:8081

Step 2. babel.configure.js

• “plugins” 아래에 아래 코드 추가

[
  'module:react-native-dotenv',
  {
    moduleName: '@env',
    path: '.env',
    blacklist: null,
    whitelist: ['API_BASE_URL'],   // 여기에 환경변수들 추가
    safe: false,
    allowUndefined: true,
  },
],

Step 3. TypeScript 설정

• ~/types 폴더 아래에 env.d.ts 파일 생성

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

• tsconfig.json의 “compilerOptions” 안에 다음을 추가

  "typeRoots": ["./src/types"]
  

Step 4. 사용 예시

import { Text } from 'react-native';
import { API_BASE_URL } from '@env';

const Test = () => {
  return (
     <Text>{API_BASE_URL}</Text>
  );
};

export default Test;