search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.04k stars 2.67k forks source link

[V3] setRoot with bottom tabs crash #5540

Closed ivanguimam closed 4 years ago

ivanguimam commented 4 years ago

Issue Description

I use setRoot and pass bottomTabs, if bottomTabs contains more than one stack, it will crash, only one stack will works well.

OBS: This problem occurs when I have more than 2 screens on the stack

It works good on iOS.

Steps to Reproduce / Code Snippets / Screenshots

java.lang.NullPointerException: Attempt to read from field 'int android.view.ViewGroup$MarginLayoutParams.bottomMargin' on a null object reference
        at com.reactnativenavigation.presentation.ComponentPresenterBase.applyBottomInset(ComponentPresenterBase.java:18)
        at com.reactnativenavigation.viewcontrollers.ComponentViewController.applyBottomInset(ComponentViewController.java:106)
        at com.reactnativenavigation.viewcontrollers.-$$Lambda$PdnjwIMOFJug2YGdC1rKp4pGYAA.on(lambda)
        at com.reactnativenavigation.utils.CollectionUtils.forEach(CollectionUtils.java:93)
        at com.reactnativenavigation.utils.CollectionUtils.forEach(CollectionUtils.java:76)
        at com.reactnativenavigation.viewcontrollers.ParentController.applyBottomInset(ParentController.java:175)
        at com.reactnativenavigation.viewcontrollers.-$$Lambda$PdnjwIMOFJug2YGdC1rKp4pGYAA.on(lambda)
        at com.reactnativenavigation.utils.CollectionUtils.forEach(CollectionUtils.java:93)
        at com.reactnativenavigation.utils.CollectionUtils.forEach(CollectionUtils.java:76)
        at com.reactnativenavigation.viewcontrollers.ParentController.applyBottomInset(ParentController.java:175)
        at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.applyBottomInset(BottomTabsController.java:186)
        at com.reactnativenavigation.viewcontrollers.bottomtabs.-$$Lambda$yeWoV8F6YAMT2qdLVg9HcIP0M2A.run(lambda)
        at com.reactnativenavigation.utils.ObjectUtils.perform(ObjectUtils.java:10)
        at com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController.onMeasureChild(BottomTabsController.java:173)
        at com.reactnativenavigation.views.BehaviourDelegate.onMeasureChild(BehaviourDelegate.java:22)
        at com.reactnativenavigation.views.BehaviourDelegate.onMeasureChild(BehaviourDelegate.java:7)
        at androidx.coordinatorlayout.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:813)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
        at androidx.appcompat.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:143)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
        at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
        at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
        at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
        at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465)
        at android.widget.LinearLayout.measureVertical(LinearLayout.java:748)
        at android.widget.LinearLayout.onMeasure(LinearLayout.java:630)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
        at com.android.internal.policy.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2643)
        at android.view.View.measure(View.java:18804)
        at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2112)
        at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1228)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1464)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1119)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6060)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858)
        at android.view.Choreographer.doCallbacks(Choreographer.java:670)
        at android.view.Choreographer.doFrame(Choreographer.java:606)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
        at android.os.Handler.handleCallback(Handler.java:746)
        at android.os.H

package.json

