How To Implement Environment Variables in React Native

In this tutorial, you'll learn how to implement environment variables in react native. In any project where you need to provide sensitive information such as an API key, you should use an environment variable in your project to protect that information. This is a beginner friendly tutorial, so also if you're new to react native development you can follow along with this tutorial.
Dynamic Dropdown List in React Native • Dynamic Dependent Drop...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
GitHub repo URL bit.ly/3cMlAHR
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@KlethonioFerreira]

After instaling the package you need to restart the project, and just use --clear to clear the cache, no need to restart the machine. Thanks for the vídeo

[@yannismadu]

Thanks, this worked!

[@rayyanwz]

i love you so much U HAVE NO IDEA HOW IMPORTANT THIS WAS

[@lrajoo11]

Super helpful. thank you sir!

[@monireol]

1:50 your key is hidden
2:05 your key is not hidden

[@panshak]

Absolutely brilliant. I have been searching for this information just yesterday. But I have been wondering, if you generate the apk, how does the env handles the variables? Does it inject it in the apk file or it stores it somewhere in the cloud? I'm just confused.

[@SandeepSingh-ye5fh]

Once again one more informative video thanks Pardeep

[@alexinsaev]

Thx for your content!

[@itzpradip]

My pleasure!

[@regapermana8023]

may i know what vscode theme do you use?

[@petercolquhoun1809]

If the fix for @env not being found dosen't work try making a types folder then adding env.d.ts inside the types folder and then inside env.d.ts add
declare module '@env' {
export const GEOCODING_API_KEY: string;
}
GEODCODING_API_KEY is the name of the key inside your .env
and then in tsconfig.json add "typeRoots": ["./src/types"],
This should fix the issue. I am using Expo instead of react native cli.

[@2dgiraffe9994]

Thanks for the tip!

[@jezielalmeida4875]

Thank you so much!

[@piyush9688]

So the simple solution to that annoying problem is to re-start the computer. Thanks

[@yunusnazarov4319]

Hello Brother when i create react native project 0.69 or 0.70 version ios and android folder doesn't exist in my project pls help

[@joaov5267]

great video thanks brother

[@ozlemmigfer755]

I don't have api key in app.js file. How can I solve this problem?

[@bestsongsreelsshortslatest1170]

does it prevent to reveal secret key from reverse engineering?

[@Bankiprudhvi]

Please make videos on redux with api calls

[@daljeetsingh5127]

can you please a video to run a project in a production environment and testing environment base on env

[@onibenjo]

Great tutorial but I prefer react-native-config tho. Any reasons why react-native-dotenv over react-native-confg?

[@mertgenc9890]

react native dotenv doesn’t support native modules, only supports node environment. For example, If you want to use env files on gradle and want to build with it, you probably wanna use react native config.

[@maxaquilino7264]

Does react-native-config support Expo? I was trying to follow your suggestion but looks like I would need to eject

[@xdrap1]

*This library is outdated and the .env variables will not work in production when release the app package for Android and iOS. So it's better to use react-native-config instead.*

[@saeidghorbani4388]

thank you

[@Sooraj0306]

Sir please make a series on chatting application in react native cli,, not expo

[@itzpradip]

Thanks for your suggestion. I'll try to do it in future.

[@abdulsami4618]

Brother video coming on that topic ?
Hello brother, Can you make a video or playlist for ad implementation of google admob ads in react native apps ?
Like every kind of implementation of ads Interstitial , Rewarded , open app ads , videos ads etc based on conditional rendering like if ad is not loaded or maybe an error so in replacement we can display our custom component ads. like if interstital ads is somehow failed to show then we display our custom component that cover whole screen and displaying our custom component. It's a request to made a video or series on it specially interstitial , rewarded and openapp ads.
Also if you can create another tutorial for facebook ads then do that after admob tutorial. I have watched most of youtube videos for implementing ads of admob but it is not as much helpfull like I mention , Even interstitial and rewarded ads is not diplaying , getting error of fetching ads. So it'a a request made a video on it. It is also less competitive topic so you can also easily rank on youtube search engines for better channel ranking/performance.
It's a request please make a video that cover all the above mentioned topic. please

[@sanirasheedabdullah5528]

ur API key was still visible even after blurring lol

[@nileshnilu7902]

Make full stack project sir

[@daljeetsingh5127]

thanks bro

[@itzpradip]

Welcome