CODEWITHSUNDEEP
javascriptreactjsfunctionreact-native
Hugo
Hugo

Reputation: 2204

How to call a class inside an object that's inside the render function of a component in React Native?

I'm not sure how to describe what I'm trying to do with words so please take a look at the following code:

This is what causing me issues: this.fetchMessages()

import React, { Component } from 'react';
import { PushNotificationIOS, FlatList, TextInput, ActivityIndicator, ListView, Text, View, Image, TouchableWithoutFeedback, AsyncStorage } from 'react-native';
import { Actions } from 'react-native-router-flux';
import ConversationsItem from './ConversationsItem';
import { conversationFetch } from '../actions';
import { connect } from 'react-redux';
import { Divider } from 'react-native-elements'
import PushNotification from 'react-native-push-notification';

class Conversations extends Component {

  componentDidMount() {
    this.props.conversationFetch()
  }

  fetchMessages() {
    this.props.conversationFetch()
  }

  render() {

    PushNotification.configure({
      onNotification: function(notification) {
        PushNotification.getApplicationIconBadgeNumber((response) => {
            PushNotification.setApplicationIconBadgeNumber(response + 1)
        })

        console.log( 'NOTIFICATION:', notification )
        notification.finish(PushNotificationIOS.FetchResult.NoData);

        this.fetchMessages()

      }
    });

    if (!this.props.email) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    console.log(this.props.conversations)

    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        ...
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state)
  const { conversations } = state.conversation;
  const { email } = state.conversation;

  return { conversations, email };
};

export default connect(mapStateToProps, { conversationFetch })(Conversations);

When I call this.fetchMessages() inside PushNotification.configure({}), I get the following error message:

this.fetchMessages is not a function

I'm not sure if what I'm doing is possible but if so I'd really like to know how to make this work.

I tried adding .bind(this) and other ways around but got same error anyways.

Thanks for you help.

Upvotes: 0

Views: 610

Answers (2)

Prakash Sharma
Prakash Sharma

Reputation: 16472

Functions declared with function keyword has their own this, so this inside onNotification function does not refer to the class.

Therefore use arrow function syntax, which will lexically resolve this and value of this inside will refer to class itself. So convert 

onNotification: function(notification) {

to 

onNotification: (notification) => {

Upvotes: 1

john_mc
john_mc

Reputation: 1376

So you have in fact tried binding the fetchMessages function in the constructor? Like such:

constructor(props) {
 super(props)
 this.fetchMessages = this.fetchMessages.bind(this);
}

You can also use an arrow function to bind your method to the class without calling the constructor like such:

() => this.fetchMessages()

Upvotes: 1

Related Questions