Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[error] react-native 0.60.0 react-navigation 3.11 with error: package android.support.v4.util doesn't exist #6066

Closed
M1seRy opened this issue Jul 10, 2019 · 20 comments

Comments

@M1seRy
Copy link

@M1seRy M1seRy commented Jul 10, 2019

react-native-gesture-handler error

Hi,
I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html to add react-navigation:

yarn add react-navigation

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler

and successfully linked

info Linking "react-native-gesture-handler" iOS dependency info iOS module "react-native-gesture-handler" has been successfully linked info Linking "react-native-gesture-handler" Android dependency info Android module "react-native-gesture-handler" has been successfully linked

and then change the MainActivity.java like the docs it asks.

everything runs fine before adding navigation.

Then run react-native run-android emulator, and error pop up :

xxxx/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:3: error: package android.support.v4.util doesn't exist import android.support.v4.util.Pools; ^ xxxx/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:19: error: package Pools doesn't exist private static final Pools.SynchronizedPool<RNGestureHandlerEvent> EVENTS_POOL = ^

Your Environment

software version
react-navigation ^3.11.0
react-native 0.60.0
node v10.14.1
npm or yarn npm 6.4.1 yarn 1.16.0
react-native-gesture-handler ^1.3.0

I try to solve this by search in issues and stackoverflow, but non of them is working for me.
Any advice or help is needed . Thx.

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

Same thing happened after being upgraded to React-Native 0.60.

To solve @M1seRy case, try replacing the package "android.support.v4" to "androidx.core". It might fix.

Loading

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

And I'm having this issue.
error: package com.swmansion.gesturehandler.react does not exist
Any solutions?

Loading

@jayan2019
Copy link

@jayan2019 jayan2019 commented Jul 10, 2019

@KaviduAloka Manual linking of react-native-gesture-handler will resolve this issue.

Loading

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

@KaviduAloka Manual linking of react-native-gesture-handler will resolve this issue.

I tried and still didn't work. As RN 0.60 doesn't allow manual linking. And I did follow the steps by creating react-native.config.js to disable auto-linking. Still didn't work. Is there anyway to use React-native-navigation in RN 0.60?

Loading

@M1seRy
Copy link
Author

@M1seRy M1seRy commented Jul 10, 2019

@KaviduAloka Hi, I solve this issue with 'rm -rf node_modules' and reinstall with yarn. before you link the package, just add a react-native.config.js file in project root path with the following content:

module.exports = { dependencies: { 'react-native-gesture-handler': { platforms: { android: null, ios: null, }, }, }, };

Then link it with react-native link react-native-gesture-handler and use jetifier with:

npm i jetifier
npx jetify

Rebuild, And It was been build successful.

But A another error out with react-native-gesture-handler package:

IMG RNGestHandlerModule null error =>

null is not an object (evaluating 'rngesturehandlermodule.default.createGestureHandler')

Loading

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

@M1seRy, yes that was fixed and the mentioned error appeared for me too...

Loading

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

@KaviduAloka Hi, I solve this issue with 'rm -rf node_modules' and reinstall with yarn. before you link the package, just add a react-native.config.js file in project root path with the following content:
module.exports = { dependencies: { 'react-native-gesture-handler': { platforms: { android: null, ios: null, }, }, }, };
Then link it with react-native link react-native-gesture-handler and use jetifier with:
npm i jetifier
npx jetify
Rebuild, And It was been build successful.
But A another error out with react-native-gesture-handler package:
IMG RNGestHandlerModule null error =>
null is not an object (evaluating 'rngesturehandlermodule.default.createGestureHandler')

You can fix this by commenting the export { default as Directions } from './Directions'; line in node_modules/react-native-gesture-handler/GestureHandler.js

And another error appears... :/

Loading

@techragesh
Copy link

@techragesh techragesh commented Jul 10, 2019

I'm also having this issue.
error: package com.swmansion.gesturehandler.react does not exist
Any ideas?

Loading

@techragesh
Copy link

@techragesh techragesh commented Jul 10, 2019

I am getting this error
MainActivity.java:6: error: package com.swmansion.gesturehandler.react does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
MainActivity.java:24: error: cannot find symbol
return new RNGestureHandlerEnabledRootView(MainActivity.this);
symbol: class RNGestureHandlerEnabledRootView
2 errors

Loading

@KaviduAloka
Copy link

@KaviduAloka KaviduAloka commented Jul 10, 2019

It seems react-navigation is not compatible with new ReactNative 0.60 in some points... You can easily workout if you create the project with the react-native version 0.59

Loading

@jivtesh813
Copy link

@jivtesh813 jivtesh813 commented Jul 10, 2019

Any update from anyone, I am also getting error: package com.swmansion.gesturehandler.react does not exist.
I tried all the methods mentioned in different forums, such as
npm i jetifier
npx jetify
but nothing is working, I am still getting same error. If react-navigation is not compatible with 0.60, then could someone suggest alternative library?

Loading

@M1seRy
Copy link
Author

@M1seRy M1seRy commented Jul 10, 2019

