Environment Variables in React Native

Install react-native-dotenv

npm i react-native-dotenv

Add the preset in babel.config.js

// babel.config.js

module.exports = {
  presets: [
    'babel-preset-expo', 
    'module:react-native-dotenv'
  ]
}

Define your environment variables in .env

API_USERNAME=XXX
API_PASSWORD=XXX
API_URL_AUTH=XXX

And now you can import and use them in your code

// App.js

import { API_USERNAME, API_PASSWORD, API_URL_AUTH } from 'react-native-dotenv'

  useEffect(() => {
    async function getToken() {
      try {
        const response = await axios.post(API_URL_AUTH, {
          username: API_USERNAME,
          password: API_PASSWORD
        })
        setToken(response.data.token)

      } catch (error) {
        error => console.error(error)
      }
    }
    getToken()
  }, [])