Reactnative - 'React/RCTBridgeModule.h' file not found - reactjs

I am trying to use react-native-linea in my react native app and during build I am getting React/RCTBridgeModule.h' file not found error.
Steps I tried -
1. react-native init ScannerApp
2. cd ScannerApp/
3. npm i react-native-linea --save
4. react-native link react-native-linea
5.Drag and drop the InfineaSDK Framework into the General > Embedded Binaries section of your Project. The framework will also display the Linked Frameworks and Libraries.
a. Verify that Copy Items if needed is checked.
6.Add the following to General > Linked Frameworks and Libraries:
• CoreLocation.framework
• ExternalAccessory.framework
• Foundation.framework
7.Add a new Run Script phase.
At the end of your project’s Build phase(s), add new running scripts to set up InfineaSDK.
FRAMEWORKS="${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}" "${FRAMEWORKS}/InfineaSDK.framework/SDKSetup"
8.react-native run-ios
****Error*****
simulator/react-native-linea.build/Objects-normal/x86_64/RCTLinea.o
In file included from /Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.m:9:
/Users/****/reactnative/ScannerApp/node_modules/react-native-linea/react-native-linea/RCTLinea.h:9:9: fatal error: 'React/RCTBridgeModule.h' file not found
#import <React/RCTBridgeModule.h>
^~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
** BUILD FAILED **

Solution 1: Adding podspec
Prerequisite: You will need to setup React as cocoapod dependency for this to work. Also, before you try this make sure you have package react-native-linea available in node_modules.
In this solution you need to create a podspec file for the linea. You can choose to keep it in your ScannerApp project or fork the original repo and add the podspec file to it. If you fork, please modify the git urls in the podspec to your repo url and add the react-native-linea package from your repo. Here's the podspec that worked for me,
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '../node_modules/react-native-linea/package.json')))
Pod::Spec.new do |s|
s.name = 'LineaPro'
s.version = package['version']
s.summary = package['description']
s.license = package['license']
s.homepage = 'https://github.com/pablo-coco/react-native-linea'
s.authors = 'pablo-coco'
s.source = { :git => 'https://github.com/pablo-coco/react-native-linea.git', :tag => s.version }
s.source_files = '*.{h,m}','react-native-linea/*.{h,m}'
s.requires_arc = true
s.platforms = { :ios => "9.0" }
s.vendored_libraries = 'libdtdev.a'
s.frameworks = 'ExternalAccessory', 'CoreLocation'
s.dependency 'React'
end
Now you need to add this as cocoapod dependency in your ScannerApp podfile. If you add podspec file locally, make sure to specify its path as below,
pod 'LineaPro', :path => '../node_modules/react-native-linea', :podspec => '../ios/LineaPro.podspec'
If you created fork and added podspec to repo then skip the :podspec part.
Solution 2: Add source files directly
This is fairly simple solution and i'd recommend this. You can clone the react-native-linea repo locally on your machine.
Copy DTDevices.h, RCTLinea.h, RCTLinea.m source files to ios project
Copy LineaPro.js, NativeBridges.js to js project
Copy libdtdev.a static lib to project
Link ExternalAccessory, CoreLocation frameworks and libdtdev.a to your target
Compile and write js code to initialize LineaPro module.

Related

Uncaught TypeError: Cannot read properties of undefined (reading 'call') at Hash.CipherBase

