i install react navigation version 6 and i want to use drawer navigation in project
for that install all packages of drawer navigation and make changes in
babel.congile file = plugins: ["react-native-reanimated/plugin"],
Second change in MainActivity.java file
"import android.os.Bundle;"
"import com.facebook.react.bridge.JSIModulePackage"
"import com.swmansion.reanimated.ReanimatedJSIModulePackage"
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
#Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
}
also i changes the andrion app buid.gradlew
project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]
when remove all these changes then Project buid succeeded and run
when i use the JS Module Packages then i face the above error
so My React native version 0.67
so any body can helper
hi #waqas i think you are using the latest version of react native reanimated.
please try to downgrade react native reanimated version to
"react-native-reanimated": "^1.13.2",
may be helps this;
Please refer to this GitHub thread https://github.com/facebook/react-native/issues/35210. It worked for me!
The steps I followed:
Deleted node_modules
Changed "react-native" package version (in the package.json file) from "0.70.1" to the latest patch I found in the thread (that was "0.70.5" for me)
Ran npm install to generate again the node_modules folder (you may want to use yarn install if your project is based on yarn packages)
Then cd android && ./gradlew clean
Finally cd .. (back to root folder) and npm run android to build the app.
Note that I followed the instructions for React Native >= 0.63 (version)
Hope this works for somebody else too!
Related
My react native project build fails somehow because of this error:
Execution failed for task ':app:mergeDebugNativeLibs'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction
> 2 files found with path 'lib/arm64-v8a/libfbjni.so' from inputs:
- C:\Users\Antonio\.gradle\caches\transforms-3\7cca348744e25f57fc2d9f871aa73c9a\transformed\jetified-react-native-0.71.0-rc.0-debug\jni\arm64-v8a\libfbjni.so
- C:\Users\Antonio\.gradle\caches\transforms-3\08b0f5c7017bf081f79b63ea5b053dc0\transformed\jetified-fbjni-0.3.0\jni\arm64-v8a\libfbjni.so
If you are using jniLibs and CMake IMPORTED targets, see
https://developer.android.com/r/tools/jniLibs-vs-imported-targets
Anybody got a clue what could cause the build to fail? I haven't edited any build file and/or removed/installed/upgraded new packages thanks
For me this worked (after reading Tony's link), my version of react was 0.66.0
Changed this file android\app\build.gradle
implementation "com.facebook.react:react-native:+" // From node_modules
to
implementation "com.facebook.react:react-native:0.66.0!!" // From node_modules
Short answer:
in your android/app/build.gradle
change
implementation 'com.facebook.react:react-native:+'
to ---> (replace 0.67.2 with your current react native version)
implementation 'com.facebook.react:react-native:0.67.2!!'
Long answer:
This is happening because all the templates reference the React Native dependency by range, like implementation 'com.facebook.react:react-native:+'. Usually this dependency gets resolved from the local Maven repo in ./node_modules/react-native/android but since it has been published to Maven Central it's now grabbing the very latest RC.
You can resolve this problem by forcing the React Native dependency to the version you expect with something like this implementation 'com.facebook.react:react-native:0.67.2!!' in your app's Gradle file. The !! is shorthand for restricting Gradle from upgrading if your project or its transitive dependencies depend on a newer version.
work for me, if your react native application version >= 0.63 you can update the patch version which should fix your problem.
link: https://github.com/facebook/react-native/issues/35210#:~:text=We%20have%20prepared%20releases%20for%20all%20the%20main%20versions%20of%20react%2Dnative%20with%20an%20hotfix%3A
if not just go to android/build.gradle and then in the allprojects object add the following code with the current version of react native in package.json
configurations.all {
resolutionStrategy {
force 'com.facebook.react:react-native:CURRENT_VERSION_OF_REACT_NATIVE'
}
}
Here's a workaround to fix this problem if you are not using latest version of react-native.
https://github.com/facebook/react-native/issues/35210
Go to android folder -> build.gradle file -> inside allprojects object and add following code. Add react native version from node_modules -> react-native -> package.json // "version": "0.68.2".
configurations.all {
resolutionStrategy {
force 'com.facebook.react:react-native:0.68.2'
}
}
See fb/rn#35204
This is the Official recommended fix!
Found through this issue: https://github.com/facebook/react-native/issues/35210.
Copied from this PR here
For my RN 0.66.0 project I only had to add theses lines:
allprojects {
repositories {
exclusiveContent {
// Official recommended fix for Android build problem with React Native versions below 0.71
// https://github.com/facebook/react-native/issues/35210
// TODO: remove this exclusiveContent section when we upgrade to React Native 0.71 (or above)
// copied from https://github.com/Scottish-Tech-Army/Volunteer-app/pull/101/commits/40a30310ee46194efbaf1c07aef8a0df70231eeb
filter {
includeGroup "com.facebook.react"
}
forRepository {
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
}
}
I had the same issue. There is a new patch for react-native now so update it in your package.json.
Mine is
"react-native": "^0.70.3"
and I changed it to
"react-native": "^0.70.5"
which worked for me
The answer lies here depending on the version of your react native. Patches are available for RN version 0.63 and up
https://github.com/facebook/react-native/issues/35210
Tips:
Don't just update react-native package, do an npm install
Clean gradle before running the app
Only add the code below IF your react native version is < 0.63
def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
allprojects {
configurations.all {
resolutionStrategy {
// Remove this override in 0.65+, as a proper fix is included in react-native itself.
force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
}
}
}
In order for my application to be approved and visible on both of Google PlayStore and Huawei App Gallery, I am currently maintaining two different branches:
Google branch which has react-native-maps installed but no HMS packages.
Huawei branch which has HMS maps installed but not react-native-maps.
I'm aware of the HMS+GMS approach, but from my experience having a module like react-native-maps that relies heavily on GMS made my app hidden from pure HMS devices, even though my app had ways to check and never navigate to screens that rely on GMS.
Both branches have the same code on the JavaScript side except one file which is used to display the map, this file imports from react-native-maps on GMS phones, and from react-native-hms-map for Huawei phones.
My question is: is there a way to dynamically exclude some files and packages in build time based on the product flavor so that I can use one codebase and just ignore some file when building the APK.
Solution:
Managed to come up with a solution that got my app approved and fully visible on app stores through disabling auto linking for react native maps and manually linking it based on the product flavor.
(Code might not be the cleanest but it's behaving as expected, so any cleanup suggestions would be appreciated)
Steps:
1. Disable manual linking for react-native-maps on android
By creating a file named react-native.config.js in the root directory of the project, and added the following
module.exports = {
dependencies: {
"react-native-maps": {
platforms: {
android: null,
}
}
}
}
2. Added product flavors for Google and Huawei
By adding the following to android/app/build.gradle
...
...
android{
...
...
flavorDimensions "provider"
productFlavors {
google {
dimension "provider"
}
huawei {
dimension "provider"
}
}
...
...
}
...
...
3. Added the following to the same android/app/build.gradle file
...
...
dependencies {
...
...
huaweiImplementation 'com.huawei.hms:location:4.0.2.300'
huaweiImplementation 'com.huawei.hms:hwid:4.0.1.300'
googleImplementation project(':react-native-maps')
...
...
}
...
...
4. Added the following into android/settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
5. Created 2 folders inside android/app/src
folders named: huawei and google with the following structure
6. added a java file inside android/app/src/google/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return new MapsPackage();
}
}
7. added a java file inside android/app/src/huawei/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return null;
}
}
8. added the following to android/app/src/main/java/com/appname/MainApplication.java
import static com.appname.MapPackageChecker.getMapPackage;
...
...
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//start of new lines
if(BuildConfig.FLAVOR.equals("google")){
packages.add(getMapPackage());
}
//end of new lines
return packages;
}
...
...
9. Access flavor name from react native code
I decided to use react-native-build-config for this purpose
Example for navigation component:
import googleMapScreen from "./googleMapScreen.js"; //relies on gms maps
import huaweiMapScreen from "./huaweiMapScreen.js"; //relies on hms maps
import BuildConfig from 'react-native-build-config';
const flavor = BuildConfig.FLAVOR
...
...
<Stack.Screen
name="MapScreen"
component={flavor === "huawei" ? huaweiMapScreen : googleMapScreen}
/>
...
...
10. After adding product flavors, we need to make some changes to our commands
yarn react-native run-android
becomes: yarn react-native run-android --variant=huaweiDebug
or: yarn react-native run-android --variant=googleDebug
./gradlew assembleRelease
becomes: ./gradlew assembleHuaweiRelease
or: ./gradlew assembleGoogleRelease
11. For convenience we can add the following to package.json scripts
"scripts":{
"run-huawei": "yarn react-native run-android --variant=huaweiDebug",
"run-google": "yarn react-native run-android --variant=googleDebug",
}
First of all, Huawei does support react-native-maps. Please check here: https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides-V1/integrating-sdk-0000001050034173-V1
When HMS+GMS is the preferred solution, in the code the APP needs to decide whether to use HMS or GMS based on the availability of HMS and GMS services on the device.
. How to decide whether to use HMS or GMS :
Check that GMS is available
There are also some links for your reference:
React Native Application Detect device support GMS or HMS: https://forums.developer.huawei.com/forumPortal/en/topic/0201200045194610058?fid=0101187876626530001
Choice SDK - an open-source GMS-HMS wrapper: https://forums.developer.huawei.com/forumPortal/en/topic/0201555879126330259?fid=0101187876626530001
You may refer to this.
It's configured in here：
And run the following command:
Hello friends i got this error after linking react-native-webview to my project
Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.
This error is located at:
in RNCWebView (at WebView.android.js:250)
in RCTView (at WebView.android.js:253)
in WebView (at App.js:7)
in App (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)
And there is my code
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
Error Image in my android
run react-native link react-native-webview
check: https://github.com/react-native-community/react-native-webview/issues/140
With React Native 0.60+, no need to add anything to the podfile.
Try again cd ios && pod install
If it doesn't help, try restarting the simulator and rebuilding the app.
Restarting Xcode is also a good idea.
You could optionally clean the build Folder in XCode
Try these steps.
Delete pods folder and podfile.lock
npm uninstall react-native-webview
npm i react-native-webview
cd ios
pod install
(npx) react-native run-ios
Reset cache
I had the same issue. Try Add this line to your podfile :-
pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'
then go to ios folder cd ios and install pods pod install
It has resolved this problem for me.
Make sure you did:
npx pod-install
npx react-native run-ios
After installing the package you. need to update pods and then run the project again.
my solution for this problem was the following:
Android
1 add this in your android/settings.gradle
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
2 add this in your android/app/build.gradle
dependencies {
implementation project(':react-native-webview')
....
3 in your MainApplication.java:
import com.reactnativecommunity.webview.RNCWebViewPackage;//add this import
....
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
#Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCWebViewPackage(),//add line
....
IOS
1 add the following line in your ios/Podfile and then open your terminal, go to your project ios folder and run pod install
...
pod 'react-native-webview', :path => '../node_modules/react-native-webview'
...
I had the same issue before , I tried this:
pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'
I update webView to the latest (11.18.1) and it was fixed without any additional linking steps.
I have done below steps:
1. cd ios
2. rm Podfile.lock
3. pod install
This installed the missing library i.e. react-native-webview and added below line to Podfile file.
pod 'react-native-webview', :path => '../node_modules/react-native-webview'
environment which I am working on:
"react": "16.9.0",
"react-native": "0.61.5"
Follow these simple steps worked for me:
Rebuild the App. Run:
npx react-native run-android
Run:
react-native link react-native-webview
Check if RNCWebViewPackage is imported in MainApplication.java file, which looks something like this:
import com.reactnativecommunity.webview.RNCWebViewPackage;
Note: I'm using react-native#0.64.2.
There is no need to add anything or use the link for React Native 0.60+.
In my case, which was android, I simply build the project again using:
$ npm run android
Have you tried to link manually?
Go to ../node_modules/react-native-webview/ios and drag and drop the RNCWebView.xcodeproj to Libraries folder on Xcode, right after, Go to Build Phases tab (on Xcode) in the section "Link binary With libraries" add the libRNCWebView.a (inside Libraries/RNCWebView.xcodeproj/Products). Try to build and run
try to re-build your project after installation and link of webview package (npx react-native run-android)
This is my problem.
A problem occurred configuring project ':react-native-vector-icons'.
Could not resolve all dependencies for configuration ':react-native-vector-icons:classpath'.
Could not load module metadata from C:\Users\erick.gradle\caches\modules-2\metadata-2.71\descriptors\com.android.tools.build\gradle-api\3.3.1\fc7e8eef251519086b6ee9788cba4dd2\descriptor.bin
Please refer to this to see if there are any missing parts.
Edit android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Edit android/settings.gradle to look like this (without the +):
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
Edit android/app/build.gradle (note: app folder) to look like
this:
dependencies {
+ implementation project(':react-native-vector-icons')
}
Edit your MainApplication.java (deep in
android/app/src/main/java/...) to look like this (note two places to
edit):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
in React Native > 0.60, you do not need to link packages manually. All you need is install your package and run link command. for react-native-vector-icons, remove any code and files you added to android or ios manually, or run react-native unlink react-native-vector-icons.
Remember that for ios, you need to get the last update of cocopods. if you have problem again, in ios folder run pod install command.
I hope this can help you.
I create a new project in react-native ,then install (npm install --save react-navigation npm install --save react-native-gesture-handler),
the latest version (react-native: 0.60.0) auto linking so,I not link ,but still is showing error,
!https://prnt.sc/oaxxuc
Task :react-native-gesture-handler:compileDebugJavaWithJavac **FAILED**
After I uninstall gesture-handler this kind of error showing
!https://prnt.sc/oaxx8i
Please help to solve this error
The react-native latest version:-
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0 npmGlobalPackages:
react-native-cli: 2.0.1
thanks
You should paste import 'react-native-gesture-handler'; on the top of index.js which is standard in react native out of the box.
the entry of your app. This is the file where you import your App.js file, its written clearly in the documentations.
documents here https://reactnavigation.org/docs/en/getting-started.html
This issue has been posted on github and you can apply the following solution.
It will work for the RN 0.60.0.
https://github.com/kmagiera/react-native-gesture-handler/issues/642#issuecomment-509113481
First, install the library using yarn:
yarn add react-native-gesture-handler
or with npm if you prefer:
npm install --save react-native-gesture-handler
Linking
react-native link react-native-gesture-handler
Android
Follow the steps below:
If you use one of the native navigation libraries (e.g. wix/react-native-navigation), you should follow this separate guide to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that use a standard Android project layout.
Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
#Override
protected String getMainComponentName() {
return "Example";
}
+ #Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ #Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
iOS
There is no additional configuration required on iOS except what follows in the next steps.
Now you're all set. Run your app with react-native run-android or react-native run-ios
If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
android: null,
ios: null,
},
},
},
};
As suggested by documentation
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC
const ExampleWithHoc = gestureHandlerRootHOC(() => (
<View>
<DraggableBox />
</View>
);
);
export default function Example() {
return (
<Modal>
<ExampleWithHoc />
</Modal>
);
}
Here the documentation
for react-native-gesture-handle 2 version onwards we just need to following changes at App.js
import {GestureHandlerRootView} from 'react-native-gesture-handler';
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}
Downgrade from 1.1.0 -> 1.0.16 and use exact version(-E):
npm i react-native-gesture-handler#1.0.16 -D -E