I am new in react-native and haven't use any starter kit.
my question is how can I use config variables. say for example i have api url which is diffrent for production and development. I don't want to go in each page change url every time.
That's why i want to use something like config variables.
any suggestions ?
pretty simple question.. you can use react-native-config. Follow the steps:
npm install react-native-config --save
react-native link react-native-config
Create a new file .env in the root of your React Native app:
API_URL_LIVE=https://myapilive.com
API_URL_DEV=https://myapidev.com
Then access variables defined there from your app:
import Config from 'react-native-config'
Config.API_URL_LIVE // 'https://myapilive.com'
Note: Don't forget to clean you build after changing the URLs. Use following command.
cd android
gradlew clean build
Related
I have a secret key that I need to use in my app. On the web, I would use a .env file, but with React Native and Expo.
I want to use the EAS Build, and found the following documentation EAS variables docs
This gives information about adding the "secret" to your eas.json file, but I am unable to find 2 important things:
What code to use to access the secret variable in the dev and prod environment.
I'm thinking in production the code would be 'process.env.SECRET_KEY' and hoping the same code would apply for the dev environment, but I am not sure how to get the process.env in dev to be populated with the SECRET_KEY.
When I console.log(process.env) in my app, I just get NODE_ENV: "development".
My thought is that many apps need some sort of Secret bit of info, so any ideas on a best practice or at this point just any way to get this to work!
I was able to get the environment (secret) variable working with the eas build process.
I am sure there are other ways to accomplish this, however this is the approach I took:
I chose to use a .env file for the dev environment and the eas secret:create command for eas builds.
First, you need to create a secret for your project with the eas cli.
eas secret command
Then, create you .env file with your secret. Make sure this has the same spelling as the secret created for eas.
You will then use the app.config.js file to inject the secret so that your code can access it. NOTE: I found that I needed to remove the app.json file. I moved all the config from app.json to app.config.js.
Also remember to run npm install dotenv on your terminal to add dotenv to your project.
// the dotenv/config will read your .env file
// and merge it with process.env data
// This is just for the builds that happen outside of eas
import "dotenv/config";
// the secrets created with eas secret:create will
// be merged with process.env during eas builds
const secretKey = process.env.SECRET_KEY;
export default {
name: "TV Tracker",
slug: "tv-tracker",
scheme: "tvtracker",
...
// THIS IS WHAT WE READ IN THE CODE
// uses the expo constants package
extra: {
secretKey: secretKey,
},
};
Now we can read the secretKey using the expo-constants module.
import Constants from "expo-constants";
...
let secretKey = Constants.expoConfig.extra.secretKey;
Got my answer here
https://github.com/expo/eas-cli/issues/1265#issuecomment-1301525320
I do wish expo simplified/cleaned their documentation a bit and made like one simple example which just works out of the box instead of providing tons of information where it's so easy to miss Constants.expoConfig vs Constants.manifest
As a follow-up to #markmccoid's answer, I usually use a bash script to put the .env secrets into eas for the project.
while IFS='=' read -r key value; do
eas secret:create --scope project --name "$key" --value "$value"
done < .env
So I've got a react-native module I'm building in it's own repo. In this repo, I've included an example app of how it can be used and I've specified it like this in my ExampleApp's package.json:
"my-module": "file:../"
I'm using metro-with-symlinks which works great for hot reloading my example app when I'm editing my module's source code.
Problem I'm running into now is that I've just added a dependency on my module on #react-native-community/async-storage, like so:
// my-module package.json
"dependencies": {
"#react-native-community/async-storage": "^1.12.1"
...
}
Now, whenever I start my example app, I get Error: [#RNC/AsyncStorage]: NativeModule: AsyncStorage is null. So my example app isn't linking this dependency and I don't know how to make it do so. I can see this when I do a pod install in my example app because the async storage dependency isn't showing up.
Is there any way to get this set up working?
EDIT: I've seen people in my org use peerDependencies for react-native modules like this and require the application to supply the RN module. Is that the "correct" way to go about it for react-native. It doesn't feel very "peerDependency" to me, but maybe this is how RN modules should be developed?
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I'm using react-native-config for setting environment variables in my react-native app. Now I want to use the ENV environment variable in the babel.config.js file to apply a plugin only when running the app in production. Basically what I want to do is apply a babel plugin only when running in production. Is this the correct way to achieve my goal?
How can I use the variable in the babel.config.js file? I tried importing Config from the react-native-config package and tried to access the variable via Config.ENV but that doesn't seem to work.
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example