I'm trying to figure out how to change a ReactNative app name.
The installed APK on my device is simply "App", with the Android icon.
How can I change this?
I've tried changing package.json and re-running react-native upgrade but it didn't update AndroidManifest.xml
The generator does not override the strings.xml file located in android/app/src/main/res/values/, so you have to change the app_name variable manually
For Android
Modify displayName in app.json file
Modify app_name in android/app/src/main/res/values/strings.xml
then Run these commands one by one
cd android
./gradlew clean
cd ..
react-native run-android
For iOS
Modify Display Name in Project target (General Tab)
Select your application project as Host Application in Project target for testing (General Tab)
Try react-native-rename this npm package will ease the process
This package assumes that you created your react-native project
using react-native init.
Note: This package does not attempt to properly rename build artifacts such as ios/build or Cocoa Pod installation targets. After renaming your project you should clean, build, and reinstall third party dependencies to get it running properly with the new name.
// in project directory
npx react-native-rename <newName>
First of all:
Open app.json file in your react-native project directory. And, just replace displayName json property's value in this file. e.g.:
{
"name": "SomethingSomething",
"displayName": "My New App Name"
}
For Android app:
Open strings.xml file, replace the <string name="app_name"> tag's value to your new app name. e.g.:
<string name="app_name">My New App Name</string>
For iOS:
Open info.plist, replace the value after <key>CFBundleDisplayName</key> to your app name. e.g.:
<key>CFBundleDisplayName</key>
<string>My New App Name</string>
Uninstall your previous app installed on your device. Use npm install in project main directory, in ios folder directory run pod install commands. Now, simply install app in your device.
The way I did this for android (hacky, but it works) is just changed the string app_name field in
android/app/src/main/res/values/strings.xml
It will change the name of your installed android app to whatever you put as the value.
UPDATE 2021
React native version: 0.64.0
Android
Find and open following files and change as required. \android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">My App</string>
</resources>
app.json
{
"name": "MyApp",
"displayName": "My App"
}
iOS
Find and open the \ios\YourAppName\Info.plist and change as required.
NOTE: if your name has spaces use instead of spaces.
<key>CFBundleDisplayName</key>
<string>My App</string>
I find that, 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.
If you are asking only for Android here is solution
Modify displayName in /app.json file
Modify app_name in android/app/src/main/res/values/strings.xml
then
Run these commands one by one
cd android
gradlew clean
cd ..
react-native run-android
If you don't have any thing precious in your android folder, you can delete the folder then run react-native upgrade then react-native android. These will recreate AndroidManifest.xml along with necessary files and folders. (Tried on 0.18 in Windows 10)
for android
android/app/src/main/res/values/strings.xml
My Android App
for ios
Just open it in xCode select project tab general just rename it.
simply change <string name="app_name"> 'NEW_APP_NAME' </string>
located in
[project_dir]/android/app/src/main/res/values/strings.xml
NOTE: recommended
react-native-rename
by Paul Nyondo maybe affect MainApplication.java file, DON'T USE IT!
Change the name at \android\app\src\main\res\values\strings.xml,
app.jon, and ./android/app/src/main/java/MainActivity.java
**strings.xml**
<resources>
<string name="app_name">NewAppName</string>
</resources>
**app.json**
{
"name": "NewAppName",
"displayName": "NewAppName"
}
**MainActivity.java**
#Override
protected String getMainComponentName() {
return "NewAppName";
}
Then run these commands on terminal
cd android
./gradlew clean
cd ..
npx react-native run-android
before changing the app name get your code's backup and then , Go to following path in and replace your app name with new app name and change i one more file app.json
E:***\android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">New Name</string>
</resources>
app.json
{
"name": "oldName",
"displayName": "New Name"
}
Change the app name in
\android\app\src\main\res\values\strings.xml
<resources>
<string name="app_name">My App</string>
</resources>
-app.json
{
"name": "MyApp",
"displayName": "My App"
}
-package.json
"name": "My App",
-also have to change return "appName" from android/app/src/main/java/com/companyName/appName/MainActivity.java
#Override
protected String getMainComponentName() {
return "My App"
}
You can try this
Update displayName in app.json to the new name
Delete ios/ and android/ directories
Run react-native eject
Run react-native link
Simply way
PROJECT >android > app > main > res > style
Then change the app name
first of all create a whole backup of the project including node modules (in order to restore icons/phots ..etc in the future)
Update name and displayName in app.json to the new name
rename app folder the same as app name
Delete ios/ and android/ directories
delete ndoe modules
update name in package.json (you must use new name for import & require() in your code. eg : import {x} from 'NewAppName/src/api')
watchman watch-del-all
rm -rf /tmp/haste-map-react-native-packager-*
rm -rf /tmp/metro-bundler-cache-*
restart pc
sudo npm install
react-native eject
restore icons/images
react-native link
restart pc
run app
caution : you may have to setup things manually. in my case SplashScreen
Changed my app name in android/app/src/main/res/values/strings.xml as:
<resources>
<string name="app_name">My App</string>
</resources>
and re-run using npx react-native run-android
To change the name of the react-native Application
1 . Open ./android/app/src/main/java/[multiple folders]/MainActivity.java
#Override
protected String getMainComponentName() {
return "NameOfTheApp";
}
Open android/app/src/main/res/values/strings.xml
NEW APP NAME
Change Name in App.json and package.json.
4.For clean android project run following command
cd android &&./gradlew clean
Just adding to Chhay Rith Hy answer
If you are using Windows, you should use backslash or else you'll get an error "'.' is not recognized as internal or external command(...)"
So, instead of doing:
./gradlew clean
You should do:
.\gradlew clean
Update 2023
(React Native Version > 0.69)
The accepted answer works fine. However, there is a problem: all the built files are still based on the old name, which will cause unpredicted issues.
So my suggestion is to delete ios and android folders and regenerate them. Here are the steps to do so:
delete ios and android folders from the root directory
sudo rm -rf android/ ios/ (on Windows delete manually)
add react native eject package
yarn add react-native-eject
change the name of app in package.json and app.json to your desired new name
regenrate ios and android folders
npx react-native eject
link installed modules in ios
cd ios && pod install
create a new android build (root directory)
react-native run-android
create a new ios build (root directory)
react-native run-ios
NOTE:
By following this approach you will lose icons and fonts that are already added to your project! However, in my opinion it totally worth it, because you solve this issue once and for all.
Related
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
Hi how can I change the package name and the name that will be displayed on the phone in react-native ? I've tried to change the name in app.json and package.json and then delete android and ios folders but when I want to regenerate these folders with react-native upgrade it doesn't work..
Thanks.
Are you referring to the app's name that'll be displayed on the phone?
For iOS, you can edit the name directly in XCode. See this answer.
For Android, you can edit the app name in strings.xml file located at android/app/src/main/res/values/strings.xml.
<string name="app_name">Your app's name</string>
1) Install
yarn global add react-native-rename
or
npm install react-native-rename -g
2) Rename your project
react-native-rename "New Project Name"
For more details click here
To change app name and package name, run this command
react-native-rename "MyApp" -b com.mycompany.myapp
I tried to build a react native app for iOS and I hit this error:
Build system information
error: Multiple commands produce '/Volumes/Data/sources/react-native/test/ios/build/test/Build/Products/Debug-iphonesimulator/test.app/Zocial.ttf':
1) Target 'test' (project 'test') has copy command from '/Volumes/Data/sources/react-native/test/node_modules/react-native-vector-icons/Fonts/Zocial.ttf' to '/Volumes/Data/sources/react-native/test/ios/build/test/Build/Products/Debug-iphonesimulator/test.app/Zocial.ttf'
2) That command depends on command in Target 'test' (project 'test'): script phase “[CP] Copy Pods Resources”
You can try deleting the build folder in ios directory and rebuilding your app again. It might solve this issue
It looks like you have installed some library with fonts that iOS don't have linked. Try this:
Create an empty dir in your project to store some future useful fonts (for example "Nunito" family font). I suggest create fonts folder into assets --> assets/fonts
Create a new file named react-native.config.js in the root of your project and add into it the following:
module.exports = {
project: {
ios: {},
android: {}
},
assets: ['./src/assets/fonts/'],
};
In your project dir run react-native link
Go to ios dir (cd ios) and run pod update
Build
Especial thanks to Alex Biddle: https://medium.com/better-programming/how-to-add-custom-fonts-to-your-react-native-project-c64305281b9
I had this error with react-native-vector-icons installed after I executed react-native link. My solution was to remove fonts copying from XCode Build Phases.
I have a folder setup with some files I already want to have in the folder. I want to be able to run
react-native init PROJECTNAME
and instead of creating a folder PROJECTNAME it would init a react-native project in the folder I am currently in.
Is this possible?
Currently, I have my setup already created from previous projects that I enjoy using (packages.json, config files, etc). I delete the node_modules, and then react-native init PROJECTNAME. Then I take the PROJECTNAME/ios PROJECTNAME/android folders generated within that folder, move them into the main project folder and it works pretty smoothly. Just not optimal.
You can do
$ cd .. && react-native init folder_name
It will overwrite your package.json but keep the non-default files.
This issue is currently tracked there.
You should have install react-native-cli instead of react-native globally as described here.
And then the command is:
npx react-native-cli init appname --directory ./appPathToDir
The reason I wanted to do this was to have a sort of mono-repo, but I have transitioned away from this approach as I am not sure it is beneficial.
expo init /.
this will create expo app in current directory using the folder name