I am using create-hash package (https://github.com/crypto-browserify/createHash) in my code of ionic react application.
I have installed the package using npm install create-hash
I am using the function as following:
const hash = createHash('sha256')
.update("entropyBuffer")
.digest();
However, it throws the following error in the browser:
When I change the algorithm to the following: 'md5', 'rmd160' and 'ripemd160', it works fine. I don't understand what is the problem?
I have looked at the similar queries online but nothing was helpful.
https://github.com/crypto-browserify/cipher-base/issues/11
How to generate a Mnemonic in Angular (with npm package bip39 for Solana)
Referring to the original answer here - Link
patch-package helped me:
npm i patch-package
in the package.json add this line:
"scripts": {
"postinstall": "patch-package",
}
opend the problem file and correct it. In my case:
node_modules/cipher-base/index.js
var Buffer = require('safe-buffer').Buffer
var Transform = require('readable-stream').Transform // replacing instead of "stream"
var StringDecoder = require('string_decoder').StringDecoder
var inherits = require('inherits')
function CipherBase (hashMode) {
...
run the command from a root dir of your project:
npx patch-package cipher-base
it'll create a new folder patches in the root dir and add there this fix. That's all. Commit changes. It'll automaticaly replace code in the node_modules after reinstalling packages

`pnpm add` within a workspace does not add projects from workspace

I am working with a very simple monorepo with the following structure:
.npmrc
package.json
pnpm-workspaces.yml
packages/
package-1/
package-2/
When I cd into package-1, I am trying to add a reference to package-2 by doing the following:
pnpm add #myorg/package-2
But I get the error #myorg/package-2 is not in the npm registry, or you have no permission to fetch it.. I expect that pnpm add would detect that I'm inside a workspace and automatically link workspace packages. Am I missing something here?
Here is the relevant information you should need:
My packages use the #myorg/[package-name] convention inside of package.json "name" field.
The pnpm-workspaces.yml file is as follows:
packages:
- 'packages/**'
My .npmrc file is as follows:
link-workspace-packages = true
prefer-workspace-packages = true
recursive-install = true
Ugh, I'm leaving this in case anybody else wants to feel embarrassed for themselves.
The pnpm-workspaces.yml should be named pnpm-workspace.yaml - I'm not sure where I got the other invalid name... but hopefully this helps you waste less time than I did.

react jest snapshot testing - change directory structure

My current structure looks like this
- Button
- Button.tsx
- Button.test.tsx
When I add a snapshot test, by default it creates a __snapshot__directory like so
- Button
- __snapshots__
- Button.test.tsx.snap
- Button.tsx
- Button.test.tsx
I would like the snapshot file to be colocated next to the other button files like so
- Button
- Button.tsx
- Button.test.tsx
- Button.test.tsx.snap
I have read about a new jest config snapshotResolver but I can't get it working with my react app (which was created using CRA).
If I try and add this to the package.json file, react tells me it only supports a number of jest options, snapshotResolver is not one of them.
I've tried following examples online but I can't get it to work
I have created a jest.config.js in the root of my project which contains
module.exports = {
snapshotResolver: './snapshotResolver.js',
};
And also created snapshotResolver.js also at the project root (this is taken from a github issue I believe)
// https://jestjs.io/docs/en/configuration.html#snapshotresolver-string
module.exports = {
testPathForConsistencyCheck: 'some/example.test.js',
resolveSnapshotPath: (testPath, snapshotExtension) =>
testPath.replace(/\.test\.([tj]sx?)/, `${snapshotExtension}.$1`),
resolveTestPath: (snapshotFilePath, snapshotExtension) =>
snapshotFilePath.replace(snapshotExtension, '.test'),
};
2 things. Firstly, have I setup the jest config and resolver correctly? Secondly, because I am using CRA, does it ignore the jest.config and use whatever defaults it has?
Edit
I found this PR that has been opened since August 2019, https://github.com/facebook/create-react-app/issues/6532
As you have already discovered, create-react-app does not support the snapshotResolver config option.
So, unless you eject your project, you will not be able to tweak where the snapshots are stored.

React-native-camera error when compiling android

I tried to upgrade my react native project to the newest version (0.59.2). Unfortunately, now when trying to run react-native run-android im getting this error:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-camera.
Required by:
project :app
> Cannot choose between the following variants of project :react-native-camera:
- generalDebugRuntimeElements
- mlkitDebugRuntimeElements
All of them match the consumer attributes:
- Variant 'generalDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'generalDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'general' but wasn't required.
- Variant 'mlkitDebugRuntimeElements':
- Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
- Found com.android.build.api.attributes.VariantAttr 'mlkitDebug' but wasn't required.
- Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value 'Aar'.
- Required org.gradle.usage 'java-runtime' and found compatible value 'java-runtime'.
- Found react-native-camera 'mlkit' but wasn't required.
I have already tried to create a new project however this results in the same error.
Reinstalling the node modules didn't help either.
On iOS it works fine.
Insert the following lines in android/app/build.gradle
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
}
}
Please insert the following line in android/app/build.gradle inside defaultConfig block either
missingDimensionStrategy 'react-native-camera', 'general'
or
missingDimensionStrategy 'react-native-camera', 'mlkit'
Add jitpack to android/build.gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
Complete guide
Could not resolve project :react-native-camera. on Android
Hope this helps.
Step 1:
Change the class path in android/build.gradle in dependencies tag to this:
classpath 'com.android.tools.build:gradle:3.3.0'
Step:2:
Change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
Step 3:
In the android/app/build.gradle add this at the top:
defaultConfig {
missingDimensionStrategy 'react-native-camera', 'general'
}
}
Step 4:
Also add these two lines:
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
Camera works now.
It is simple to resolve by adding missingDimensionStrategy attribute in defaultConfig tag in android/app/build.gradle.
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'
}
}
If you are still having the same issue then you have to do the following steps.
Ensure that your gradle build tool version is greater than 3.3.0. You can use 3.4.1 for this purpose. Change the gradle build tool version from android/build.gradle file buildscript dependencies attributes.
buildscript {
...
dependencies {
classpath("com.android.tools.build:gradle:3.4.1")
}
}
Also have to change the gradle wrapper to 4.4 or later. You can change the gradle version in android/gradle/wrapper/gradle-wrapper.properties to this
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
Finally add the following lines in repositories tag of android/build.gradle
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }

