React Native: There is an exception using react-native-fs - react-native

This is an error when using React-native-fs. I am using expo to create my project without detach and tried not to detach as possible. I want to read the content:// image retrieved from getPhotos in CameraRoll from react-native module as a file path. Is it because i have not detach my application. Is there a way to use expo to retrieve the file path of the image.

You should link project
react-native link react-native-fs
or manual linking
android/settings.gradle
...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
android/app/build.gradle
...
dependencies {
...
compile project(':react-native-fs')
}
add package .addPackage(new RNFSPackage())
then generate new build

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

Can not remove system_alert_window permission from react native project made by expo

I have a React Native project created with command expo init and built with expo build:android and I tried to remove system_alert_permission with no luck.
things that I've tried:
adding below code to AndroidManifest.xml file in debug, main and release directory:
adding below code to app.json:
"permissions": []
both of which didn't remove the permission. any idea how to do this?
thanks for your help.
Expo managed workflow doesn’t allow access to the manifest file to remove permission so we have to build a plugin that modifies its content.
You can find the answer in the following link:
how to build the plugin to modify Info.plist and AndroidManifest.xml
You can remove any permission from the final AndroidManifest.xml file by using the android.blockedPermissions property in your app config file (app.config.js / app.config.json).
Read the docs:
https://docs.expo.dev/versions/latest/config/app/#blockedpermissions

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

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)

Load Text file in react native locally

I am creating an application using react native expo cli, my application contains a lot of data which is in the text file.
So now i need to load the text file into my application. how can i do that?
After dig down a lot regarding this issue i manage to answer my own question.
To read text file in react-native we have to create bare react-native project.
Read this link about manage and bare project for react-native : expo-managed-vs-bare.
After eject expo project or creating bare react-native project you can use library react-native-fs, which have ability to read text file and display in Text component.
For Android,
Create an assets Folder inside your-project-file\android\app\src\main
To read this folder assets use this snippet,
import * as RNFS from 'react-native-fs';
RNFS.readFileAssets(path to your file inside assets folder).then(result => {
console.log(result);
}).catch(err => {
console.log(err);
});
This will help to read text file inside your project for android only.
As #james Liu,the simplest way is to organize your data as json an load it like this:
const data = require("./mydata.json");
By doing this you get an JS object you can easily handle in your code

React-native-maps module, missing gradle files?

I'm trying to set up react-native-maps module at my react-native app, however the component I've put in the code is blank.
To configure it properly I'm following the instructions (https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md), however at the very first step I've encountered a problem.
The android/settings.gradle file is missing, even the android directory. Should I launch some command to generate these? The remaining screens seem to work.
There are plenty of gradle files in node_modules folder, the one from expo module could be the match, but changing it doesn't seem right.
Where is the settings.gradle file located by default?
Since you tagged expo in your question:
If you are using Expo you don't have to got through the integration steps, as react-native-maps is already included in Expo: https://docs.expo.io/versions/latest/sdk/map-view/
Just import the MapView from Expo:
...
import { MapView } from 'expo';
...
If you are not using Expo the settings.gradle file should look like this:
rootProject.name = '<your appname>'
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app'
for ''Where is the settings.gradle file located by default?'' android->app and (usually last file is)settings.gradle