Navigate to another screen from Flat list item getting pressed

Question

I've been using wix/react-native-navigation package to navigate between screens and handling the stack properly.

Moving across screens is pretty straightforward, firing those transitions when a button gets pressed. But the issue comes up when I have a FlatList and I want to push to a new screen when the user taps an item from the list, looks like the navigator props injected at the beginning is lost or in another context than the onPress callback event;

Here is the sample code

class AlertType extends React.PureComponent {
  _onPress = () => {
      this.props.onPressItem(this.props.itemId, this.props.itemName, this.props.itemImageUrl);
  };

  render() {
      return (
          <TouchableOpacity { ...this.props }
              onPress={ this._onPress }
              style={ itemStyle.cardContainer }>

              <View style={ itemStyle.mainContainer }>
                  <View style={{ width: 10 }}/>
                  <Image
                      source={{ uri: NET.HOST + this.props.itemImageUrl }}
                      style={{ width: 45, height: 45 }}
                  />
                  <View style={{ width: 10 }}/>
                  <Text style={ itemStyle.itemText }>{ this.props.itemName }</Text>
              </View>
          </TouchableOpacity>
      );
  }
}

class AlertsScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            alertTypes: null,
        }
    }

    _onAlertTypePressed(typeId: string, typeName: string, imageUrl: string){

        this.props.navigator.push({
            screen: 'prod.screens.AlertsCreator',
            title: 'Alert',
            passProps: {
                alertId: typeId,
                alertName: typeName,
                alertImage: imageUrl
            }
        });
    }

    _renderListItem = ({ item }) => (
        <AlertType
            itemName={ item.titulo }
            itemId={ item.key }
            itemImageUrl={ item.url }
            onPressItem={ this._onAlertTypePressed }
        />
    );

    render() {
        return (
            <View style={ styles.mainContainer }>
                <FlatList
                    data={ this.state.alertTypes }
                    ItemSeparatorComponent={ () => <View style={{ height: 5 }}/> }
                    renderItem={ this._renderListItem }
                />
            </View>
        );
    }

const mapSessionStateToProps = (state, ownProps) => {
    return {
        session: state.session
    };
}
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    };
}
export default connect(mapSessionStateToProps, mapDispatchToProps)(AlertsScreen)

This approach produces the next error

There have to be something I'm missing, I know this.props.navigator is not undefined, but inside on _onAlertTypePressed the navigator prop is undefined.

score 1 · Answer 1 · answered Mar 29 '18 at 14:50

1

The problem is that you pass function to component without binding it to the current context.

You should pass:

this._onAlertTypePressed.bind(this);

another approach is binding your functions in the constructor:

constructor(props) {
  this._onAlertTypePressed = this._onAlertTypePressed.bind(this);
}

answered Mar 29 '18 at 14:50

yogevbd

1,548
1
14
18

Hi @yogevbd [This one also help me to solve my issue](https://stackoverflow.com/a/47118395/1067450), in fact thats the answer to my issue. – AXSM Mar 29 '18 at 22:00

score 0 · Answer 2 · answered Mar 24 '18 at 00:33

0

I've had this happen before also.

I had to declare navigator between the render and return blocks

render() {

const navigator = this.props.navigator
return()}}

then pass navigator through when calling _onAlertTypePressed

() => _onAlertTypePressed(navigator)

then use navigator vs this.props.navigator inside _onAlertTypePressed

answered Mar 24 '18 at 00:33

Gavin Thomas

1,827
2
11
17

I tried what you suggest, but just undefined object is what I get. If I pass a navigator reference thru _onAlertTypePressed is fired like a user touch an item when is not doing so. – AXSM Mar 26 '18 at 22:16

Navigate to another screen from Flat list item getting pressed

2 Answers2