はじめに

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なるものもあるらしいですがどっちがいいのかは好みかなーって感じです。