While integrating code-push in my react-native app using code-push tutorial, i ran following command:
react-native link react-native-code-push
It asked for deployment keys then, which i pasted but now i want to change those keys.
I tried to unlink with the following command but its not working,
react-native unlink react-native-code-push
Can someone please guid me, as i'm new to both react-native and code push?
For IOS:
file:
list.info
key:
CodePushDeploymentKey
For Android:
file:
strings.xml
key:
reactNativeCodePush_androidDeploymentKey
update values of these keys and it will work :)
So basically deployment keys can be stored in different locations and it depends upon how you have configured the application.
You can always find what is the location of the deployment key the following way:
1) For Android it is injected in MainApplication.java file -> getPackages method (the 1st parameter for CodePush class constructor).
By default it should be R.string.reactNativeCodePush_androidDeploymentKey which points exactly to strings.xml file. You can override this if needed and store deployment key in arbitrary place or simply hard-code it here (though it is not recommended).
2) For iOS the default place to store deployment key is Info.plist file located in iOS folder of the application (entry named CodePushDeploymentKey).
Later it is extracted by the app in native module in CodePushConfig.m class.
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
I'm currently experimenting with react and express and I wanted to know if react files are hidden, what m trying to do right now is encrypting api responses server side then decrypting it in the frontend, but having the key visible to everyone makes the entire thing useless
When you deploy your React application, your entire source code is visible to everyone from the sources tab of the dev tools.
This is not an issue with the create-react-app but all of the source code is added because of the source map which helps to easily identify the source of the bug that will occur on the live site in the future.
There is an easy way to fix it :
Create a file with the name .env in your project folder with the below code inside it :
GENERATE_SOURCEMAP=false
Or add this in package.json file :
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
Now, when you run π»π½πΊ/yarn πΏππ» π―ππΆπΉπ± command from the terminal, It will generate a
π―ππΆπΉπ± folder with minified files without a source map that you can deploy to the production.
Hope you find my answer helpful !
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
It's simple issue but I don't know how to do it. I'm looking for some references, but there are problems.
I'm using react-native : 0.60.5. Hence there is no eject method or command.
The project was not created with expo.
After I referenced How to Rename A React Native App and error Unrecognized command "eject", then I follow the process below.
change the app.json's name and diplayName field to name which I want to change
remove android/ and ios/ directory
use react-native upgrade --legacy true
But there is no change on the project name and app name.
Is there any way to change the project and app name? Thanks.
Please check the below steps :
if you want to change both the app name and the package name (i.e. rename the entire app), the following steps are necessary:
Make sure you don't have anything precious (non-generated, manually
copied resources) in the android/ and ios/ subfolders.
Delete both the android/ and ios/ folder.
Change the "name" entry in your package.json to the new name.
Change the app name in both your index.android.js and index.ios.js:
AppRegistry.registerComponent('NewAppName', () => App);
Run react-native upgrade to re-generate the platform subfolders.
If you have linked resources (like custom fonts etc.) run
react-native link.
If you have other generated resources (like app icons) run the
scripts to generate them (e.g. yo).
Finally, uninstall the old app on each device and run the new one.
Hope it helps. feel free for doubts
for android edit strings.xml file which located in res/values/
string name="app_name">APP_NAME</string
I had a very hard time with this and this is what I did - hopefully it helps someone. Literally took me 15 minutes
https://www.npmjs.com/package/react-native-rename install react-native-rename and rename your app to whatever you need using the instructions provided for the package
Important part would be to use this:
npx react-native-rename "YourProjectName" -b com.yourporjectnamehere - because this is needed for android to work correctly
find in your project every file and folder name that will contain your previous name - for me it was mostly in ios folder. I had to rename all the folders and some of the files inside. just replace the part with your previous name with your current name
find all occurrences of your previous name left inside the project with the whole project search in your editor and replace them with the new name.
To make it work for ios
Delete Pods inside the ios folder
Delete node_modules
go to ios folder with your terminal and do pod install
do npm install in your original directory again
make sure all the caches are deleted for your ios simulator with yarn start --reset-cache
To make it work for android
Make sure that under android/app/src/com/yourprojectnamehere/ the folder contains MainApplication.java and MainActivity.java files and that the project name inside are updated
./gradlew clean inside android folder in terminal
Delete node_modules
npm install
react-native run-android and everything should be working
I know its a lot of steps, but from what I have found renaming react native app is not actually as easy as you might have thought
Let's say I initialize a project under react-native init <filename>, installed a bunch of node packages, and added code.
Then separately I initialize a different project under react-viro init <filename>, installed a bunch of node packages, and added code.
If I wanted to combine what I created under react-native init into what I created under react-viro init, is it as simple as copying files over and reinstalling missing node packages into the react-viro project?
Assuming you are working in the ./src folder, every file is independent of iOS or Android as part of the JavaScript bundle.
You can simply copy the .js files over and install the node packages in that project.
You probably should not copy any files that are outside the ./src folder, but I also suspect you wouldn't need to. Files in the Android and iOS folders are rarely touched as they contain operating system config settings and custom modules that you would have wrote in the native languages.
If the file renders JSX, you will be safe to just copy it over and hook it back up.
To state it another way, go into the folder that has node_modules in it. You shouldn't copy anything that is in that folder except additional files that you created. This is where people normally create an src folder and place all their JavaScript. You probably have an index file in there that points to ./src/app.js or you may have an index.ios.js and index.android.js that both point to a ./src/app.js. Anything inside src is safe.
That's my best answer without seeing your folders and files.
If you intend to copy code from one react native project to another, make sure the code you intend to copy is JS and not any native files. Make sure you do register the correct component using AppRegistry. Rest assured you can copy the code from one project to another.
Assuming you have a project at folder
/my-project/android
/my-project/ios
/my-project/src
Copy my-project and paste it at your desired folder like
/new-my-project
Change git origin
git remote set-url origin https://gitlab.com/..../**.git
Open /new-my-project/android in Android Studio, and then rename app/java/com.myproject to com.newmyproject
Go to app/build.grade and change com.myproject to com.newmyproject and sync
Create firebase project and download google-services.json file and add to new-my-project/android/app
Build application, then test application under metro bundler
npx react-native start
Create keystore, test notifications, change base_url_api, test apk etc Android finish now, iOS
Update pods on new-my-project/ios
pod install && pod update
open myproject.xcworkspace
Change bundle identifier to org.reactjs.native.newmyproject, version to 1.0, build to 1 and desired Display name. Let it index completely
Setup in firbase and replace GoogleService-Info.Plist file and Clean build folder in xcode
Go to developer.apple.com and create identifiers, APNS certificates, profiles
Download certificates from keychain and upload to firebase
Build the project in simulator/device and test it.
Done