Change App Name In React Native

问题:

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

回答1:

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

回答2:

Try react-native-rename this npm package will ease the process

// install react-native rename

   npm install react-native-rename -g
   or 
   yarn global add react-native-rename

// in project directory

   react-native-rename <New_Project_ Name>

回答3:

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.

回答4:

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)

回答5:

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.

回答6:

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)

回答7:

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

回答8:

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.

回答9:

You can try this

1. Update displayName in app.json to the new name
2. Delete ios/ and android/ directories
3. Run react-native eject
4. Run react-native link

回答10:

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!

回答11:

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"
}

回答12:

Simply way

PROJECT >android > app > main > res > style

Then change the app name

回答13:

first of all create a whole backup of the project including node modules (in order to restore icons/phots ..etc in the future)

1. Update name and displayName in app.json to the new name
2. rename app folder the same as app name
3. Delete ios/ and android/ directories
4. delete ndoe modules
5. update name in package.json (you must use new name for import & require() in your code. eg : import {x} from 'NewAppName/src/api')
6. watchman watch-del-all
7. rm -rf /tmp/haste-map-react-native-packager-*
8. rm -rf /tmp/metro-bundler-cache-*
9. restart pc
10. sudo npm install
11. react-native eject
12. restore icons/images
13. react-native link
14. restart pc
15. run app caution : you may have to setup things manually. in my case SplashScreen