React-native-navigation: [V3] setRoot with bottom tabs crash

Created on 2 Oct 2019  路  8Comments  路  Source: wix/react-native-navigation

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

  • React Native Navigation version: 3.2.0
  • React Native version: 0.61.1
  • Platform(s) (iOS, Android, or both?): Android
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator/Device, Android 6.0, Debug/Release
馃彋 stale
Source
picture ivanguimam

Most helpful comment

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
                },
              },
            },
          },
        ],
      },
    },
  });
picture alradadi on 9 Oct 2019
🚀1 👍1

All 8 comments

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

Quadriphobs1 picture Quadriphobs1 on 6 Oct 2019

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
                },
              },
            },
          },
        ],
      },
    },
  });
alradadi picture alradadi on 9 Oct 2019
🚀1 👍1

@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.

ivanguimam picture ivanguimam on 9 Oct 2019

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

export interface OptionsBottomTab {
    icon?: ImageRequireSource;
}
edferreira picture edferreira on 22 Oct 2019

I have the icon item but it does not work

davidmarinangeli picture davidmarinangeli on 29 Oct 2019

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

edferreira picture edferreira on 30 Oct 2019
👍1

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] picture stale[bot] on 29 Nov 2019

The issue has been closed for inactivity.

stale[bot] picture stale[bot] on 6 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

yedidyak picture yedidyak  路  3Comments
nbolender picture nbolender  路  3Comments
ghost picture ghost  路  3Comments
birkir picture birkir  路  3Comments
swingywc picture swingywc  路  3Comments