{
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-firebase/analytics": "^6.0.0",
    "@react-native-firebase/app": "^6.0.0",
    "@react-native-firebase/crashlytics": "^6.0.0",
    "axios": "^0.18.0",
    "eventemitter3": "^3.1.2",
    "formik": "^1.3.2",
    "immutable": "^4.0.0-rc.12",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "react": "16.9.0",
    "react-native": "0.61.1",
    "react-native-action-button": "^2.8.5",
    "react-native-auto-height-image": "^1.0.5",
    "react-native-bottom-action-sheet": "^1.0.2",
    "react-native-camera": "3.6.0",
    "react-native-circular-progress": "^1.0.1",
    "react-native-color-matrix-image-filters": "5.2.0",
    "react-native-config": "^0.11.5",
    "react-native-counter": "git+https://github.com/JEGardner/react-native-counter#a444b60bad6af928372056b456a6d4e15969b64d",
    "react-native-device-info": "^0.24.3",
    "react-native-dropdownalert": "^3.7.1",
    "react-native-fbsdk": "1.0.4",
    "react-native-image-crop-picker": "^0.25.2",
    "react-native-image-header-scroll-view": "^0.10.1",
    "react-native-image-progress": "^1.1.1",
    "react-native-iphone-x-helper": "^1.2.1",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-masked-text": "^1.9.2",
    "react-native-modal-dropdown": "0.6.2",
    "react-native-navigation": "3.2.0-snapshot.524",
    "react-native-onesignal": "3.4.1",
    "react-native-scrollable-tab-view": "https://github.com/jayshooo/react-native-scrollable-tab-view.git#6ac253a078c71b0cf143f3f8bd75aee7b4ddde58",
    "react-native-status-bar-height": "^2.3.1",
    "react-native-svg": "^8.0.8",
    "react-native-video": "5.0.2",
    "react-native-webview": "^7.2.5",
    "react-redux": "^5.1.1",
    "redux": "4.0.1",
    "redux-axios-middleware": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "reduxsauce": "^1.1.0",
    "slugify": "^1.3.4",
    "typesafe-actions": "^4.4.2",
    "yup": "^0.26.6"
  }
}
const bottomTabs =  {
  bottomTabs: {
    children: [
      {
        stack: {
          children: [
            {
              component: { name: 'HOME_HOME', id: "HOME_HOME_ID", passProps: { navType: "ROOT", tabIndex: 0 } },
            },
            {
              component: { name: "NEWS_NEWS_LIST", id: "NEWS_LIST_COMPONENT_ID", passProps: { navType: "SUB_PAGE", tabIndex: 0 } },
            },
            {
              component: { id: "ID_OTHER", name: "USER_PROFILE_UPDATE" },
            },
          ],
          options: {
            bottomTab: { icon: 8, iconColor: "#B3B3B3", selectedIconColor: "#1A783D", selectedTextColor: "#1A783D", tabIcon: HomeIconTab },
          },
        },
      },
    ],
    id: 'BOTTOM_TAB',
    options: {
      bottomTabs: {
        animate: false,
        currentTabIndex: 0,
        drawBehind: true,
        visible: false,
      },
    },
  },
}

Navigation.setRoot({ root: { bottomTabs } })

Environment

Quadriphobs1 commented 4 years ago

Same here on android, works fine on ios, it kept crashing whenever the botomTab screen

alradadi commented 4 years ago

Android has to have an icon option or it will break.

  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Example',
                  },
                },
              ],
              options: {
                bottomTab: {
                  icon: require('./img.png'),  <----- fix
                },
              },
            },
          },
        ],
      },
    },
  });
ivanguimam commented 4 years ago

@abdullah-sr I set up the icon.

children: [
            {
              component: { name: 'HOME_HOME', id: "HOME_HOME_ID", passProps: { navType: "ROOT", tabIndex: 0 } },
            },
            {
              component: { name: "NEWS_NEWS_LIST", id: "NEWS_LIST_COMPONENT_ID", passProps: { navType: "SUB_PAGE", tabIndex: 0 } },
            },
            {
              component: { id: "ID_OTHER", name: "USER_PROFILE_UPDATE" },
            },
          ],
          options: {
            bottomTab: { HERE -----> icon: 8, iconColor: "#B3B3B3", selectedIconColor: "#1A783D", selectedTextColor: "#1A783D", tabIcon: HomeIconTab },
          },

If I set up the stack with 2 screens works correctly, now if set up with 3 screens or more, does not work.

edferreira commented 4 years ago

I believe icon must be and image, as show by it's type here

export interface OptionsBottomTab {
    icon?: ImageRequireSource;
}
davidmarinangeli commented 4 years ago

I have the icon item but it does not work

edferreira commented 4 years ago

https://wix.github.io/react-native-navigation/#/docs/third-party?id=react-native-vector-icons

here they add some explanation on how to use both libraries. hope it's helpful

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

stale[bot] commented 4 years ago

The issue has been closed for inactivity.