CODEWITHSUNDEEP
javascriptreact-nativeenvironment-variables
LuizfBrisighello
LuizfBrisighello

Reputation: 269

React Native. Requiring paths from .env vars

Im trying to require paths from .env vars but this doesnt work, and I dont know if its because its not possible to require dynamic paths ,or if its because of the order in which things get compiled, either way, the workaround I found atm is to use base64 encoded images.

Just for better context: Im using react-native-config just to point which .env file RN should look at, because currently react-native-config is not working properly in RN 0.60+ so im using it with react-native-build-config to expose those vars to my .js (If you can give me any sugestions here, I'll be glad)

e.g.

//.env
IMAGE_SOURCE='base64SourceHere'

.

//myComponent.js 
const imageSrc = BuildConfig.IMAGE_SOURCE

<Image style={{ width: 50, height: 50 }} source={ uri: imageSrc } resizeMode="contain"/>

My question here is.. Is base64 encoded images a bad practice? If it is and even if its not, any sugestions? Can I use uri for local file paths?

Upvotes: 0

Views: 296

Answers (1)

Kabir
Kabir

Reputation: 862

What is Base64?
Base64 is an encoding and decoding technique used to convert binary data to an American Standard for Information Interchange (ASCII) text format, and vice versa.

Base64 is a relatively efficient way of encoding binary data it will, on average still increase the file size for more than 25%. This not only increases your bandwidth bill, but also increases the download time.

CPU Overhead
When delivering images in Base64, the browser first needs to decode the Base64 encoded strings and then decode the images as well, which introduces an extra layer of unnecessary work.

Caching Issues
The third issue is perhaps the biggest performance killer, but perhaps not the most obvious at first glance. When a user accesses your website, the browser will automatically cache the images locally and then load them directly from your disk when visiting the same page again. Due to how Base64 works, the browser is unable to store the images locally so it will always need to fetch them from your server or CDN which creates extra load on your server as well as increases your bandwidth bill.

Source link:doc
Other More info :doc

Base64 image Useful:
It's only useful for very tiny images. Base64 encoded files are larger than the original.
Bas64 encoded images are good practice for a small size (KB) images. For bigger size image you can use . Thumbnails .

How to handle images in react native,Check this link.

Read local image in react-native:

You can use react-native-fs to get directories which works for both platform

var RNFS = require('react-native-fs');

<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/example.png'}} />

Set up .env in react native application

-->you can use react-native-config. It allows you to specify a .env file to import variables into your code.For installation check this:doc

--> react-native-dotenv is another solution for .env file in React Native.For installation check this:doc

Upvotes: 1

Related Questions