java.lang.IllegalArgumentException No view found for id 0x2e7 (unknown) for fragment ScreenFragment{aba6d90 (389db4fd-87b3-4a02-8a21-096e57a6981d) id=0x2e7}

[gabrielbull]

I'm moving this issue out of Several android crashes #348 so we can focus on it.

Basically, I am unable to reproduce this one on the simulator but it does happen quite often on release build on the device.

java.lang.IllegalArgumentException No view found for id 0x2e7 (unknown) for fragment ScreenFragment{aba6d90 (389db4fd-87b3-4a02-8a21-096e57a6981d) id=0x2e7} 
    FragmentManagerImpl.java:875 androidx.fragment.app.FragmentManagerImpl.moveToState
    FragmentManagerImpl.java:2100 androidx.fragment.app.FragmentManagerImpl.addAddedFragments
    FragmentManagerImpl.java:1874 androidx.fragment.app.FragmentManagerImpl.executeOpsTogether
    FragmentManagerImpl.java:1830 androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute
    FragmentManagerImpl.java:1727 androidx.fragment.app.FragmentManagerImpl.execPendingActions
    FragmentManagerImpl.java:150 androidx.fragment.app.FragmentManagerImpl$2.run
    Handler.java:883 android.os.Handler.handleCallback
    Handler.java:100 android.os.Handler.dispatchMessage
    Looper.java:214 android.os.Looper.loop
    ActivityThread.java:7356 android.app.ActivityThread.main
    Method.java:-2 java.lang.reflect.Method.invoke
    RuntimeInit.java:492 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run
    ZygoteInit.java:930 com.android.internal.os.ZygoteInit.main

[grahammendick]

@emerson233 got the same error. It turned out that they were creating a new StateNavigator inside the App component. This isn’t necessary because you reset the stack by setting trackCrumbTrail to false. Are you doing something similar?

[grahammendick]

I can't recreate this one. I need more information:

• How often does it happen?
• Is there any pattern to when it happens?
• Do you create your own Android Activity (in Java)?
• What 3rd party libraries are you using, e.g., react native splash screens?
• Do you create a StateNavigator inside a component (in JavaScript)?

[grahammendick]

@emerson233 Did this error go away when you used trackCrumbTrail to reset the stack?

[gabrielbull]

How often does it happen?

Not really often. I think I actually have it fixed now and I was resetting the stack the wrong way too.

[grahammendick]

Here are the different ways you can reset the stack. All these approaches work on both Android and iOS.

Change stack from A → B → C to A

You navigate back the length of the stack.

stateNavigation.navigateBack(2);

If you’re not sure how big the stack is then you can get the length form the crumbs array

const {crumbs} = stateNavigator.stateContext;
stateNavigation.navigateBack(crumbs.length);

Change stack from A → B → C to D

You turn off crumb trail tracking on state D

const stateNavigator = new StateNavigation([
  {key: 'A', trackCrumbTrail: false},
  {key: 'B',},
  {key: 'C',},
  {key: 'D', trackCrumbTrail: false},
});

Or, if you sometimes want D to keep the stack, then you can dynamically turn off the crumb trail when the previous state is C.

const {C, D} = stateNavigator.states;
D.trackCrumbTrail = (state, data, crumbs) => {
  var latestCrumb = crumbs[crumbs.length - 1];
  return latestCrumb.state === C ? [] : crumbs;
};

Change the stack from A → B → C to D → E

You can fluently navigate to D and then E so that both these navigations happen in one go. Scene D isn't rendered until it's visible.

const url = stateNavigator.fluent()
  .navigate('D')
  .navigate('E').url;
stateNavigator.navigateLink(url);

[emerson233]

@emerson233 Did this error go away when you used trackCrumbTrail to reset the stack?

Sorry, but we are still getting this crash even after using trackCrumbTrail.
I am wondering if this issue is similar to this one?

[grahammendick]

Checking react-native-screens for clues is a good idea but doesn't always get results because their fragment implementation is more complex than mine.

