React-native-navigation: [v2] Navigation.push Possible unhandled promise rejection: Error : Failed to execute stack command

[djnsu]

Issue Description

I have upgraded from v1 to v2(in v1 it works great). I have exact the same issue which described in the stackoverflow question, but I haven't found an answer yet. I really have no idea.

Push and showModal work as expected without FlatList, but when i try to push screen via FlatList + buttons in renderItem, I can not do it.

Stack is declared in the main component as it should. I do not understand why i got "Stack null not found". Maybe FlatList is the reason of this behavior, because all other components work perfect, idk.

https://stackoverflow.com/questions/53758151/react-native-wix-navigation-push-possible-unhandled-promise-rejection-error-f

Steps to Reproduce / Code Snippets / Screenshots

screens.js

//...
Navigation.registerComponentWithRedux( 'catalog',   () => catalog,  Provider, store);
Navigation.registerComponentWithRedux( 'item',      () => item,     Provider, store);

item.js

//It is just a button for renderItem FlatList
<TouchableNativeFeedback
  onPress={ () => {
    Navigation.push(this.props.componentId, {
      component: {
        id: memberId,
        name: 'item',
        passProps: {
          memberId: memberId,
        },
      },
    });
  }}
>
    <View>
        <Text> It is just a button for FlatList</Text
    </View>
</TouchableNativeFeedback>

export default connect( mapStateToProps, mapDispatchToProps )(Item);

catalog.js

import Item from './item'

_renderItem( data ) {
  let item = data.item;
  return(
    <Item
      item={ item }
      getItem={ this.props.getItem }
    />
  );
}

<FlatList
  data={ items }
  renderItem={ data => this._renderItem( data )}

  keyExtractor={ this._keyExtractor }
  ListHeaderComponent={ () => this._renderHeader() }
  ListFooterComponent={ () => this._renderFooter() }
  ListEmptyComponent={ () => this._renderEmpty() }
  numColumns={ 2 }
  onEndReached={ () => this.loadNextPage() }
  showsHorizontalScrollIndicator={ false }
  style={ globalStyles.flex }
  onEndReachedThreshold={ 3 }
/>

export default connect( mapStateToProps, mapDispatchToProps )(Catalog);

---

Environment

• React Native Navigation version: 2.12.0
• React Native version: 0.58.4
• Platform(s) (iOS, Android, or both?): Android, idk about iOS
• Device info (Simulator/Device? OS version? Debug/Release?): any Android device

[rawrmaan]

I've just been awaiting all my pushes and wrapping them in a try/catch to solve this issue (actually, I have a special proxy function that I call for all my pushes, modals, etc.). See below. Note that if you're using normal JS and not TS, you may have to write catch (e) {}.

try {
  await Navigation.push(this.props.componentId, {
    component: {
      id: memberId,
      name: 'item',
      passProps: {
        memberId: memberId,
      }
    }
  })
} catch {}

[djnsu]

@rawrmaan Thank you for replying. I have tried to use your code suggestion but I've still got exactly the same error. :(

When I try to output the error, I get this.

[djnsu]

Finally, I’ve moved/hardcoded item.js source code directly into catalog.js and all works fine. There’s definitely some kind of bug with importing component for FlatList’s renderItem function and it should be fixed. In v1 if I pass navigator via props Catalog.js was fully aware about current stack condition. Item.js is used in different places in the application(3 custom FlatList) and it brakes core React principle of component reusability if I will just copy paste item.js everywhere in my app. I hope that it will be fixed and I'll finish migration toward v2 as soon as possible . Thanks in advance.

[ItsNoHax]

I'm pretty sure your mistake is to do with your functions not being binded correctly.

Try the following:

  renderItem = ({ item }) => (
    // do your push here
  );

<FlatList
//your other props
renderItem={this.renderItem}
>

[support[bot]]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.

[djnsu]

How can it binded incorrectly? It works great in v1 as I said and stops working after update. It is definitely a bug. I've bypassed it by wrapping push function + componentId and then pass this stuff to Item.js via props. Thanks for help...

[InuriIlangakoon]

is there a solution for this?

[JimTeva]

@djnsu I am not sure but I think you should not use this.props.componentId in item.js, you should use the parent componentId (catalog.js's this.props.componentId).

catalog.js

_renderItem( data ) {
  let item = data.item;
  return(
    <Item
      item={ item }
      getItem={ this.props.getItem }
      parentComponentId={this.props.componentId}  // <--- HERE
    />
  );
}
````

item.js
```js
<TouchableNativeFeedback
  onPress={ () => {
    Navigation.push(this.props.parentComponentId, {   // <--- HERE
      component: {
        id: memberId,
        name: 'item',
        passProps: {
          memberId: memberId,
        },
      },
    });
  }}
>

[markmoomoo]

that props.compnentId screen should be registered, probably, you had called Navigation.push not in parentScreen with props.componentId, pass it to the subComponent where you make the Navigation.push call