Search code examples
iosreact-nativepubnub

Pubnub history callback not reached in react native app


I'm using Pubnub to push and pull data into a React Native app where I'm displaying it in a list. For some reason the history callback is never reached, though I am getting messages through the channel I'm subscribed to. Storage & playback is enabled. Any idea what's going on here?

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  ListView,
} from 'react-native'

import PubNub from 'pubnub';

var username = 'Jenny';
const channel = 'list';

const publish_key = 'XXXXXXXXXXXXXXXXXXXXXXXXX';
const subscribe_key = 'XXXXXXXXXXXXXXXXXXXXXXXXX';

const listSections = ['NOW', 'LATER', 'PROJECTS'];

const pubnub = new PubNub({                         
  publishKey   : publish_key,
  subscribeKey : subscribe_key,
  ssl: true,
  uuid: username
});

export default class MyList extends React.Component{

    constructor(){
        super();
        var ds = new ListView.DataSource({
            getSectionHeaderData: (dataBlob, sectionID) => dataBlob[sectionID],
            getRowData: (dataBlob, sectionID, rowID) => dataBlob[sectionID + ':row' + rowID],
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
          });
      }
    }


    componentWillMount() {

        this.connect();

        pubnub.addListener({
          message: (m) => this.success([m.message])
        });

        pubnub.subscribe({
          channels: [channel],
        });

    }

    connect() { 
        console.log("connect");

        pubnub.history(
            {
            channel: channel,
            count: 50,
            callback: (response) => {
                console.log(response); 
            }
        );
    }

    success(m){     
      /*Do some data manipulation for the list here */

    }

    render(){

        return(
            <View style={styles.container}>
                <ListView
                    dataSource = {this.state.dataSource}
                    renderRow = {(rowData) => 
                    <View style={styles.rowContainer}>
                        <Text style={styles.rowText}>{rowData}</Text>
                    </View>}
                    renderSectionHeader = {(headerData) => 
                         <Text style={styles.header}>{headerData}</Text>}
                    enableEmptySections = {true}
                />
            </View>
            )
    }
}

Solution

  • You are using our v4 JavaScript SDK. Your callback needs to be a separate parameter:

    pubnub.history(
        {
            channel: channel,
            count: 50
        },
        function (status, response) {
            console.log(status, response);
        }
    );
    

    This is subtle change in v4 and you can review the v3 to v4 migration guide for other minor changes.