I am creating a React Native module as a wrapper for existing Android and iOS libraries. The Android library is a jar file and the iOS library is xcframework file. I put the xcframework file inside the ios folder, and the jar file inside android/libs folder ( I created the libs folder). I first tried the iOS library by adding s.preserve_path, s.xcconfig and s.vendored_framework inside the project level podspec file. I am not sure if I need to do anything for the pod spec file, like running it. So I just went along with the next step by trying to import the library's .h in .m file. I tried both using angle brackets <> and using quotes "". But none worked, because firing "react-native run-is" gave me this error: fatal error: file not found. Any help on how to include the libraries in react native is greatly appreciated.
For creating react native wrapper or node module you need use below library.
https://www.npmjs.com/package/react-native-create-library
https://github.com/brodybits/create-react-native-module
Using this library you can create empty react native module project after that you can bind your native code ARR or framework files into that project.
I was able to fix the error by doing the following two steps:
Change "s.vendored_framework" to "s.vendored_frameworks" in the project level .podspec file. My original one is singular (framework), not plural (frameworks).
cd iOS && pod install && cd ..
Step 2 can be found in create-react-native-module's GitHub link:
https://github.com/brodybits/create-react-native-module
I missed the second step when posting my question. I thought then that if I ran "react-native run-ios", it would run "pod install".
I have been trying to use "React-Native-FS" while developing a react native application. However, whenever I try to import "React-Native-FS" to my app I get the following message:
Invariant Violation: Native Module Cannot Be Null
Does anyone have any clue what could be causing this? I've searched around and can't find an answer. Any help would be greatly appreciated. Thanks!
try to do link your library with
react-native link react-native-fs
if its not linked try to do manually linking with below step
ANDROID
... 1. android/settings.gradle
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir,'../node_modules/react-native-fs/android')
2.android/app/build.gradle
dependencies {
implementation project(':react-native-fs')
}
ANd do build android project with android studio
IOS
Adding with CocoaPods
Add the RNFS pod to your list of application pods in your Podfile, using the path from the Podfile to the installed module:~~
pod 'RNFS', :path => '../node_modules/react-native-fs'
Install pods as usual:
pod install
Adding Manually in XCode
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-fs and add the .xcodeproj file
In XCode, in the project navigator, select your project. Add the lib*.a from the RNFS project to your project's Build Phases ➜ Link Binary With Libraries. Click the .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
Run your project (Cmd+R)
I installed all dependencies and libs like the instructions on https://facebook.github.io/react-native/docs/getting-started.html
Everything is fine.
But when i try to run react-native run-android i throws me errors (see screenshot)
HAXM is installed on my machine as well.
What can i do to run it on my machine in the emulator?
SDK:
"SDK location no found" export/add your sdk location path in PATH variable. For linux maching run following command in terminal:
$ export PATH="/Users/<username>/Library/Android/sdk/platform-tools/:$PATH"
$ react-native run-android
Go to your project android folder. And create a file called "local.properties".
Inside this file write this:
"sdk.dir={sdk_location}"
Just replace {skd_location} with the path to your android sdk.
Then run "react-native run-android" again and it should work.
The error simply specifies that you are not providing the sdk path to you project. So for this you need to create a local.properties file inside your android folder of the project. Inside that local.properties file just add the location for your android SDK as below :-
sdk.dir = /Users/piet/Library/Android/sdk //this is your sdk path
I have provided the path from the screenshot given by you but change the path of your android SDK if it is different.
I am trying to implement PushNotificationIOS with a detached Expo app. I am running SDK 21.0.0 (React Native 0.48).
I am getting React/RCTEventEmitter file not found
I have completed the following steps:
Open my .xcworkspace project
Drag the RCTPushNotification.xcodeproj into my Libraries folder
Added libRCTPushNotification.a into App > Build Phases > Link Binary With Libraries
Added $(SRCROOT)/../node_modules/react-native/Libraries under Header Search Paths - I also tried without the /../. I have a bunch of Pods in the Header Search Paths list too.
I then added the following into AppDelegate.m but when I click through to the file (⌘ + click), I get a question mark.
#import <React/RCTPushNotificationManager.h>
If I change it to the below, it works, I can click through
#import "RCTPushNotificationManager.h"
However, this is my problem
When I clean and build my project, I get the below error in RCTPushNotificationManager.h to say:
'React/RCTEventEmitter.h' file not found
#Dan I have ran into this exact same issue, it also occurs for RCTLinking, and other libraries dependent on eventEmitter.h and a detached Expo project.
The issue turns out to be that RCTPushNotification doesn't have the reference to React from Cocoapods file React since Expo manages React in Cocoapods. So you should go into RCTPushNotification.xcodeproj then into Targets - RCTPushNotification Header Search Paths and add the link to "ios/Pods/Headers/Public/React" and set to recursive.
The easiest way to do the above is navigate to your iOS/Pods/Headers/Public/React and drag and drop the folder straight into build settings for header search paths like the below image.
Heads up finally after this you will have to reference ReactCommon/yoga most likely as well, ReactCommon/yoga however should be in your 'node_modules/react-native/ReactCommon/yoga'
This works for me on detached Expo project
"react": "16.6.3",
"react-native": "0.58.6",
Add 'RCTPushNotification' to your pod and run pod install
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'RCTPushNotification',
]
Since nothing mentioned above worked for me, I started experimenting, and this is what solved it for me:
1. Link React-Core & Public
As mentioned by Escamilla, in xcode open the RCTPushNotification.xcodeproj and under Build Settings search for header search path and add there the 2 path:
"$(SRCROOT)/../../../../ios/Pods/Headers/Public"
"$(SRCROOT)/../../../../ios/Pods/Headers/Public/React-Core"
2. Copy RCTPushNotificationManager.h manually into React-Core
In the root folder of your project execute:
cp ./node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotificationManager.h ./ios/Pods/Headers/Public/React-Core/React
This will copy RCTPushNotificationManager.h wich is in node_modules/react-native/Libraries/PushNotificationIOS/ manually into the React folder which is in ios/Pods/Headers/Public/React-Core/React.
I have no idea if that is a good solution but it works. Maybe if someone could explain me why it was not in there in the first place? That would be golden.
I followed the setup instructions 1 by 1 very carefully doing everything right but nothing worked except the manual copy mentioned above…
Also, this is randomly resetted once in a while and has to be done again -.-'
Open up your project in XCode.
Open up the Libraries folder. You should see React.xcodeproj and several RCT*.xcodeproj.
Drag the React.xcodeproj into each of the other projects.
Click on each project and navigate to the Build Phases tab.
Click on Target Dependencies and add React as a target dependency
Just follow these steps:
create project react-native init project.
add this line to pod file in ios folder: pod 'React-RCTPushNotification', :path => '../node_modules/react-native/Libraries/PushNotificationIOS'
cd ios && pod install
cd .. && react-native run-ios
No need to do messy manual linking
Replace #import RCTEventEmitter.h or #import React/RCTEventEmitter.h with #import <React/RCTEventEmitter.h>
Its work for me
this worked for me!
add the missed lib manually
https://github.com/microsoft/react-native-code-push/issues/1565#issuecomment-489738672
USE those libraries:
https://github.com/zo0r/react-native-push-notification
https://github.com/react-native-community/react-native-push-notification-ios
follow step by step,
everything will work
no need anything else
not forget to
pod install
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.