#はじめに
React Nativeで環境変数を使う際に react-native-dotenv という便利なライブラリがあったので紹介(TypeScript向け)
#STEP 1
以下のコマンドをターミナルから実行
npm install -D @types/react-native-dotenv
または
yarn add -D @types/react-native-dotenv
#STEP2
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",
},
],
],
};
};
#STEP3
ルートディレクトリにconfig.env
, env.d.ts
ファイルを作成し以下のようにする
config.env
API_KEY="hoge"
SECRET_KEY="secret-hoge"
env.d.ts
declare module '@env' {
export const API_KEY: string;
export const SECRET_KEY: string;
}
また, tsconfig.json
にも以下を追加する
tsconfig.json
{
,,,
"typeRoots": ["./types"]
,,,
}
#STEP4
変数を使用したいファイル内で以下のようにimport
できる
import { API_KEY, SECRET_KEY } from "@env"
完了。
#最後に
どうやらreact-native-config
なるものもあるらしいですがどっちがいいのかは好みかなーって感じです。