React Native: Invariant Violation when using "React-Native-FS" - react-native

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)

Related

How to create react native wrappers for native android and iOS SDKs

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

React Native Multiple command produce same file

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.

React/RCTEventEmitter.h file not found

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

Getting react-native-fbsdk to work with CocoaPods

I've been trying to get react-native-fbsdk to work with CocoaPods, since I much prefer fetching the Facebook SDK as part of the pod install process, but I haven't had much luck. I'm aware that I can react-native link the npm library and manually download and add the necessary frameworks, but this seems rather silly when I have a perfectly good package manager at my disposal.
Judging by the documentation it should be fairly straight forward - just add the necessary pods to the Podfile, right? But no matter what I try the native FBSDK modules never seem to be included. I've tried a whole host of different Podfiles, some with use_framework! and pod 'Bolts', some with just pod 'FBSDKCoreKit'. This is the one I'm currently on:
target 'FacebookPods' do
pod 'FBSDKCoreKit'
pod 'FBSDKShareKit'
pod 'FBSDKLoginKit'
target 'FacebookPodsTests' do
inherit! :search_paths
end
end
But when I run my test app and try to do anything with the react-native-fbsdk module I get errors complaining about various native modules being undefined. Here's my index.ios.js file, trying to access the LoginManager:
import React, {Component} from "react"
import {AppRegistry, Text} from "react-native"
import {LoginManager} from "react-native-fbsdk"
export default class FacebookPods extends Component {
componentWillMount() {
LoginManager.logInWithReadPermissions(["email"])
.then(() => console.log("Success!"))
.catch((err) => console.log("Failure!", err))
}
render() {
return <Text>Hello World</Text>
}
}
AppRegistry.registerComponent("FacebookPods", () => FacebookPods)
But this throws the error undefined is not an object (evaluating 'LoginManager.logInWithReadPermissions' in FBLoginManager.js. Further inspection of NativeModules shows that no native FBSDK modules are included at all. I also get the following warnings at launch:
2017-07-13 19:50:19.006 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBLikeView" does not exist
2017-07-13 19:50:19.007 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBLoginButton" does not exist
2017-07-13 19:50:19.008 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBSendButton" does not exist
2017-07-13 19:50:19.009 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RCTFBShareButton" does not exist
So yea, I'm at a complete loss. In my mind, simply adding the pods ought to be enough to include the frameworks. I've scoured the interwebs for any additional steps that I might've missed, but there isn't much, save for a few issues on the react-native-fbsdk project that have since then been removed.
I encountered this issue and managed to get react-native-fbsdk working with the Facebook SDK installed by adding the following to my pod file:
pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'
and importing the following in AppDelegate.m:
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKShareKit/FBSDKShareKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
Note that these imports are different from the suggestion in the react-native-fbsdk readme. That's because FBSDKCorekit.framework, FBSDKShareKit.framework and FBSDKLoginKit.framework are not available.
You also need to link libFBSDKShareKit.a, libFBSDKCoreKit.a and libFBSDKLoginKit.a from the General tab in Xcode. These are the only three Core/Login/Share things available to link. They refer to the pods, and looking in the pods directory you see there are no .framework files, just .h files, so those are the ones we import into AppDelegate.m. That (I think) gives react-native-fbsdk all the files in the the SDK components that it needs.
It's working for me with my Podfile set up this way (not sure Bolts framework pod is needed):
pod 'Bolts'
pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'
And I had to do react-native link to make sure that the libRCTFBSDK.a is in the xcode's Build TARGET => build phrases => "Link Binary with libraries" list. If not, you probably need to add the libRCTFBSDK.a in manually. I found that once I ran the react-native link and the libRCTFBSDK.a is in that list, xCode then compiled correctly.
If you use cocoapods, react native will use cocoapods to link link libraries. I created a new project then install and link all packages before run 'pod init' and 'pod install'. Maybe this error from cocoapods when link packages. All packages need 'react-native link' you installed after run 'pod install' it not working. I think we can deintegate cocoapod before run react native link.

react-native-maps iOS error

Trying to add airbnb/react-native-maps to my react native project and follow the guide at https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md. Option 1,
Option 1: Cocoapods - Same as the included AirMapsExplorer example
Setup your Podfile like the included example/ios/Podfile then run pod install. (If you do not need GoogleMaps support for iOS, then you can probably completely skip this step.)
Open your project in xCode workspace
Drag the following folder into your project:
node_modules/react-native-maps/ios/AirMaps/
If you need GoogleMaps support also drag this folder into your project:
node_modules/react-native-maps/ios/AirGoogleMaps/
After done, I cannot run the project in Xcode, it gives the error, 'RCTImageLoader.h' file not found.
I hv tried run rnpm link and it cannot go through,
rnpm-link info Android module react-native-maps is already linked
rnpm-link info Linking react-native-maps ios dependency
rnpm-link ERR! It seems something went wrong while linking. Error: ENOENT: no such file or directory, open '/Users/nedved/Desktop/NativeCreditcard_office/node_modules/react-native-maps/ios/AirGoogleMaps.xcodeproj/project.pbxproj'
Please file an issue here: https://github.com/rnpm/rnpm/issues
I can find the file /Users/XXXX/node_modules/react-native-maps/ios/AirGoogleMaps.xcodeproj locally, but when clicking, "Project /Users/XXXX/node_modules/react-native-maps/ios/AirGoogleMaps.xcodeproj cannot be opened because it is missing its project.pbxproj file."
Any idea?