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
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
I have created a new project called auth using react-native init auth at terminal.When i tried to run the project using react-native run-ios. The build failed and gave a error 'React/RCTBridgeDelegate.h' file not found.
Tried to update the react native version
react-native run-ios at terminal in mac
I expect the build to be successful and see the ios simulator
The actual result which i got is build failed and hence cant see the simulator
The issue is related to cocoapods dependency manager. Do the following to fix this:
Open the terminal and go to your project ios directory
Type in pod init (If it doesn't exist) and then pod install
Open the workspace project and delete the build from ios folder
Run react-native run-ios from terminal.
It should work now.
In my case the libPods-FOO.a library had somehow become unlinked when I did a pod update && pod install. To see if this applies to you:
In Xcode, check under Project Navigator:
[Your Project Name] --> Targets --> [Your target name] --> General
Scroll down to Frameworks, Libraries and Embedded Content
If you don't have a libPods-XXXX.a in there (where XXXX is your project name) then add it:
Click the '+' sign to add the libPods library
Search for libPods in the search box
Choose the libPods-XXXX.a and click Add.
Just a hint: for those of you using the M1 Macs, pod install won't work. You should use arch -x86_64 pod install as stated in this issue
The issue happened due to the missing of React schema in cocoapods dependency. to resolve follow these steps:
open project in XCode using ios/{project name}.xcworkspace file
From menu bar -> click Product-> Scheme -> Manage Scheme
It will open a modal -> click on the + button
List item
New modal -> In target DropDown select React and click okay
close the modal and rebuild project Project - Build
it will resolve the issue.
In case you have Mac with an Apple M1 chip, It can be resolve in two ways,
#SOLUTION 1
Open Application->Utilites->Terminal.app
Right-click, Terminal.app -> Get Info -> General-> Enable "Open using Rosetta"
Restart Terminal
#SOLUTION 2
From terminal execute
sudo arch -x86_64 gem install ffi
Go to iOS directory and execute
arch -x86_64 pod install
I did what #Vahid suggested, but I also had another issue. A set of instructions I was following told me to pull the related .xcodeproj file into my actual project and then manually link a few different files.
These steps were not necessary and were creating the issue for me.
I was following this:
https://github.com/frostney/react-native-ibeacon
But it's better to use this npm package and follow their instructions:
https://www.npmjs.com/package/react-native-ibeacons
It can happen if you are using mac on M1 chip and trying to run the app on a simulator. Try to install iterm2 from official site(https://iterm2.com/), and launch it with Rosetta(Applications -> Right click on 'Iterm2' app -> "Get info" -> Check "Open using Rosetta"). Then run:
sudo gem install cocoapods
rm -rf /Users/{USERNAME}/.cocoapods/repos/cocoapods
Go to your project folder and run cd ./ios && pod install
Run build with npx react-native run-ios
In this particular project, certain targets were not working. I noticed the broken targets with this error were missing libPods-myProjectName.a. Under Targets -> General tab, "Frameworks, Libraries and Embedded Content" I pressed the "+" icon and searched for "pods" and added "pods-myProjectName.a" and now it seems to work. This might not be applicable to you, but I am adding this as another possibility of what might be wrong.
The simple pod install command did not work for me. If you have M1 Mac then try using.
arch -x86_64 pod install
follow this steps :
Select your project on Xcode
Go to Build Settings
In Search path tab select Header Search Path and add this values for both debug and release
$(inherited)
${PODS_ROOT}
${SRCROOT}/../../../ios/Pods/Headers (Make sure to set it to recursive)
[Mac OSX]
I updated the cocoapods version
brew upgrade cocoapods
For me adding arm64 to Excluded Architectures section works.
In my Xcode project I had to have multiple targets.
I added the (dev) target for development purposes, but in order to add React Native to that target you have to add it to the Podfile.
target 'MyApp' do
config = use_native_modules!
...
target 'MyAppTests' do
inherit! :complete
# Pods for testing
end
# 👇 Add your target in the Podfile
target 'MyApp (dev)' do
inherit! :complete
end
...
Then run pod install inside your ios folder, and done!
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
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.