@techragesh Hi, I have got the same error. I hope this can make helps:
try to add this line in your project file android/app/build.gradle . under the dependencies block:

implementation project(':react-native-gesture-handler')

build.gradle example:

dependencies {
    implementation project(':react-native-gesture-handler')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

    // JSC from node_modules
    if (useIntlJsc) {
        implementation 'org.webkit:android-jsc-intl:+'
    } else {
        implementation 'org.webkit:android-jsc:+'
    }
}

add this 2 line code to settings.gradle file in android/settings.gradle:

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

settings.gradle example:

rootProject.name = 'yourProject'
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

then:

  1. delete the 'build' fold in your project 'android/app/build'
  2. clean the watchman file: watchman watch-del-all
  3. restart metro bundler server: react-native start --reset-cache
  4. rebuild react-native run-android

good luck.

Loading

@jivtesh813
Copy link

@jivtesh813 jivtesh813 commented Jul 10, 2019

@M1seRy - I followed your instructions and didn't get previous error (error: package com.swmansion.gesturehandler.react does not exist), but now I am getting below error.

error: package android.support.v4.util does not exist

Any more help you can offer?

Loading

@FerBiani
Copy link

@FerBiani FerBiani commented Jul 11, 2019

Hi! I followed the instructions in this tutorial and the problems were solved: https://youtu.be/NcQhDlC7hT8

I hope it helps!

Loading

@satya164
Copy link
Member

@satya164 satya164 commented Jul 11, 2019

Please check the latest docs: https://reactnavigation.org/docs/en/getting-started.html

Loading

@satya164 satya164 closed this Jul 11, 2019
@jivtesh813
Copy link

@jivtesh813 jivtesh813 commented Jul 11, 2019

@satya164 I know you closed the issue, and to be honest the video https://youtu.be/NcQhDlC7hT8 worked for me, and can see you have updated the official documentation. But we still don't need to change MainActivity.java file. That step was not in video, and I didn't did yet, and everything is working good for me.

I have written all the steps for my help. But I am pasting here, so that it can help everyone.

Steps to create React-Native app with React-Navigation

  1. Create React Native app with below command. It is better if you open cmd as administrator, as one of the below jetifier commands might request that.

react-native init AwesomeProject

  1. Go into project by:
    cd AwesomeProject

Note - All commands in below steps will be run from this project location

  1. Install React Navigation and its handler by below 2 commands:

npm install --save react-navigation

npm install --save react-native-gesture-handler

  1. I have not followed next steps from React Navigation website, instead followed below steps

Unlink for iOS with below command:
react-native unlink react-native-gesture-handler --platforms iOS

Although it did nothing and i got the message below, which is ok.
info iOS module "react-native-gesture-handler" is not installed

  1. Create a file named react-native.config.js in the root directory of your project. Means in this case it will be under folder AwesomeProject, and this file will be adjacent to other files such as - package.json etc

Add below code to the react-native.config.js file
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
ios: null,
},
},
},
};

  1. After saving above file, run below command:
    npm install --save-dev jetifier

  2. Now go to project’s package.json file and add below code in Scripts section and save:
    "postinstall": "npx jetify"

Your package.json, should look like below:
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"postinstall": "npx jetify"
},

  1. Now run below command:
    npm install

    You should see something like this on console:
    Jetifier found 893 file(s) to forward-jetify. Using 4 workers…

  2. Update the MainActivity.java file, as mentioned in ReactNavigation official site.

  3. Now let’s test if React Navigation working. Add below code to your App.js

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
Home Screen

);
}
}

const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
});

export default createAppContainer(AppNavigator);

  1. Run below command:
    react-native run-android

  2. It should run ok, but I got below error:
    error: bundling failed: Error: Unable to resolve module ./createNavigationContainer

  3. If you get above error as well, then delete all files from %TEMP% folder. OR you can use below command to clear cache.
    react-native start --reset-cache

For me clearing %TEMP% folder works.

GOOD LUCK!

Loading

@tindn
Copy link

@tindn tindn commented Jul 18, 2019

@jivtesh813 I have the same errors with RN 0.60.3, react-navigation 3.11.1 and react-native-gesture-handler 1.3.0. Following your steps (and not updating MainActivity.java) resolves this. @satya164 should the guide be updated to this? I can submit a PR for it too.

Loading

@satya164
Copy link
Member

@satya164 satya164 commented Jul 18, 2019

I'm 100% sure MainActivity.java needs to be updated for gestures to work. Regarding build errors, make sure you're on latest React Native version. If it doesn't work, use https://github.com/mikehardy/jetifier

Loading

@tindn
Copy link

@tindn tindn commented Jul 18, 2019

That's good to know. Will modify the MainActivity.java. I am on the latest RN version, wonder why it doesn't work for me. Jetifier fixes it though.

Loading

@jivtesh813
Copy link

@jivtesh813 jivtesh813 commented Jul 18, 2019

@tindn @satya164 - I have updated my steps and added to update MainActivity.java file as well as per the official documentation. I did received few random error before that, so I though it might be because I haven't updated MainActivity.java. So I updated that, so far so good. So updated my steps as well.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants