react-navigation / react-navigation/react-navigation

Setup Navigation v6 for react-native 0.67.1 run error

Open
#10,277 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:bottom-tabs package:drawer package:material-bottom-tabs package:material-top-tabs package:native-stack package:stack platform:android platform:ios repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Current behavior

file package.json

"dependencies": { "@react-native-masked-view/masked-view": "^0.2.6", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/drawer": "^6.1.8", "@react-navigation/elements": "^1.2.1", "@react-navigation/native": "^6.0.6", "@react-navigation/stack": "^6.0.11", "react": "17.0.2", "react-native": "0.67.1", "react-native-gesture-handler": "^2.2.0", "react-native-reanimated": "^2.3.1", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.10.2" },

file MainActivity.java
`
import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

/**

  • Returns the name of the main component registered from JavaScript. This is used to schedule
  • rendering of the component.
    */
    @Override
    protected String getMainComponentName() {
    return "SmartEVN2";
    }

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
}`

npx react-native run-android

Capture

after
add to file MainApplication.java

import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
`private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      return packages;
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }

    @Override
    protected JSIModulePackage getJSIModulePackage() {
      return new ReanimatedJSIModulePackage(); // <- add
    }
  };`

run it work. but debug error

https://user-images.githubusercontent.com/1575246/150481638-bd14625b-632e-432a-8240-22f2e284019d.mp4

Expected behavior

help run project successful

Reproduction

https://snack.expo.dev/@evnitmobile/6df3bd

Platform
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
Environment
  • [] I've removed the packages that I don't use
package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Android run and debug behavior with the dependencies in package.json and npx react-native run-android. Compare the Android entry points MainActivity.java and MainApplication.java with the reported setup, then use the linked Snack and video to identify the failure; done means the project runs successfully in debug on the reported platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
java, javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.