React-native-navigation: setStackRoot IOS Crash

Created on 30 May 2019 · 10Comments · Source: wix/react-native-navigation

setStackRoot Crashes in IOS

IOS Native crashes and Xcode shows Thread 1: EXC_BAD_ACCESS (code=1, address=0x10)

Steps to Reproduce / Code Snippets / Screenshots

I load the app with setRoot initially and after login/register call setStackRoot to switch to bottom tabs app but it crashes there itself

Initial app start

Navigation.setRoot({
          root: {
            stack: {
              children: [
                {
                  component: {
                    name: "LoginScreen",
                    id: "LoginScreen"
                  }
                }
              ]
            }
          }
        });

To switch to bottom tab app after successful login (As soon as this function calls, IOS crashes, screenshot attached)

try {
      Navigation.setStackRoot(this.props.componentId, {
        bottomTabs: {
          children: [
            {
              stack: {
                children: [
                  {
                    component: {
                      name: "FirstTabScreen",
                      id: "FirstTabScreen"
                    }
                  }
                ],
                options: {
                  bottomTab: {
                    text: "One",
                    textColor: Colors.tabIconLabelColor,
                    selectedTextColor: Colors.primary,
                    fontFamily: Fonts.fontFamilyEnNormal,
                    fontSize: Styles.tabBarLabelFontSize,
                    icon: Config.tab1Icon,
                    iconColor: Colors.tabIconLabelColor,
                    selectedIconColor: Colors.primary
                  }
                }
              }
            },
            {
              stack: {
                children: [
                  {
                    component: {
                      name: "SecondTabScreen",
                      id: "SecondTabScreen"
                    }
                  }
                ],
                options: {
                  bottomTab: {
                    text: "Two",
                    textColor: Colors.tabIconLabelColor,
                    selectedTextColor: Colors.primary,
                    fontFamily: Fonts.fontFamilyEnNormal,
                    fontSize: Styles.tabBarLabelFontSize,
                    icon: Config.tab2Icon,
                    iconColor: Colors.tabIconLabelColor,
                    selectedIconColor: Colors.primary
                  }
                }
              }
            },
            {
              stack: {
                children: [
                  {
                    component: {
                      name: "ThirdTabScreen",
                      id: "ThirdTabScreen"
                    }
                  }
                ],
                options: {
                  bottomTab: {
                    text: "Three",
                    textColor: Colors.tabIconLabelColor,
                    selectedTextColor: Colors.primary,
                    fontFamily:  Fonts.fontFamilyEnNormal,
                    fontSize: Styles.tabBarLabelFontSize,
                    icon: Config.tab3Icon,
                    iconColor: Colors.tabIconLabelColor,
                    selectedIconColor: Colors.primary
                  }
                }
              }
            },
            {
              stack: {
                children: [
                  {
                    component: {
                      name: "ForthTabScreen",
                      id: "ForthTabScreen"
                    }
                  }
                ],
                options: {
                  bottomTab: {
                    text: "Four",
                    textColor: Colors.tabIconLabelColor,
                    selectedTextColor: Colors.primary,
                    fontFamily: Fonts.fontFamilyEnNormal,
                    fontSize: Styles.tabBarLabelFontSize,
                    icon: Config.tab4Icon,
                    iconColor: Colors.tabIconLabelColor,
                    selectedIconColor: Colors.primary
                  }
                }
              }
            }
          ]
        }
      });
    } catch (error) {
      console.log(error);
    }

Screenshot 2019-05-30 at 11 51 57 AM

Environment

React Native Navigation version: 2.20.2
React Native version: 0.59.8
Platform(s) (iOS, Android, or both?): IOS
Device info (Simulator/Device? OS version? Debug/Release?): iPhone X Simulator Debug

🏚 stale

Source

rf1804

👍3

Most helpful comment

It's not stale @guyca

rf1804 on 30 Aug 2019

👍2

All 10 comments

Hi @guyca can you please check this?

rf1804 on 12 Jun 2019

Hi any update on this issue

aniljos on 9 Jul 2019

👍1

@rf1804 Did you solve that? I'm having the same error... @guyca any update?

lucasfalcaoo on 22 Jul 2019

@lucasfalcaojump no, for the meantime i'm reloading the app, hoping to get it resolved this soon @guyca

rf1804 on 24 Jul 2019

@rf1804 I did a workaround that is working, but it's not the ideal! Since the device is iOS and doesn't have the back button hardware I did a simple if else with the Platform.OS from react native. The code is something like this:

if(Platform.OS === 'ios') { Navigation.push(this.props.componentId, { ...component }) } else { Navigation.setStackRoot(this.props.componentId, [{ ...component }]) }

lucasfalcaoo on 24 Jul 2019

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.