Are you still changing the StateNavigator in App.js? Could you show me what your App component looks like now?

[gabrielbull]

Same for me, it's the only error that persist after we fixed all the other ones. Maybe we should re-open this issue?

[grahammendick]

Thanks for the update both of you. I'l re-open it if you provide me with some more details.

Could you show me the code in your App component?
Could. you show me the code from all your components that render a NavigationStack component?

[emerson233]

// App.tsx
const stateNavigator = new StateNavigator()
stateNavigator.configure([
  {key: "Page1", trackCrumbTrail: false},
  {key: "Page2", trackCrumbTrail: true},
  {key: "Tabs", trackCrumbTrail: false},
  {key: "Settings", trackCrumbTrail: true}
])
stateNavigator.states["Page1"].renderScene = () => <Page1 />
stateNavigator.states["Page2"].renderScene = () => <Page2 />
stateNavigator.states["Tabs"].renderScene = () => <Tabs />
stateNavigator.states["Settings"].renderScene = () => <Settings />

class App extends React.Component<Props, State> {
  static getDerivedStateFromProps(props: Props, state: State): State {
    const navigator = state.navigator ?? new StateNavigator(stateNavigator)
    if (props.rootPage.name == "Page2") {
        // logout
        const url = navigator
        .fluent()
        .navigate("Page1")
        .navigateToKey("Page2")
        .url()
        navigator.navigate(url)
    } else {
        // go to "Tabs"
        navigator.navigate(props.rootPage.name)
    }

    return {
      navigator,
      previousPage: props.rootPage,
    }
  }

  constructor(props: any) {
    super(props)
    this.state = {}
  }

  render() {
    const name = this.props.rootPage.name
    if (name === "none" || this.state.navigator == undefined) {
      return null
    }
    return (
      <NavigationHandler key={name} stateNavigator={this.state.navigator}>
        <NavigationStack />
      </NavigationHandler>
    )
  }
}

// Tabs.tsx
class Tabs extends React.Component<Props> {
    private navigatorA = new StateNavigator(stateNavigator)
    private navigatorB = new StateNavigator(stateNavigator)
  
    constructor(props: Props) {
      super(props)
      this.navigatorA.navigate("TabA")
      this.navigatorB.navigate("TabB")
    }
    render() {
      return (
        <TabBar bottomTabs={true}>
          <TabBarItem>
            <TabA navigator={navigatorA} />
          </TabBarItem>
          <TabBarItem>
            <TabB navigator={navigatorB} />
          </TabBarItem>
        </TabBar>
      )
    }
  }
}

// Settings
class Settings extends React.Component<Props> {
    render() {
        return <LogoutButton />
    }
}

The crash happened when we click logout button in "Settings" page to go back to "Page2".

[grahammendick]

Thanks for the code @emerson233. You should remove the key prop from the NavigatonHandler component. This will cause the NavigationStack component to unmount each time you navigate and is the likely cause of the error.

Also, could you tell me how you're changing the rootPage prop of the App component, please?

[emerson233]

Also, could you tell me how you're changing the rootPage prop of the App component, please?

Using redux

function mapStateToProps(state: RootState): StateProps {
  return {
    rootPage: state.rootPage,
  }
}
const ConnectedApp = connect<StateProps, {}, {}, RootState>(mapStateToProps)(App)
export const ProvideApp = () => (
  <Provider store={store}>
    <ConnectedApp />
  </Provider>
)

We are sending events to redux to change root page when logout/login.

[grahammendick]

Just to be clear, removing your 'key' prop on the NavigationHandler component fixes this bug. But, I spotted something else in your code that is unrelated to this bug.

I recommend that you always navigate using the stateNavigator from the React Context instead of the one in your App component. They aren’t the same. When you use the one from the App component then you can get double tap bugs. For example, if you double tap the Settings button then it will push the Settings scene twice. You won’t get these kind of bugs if you use the stateNavigator from React Context.

[emerson233]

Thanks for you reply. I will remove key prop and see if everything goes well.