How to add sourcemap in React Native for Production?

I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android.bundle:20:2435
But it's not really helpful for me to trouble shoot. How could I enable source map so that I could track down where the issue is ?
UPDATE 2018
https://docs.expo.io/versions/latest/guides/using-sentry.html Looks promising !
For source mapping here is the way I go about it:
In my bundle command for my production build I tell it to generate a source map:
iOS:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js
Android - I had to actually modify the android/app/react.gradle file to get source maps generating on release compile. There might be an easier way but basically you find where it builds up the bundle command in the bundleReleaseJsAndAssets method and add the source map bit to it:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}
The output path looks a bit odd but that puts it at your root level (same spot as iOS. I wanted it that way. You can obviously put it anywhere).
Then once you have an error with the line number that means nothing you run it through the "source-map" NPM package. You could probably get very elaborate with your approach but I simply went with:
var sourceMap = require('source-map');
var fs = require('fs');
fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
console.log(smc.originalPositionFor({
line: 16,
column: 29356
}));
});
Where line and column should be replaced withe line and column number from your example output above.
This obviously works best if you have the source maps stored somewhere as the line and column numbers change from build to build as your code changes. It should get pretty close though if you can use you source control setup of choice to go back to the commit that was used to build the app in question and re-generate the bundle with the additional bits to the command to generate the source map.
Android inspired by #chetstone's answer
Starting on v0.32 for android, you can modify your android/app/build.gradle to accomplish this.
Look for the line
apply from: "../../node_modules/react-native/react.gradle"
Just above this, you will see something like:
project.ext.react = [
entryFile: "index.js",
]
Modify it to match the following
project.ext.react = [
entryFile: "index.js",
extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]
On iOS
Go to your build phases in Xcode for the "Bundle React Native code and images" phase and add:
export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"
As noted, there's no obvious way to generate the sourcemap file for React Native on iOS. The bundle command is called from react-native-xcode.sh, and there's no provision to add parameters to the bundle command line. But I found a clean way to do it.
react-native-xcode.sh uses the environment variable BUNDLE_CONFIG to specify a config file. If you create an empty config file it has no effect, and then you can add additional CLI parameters.
Create an empty config file.
touch null_config
Set BUNDLE_CONFIG with your config file, and piggyback the --sourcemap-output parameter.
export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"
When you build, the file sourcemap.js.map will be created.
This is only for iOS.
step 1: Generate sourcemap.js file by using following command.
add this line in package.json file
"bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js"
Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder
$ yarn bundle:ios
Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/
$ cd ios/source-map/
$ touch sourcemap-decoder.js
Content of sourcemap-decoder.js is
const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');
fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
if (err) {
console.log('err', err,);
}
const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));
console.log(consumer.originalPositionFor({
line: 1408,
column: 7762
}));
});
Step 3: execute the script for decoding
$ node ios/source-map/sourcemap-decoder.js

Resources