4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

react-native-dotenvのインストールからセットアップまで(TypeScript向け)

Last updated at Posted at 2021-10-01

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

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?