Search code examples
javascriptmeteorreact-nativeddp

React-native-meteor package subscription handle not ready


I'm trying to combine react-native and meteor using the react-native-meteor package. Meteor successfully publishes a 'dos' collection, which I have been able to subscribe to on the web client. However, after following the documentation of the react-native-meteor package (using createContainer) I am unable to subscribe; the handle is 'never ready'. When using the autopublish package from Meteor the data does load.

Versions

Meteor 1.3.4.1

react-native: 0.28.0

react-native-meteor: 1.0.0-rc14

index.ios.js

// @flow
'use strict'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  View,
  NavigatorIOS,
  StatusBar,
  Text,
} from 'react-native'
import Meteor, {
  createContainer,
  MeteorListView,
 } from 'react-native-meteor'

Meteor.connect('ws://localhost:3000/websocket')

import GeoLocation from './app/GeoLocation'
import ConnectionInfoSubscription from './app/NetInfo'
import GridLayout from './app/GridLayout'

class DoCHANGE_0 extends Component {

  renderRow(Do){
    return(
      <Text>{Do.joke}</Text>
    )
  }

  render() {

    const { doList, } = this.props

    return (
      <View style={styles.container}>
      <StatusBar
        barStyle="light-content"
        />
      <NavigatorIOS
        style = {styles.container}
        barTintColor='#556270'
        titleTextColor='#fff'
        tintColor='#fff'
        initialRoute={{
          title: 'DoCHANGE',
          component: GridLayout
        }}/>

        {!doList && <Text>Not ready with subscription</Text>}
        <MeteorListView
        collection="dos"
        renderRow={this.renderRow}
        enableEmptySections={true}
        />

      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex:1,
  }
});

export default createContainer(params=>{
  const handle = Meteor.subscribe('dos')
  return {
    doList: handle.ready(),
  };
}, DoCHANGE_0)

AppRegistry.registerComponent('DoCHANGE_0', () => DoCHANGE_0);

I have found similar examples but they often don't utilise the react-native-meteor package but use the ddpclient package instead. Am I missing something obvious here? Any insights is much appreciated!

Edit:

(Meteor) /server/publish.js

 Meteor.publish("dos", function() {
   //console.log(Dos.find().fetch())
   return Dos.find();
 })

(Meteor) /both/collections.js

Dos = new Mongo.Collection('dos');

Screenshot when using autopublish from Meteor. doList handle is still not ready. But the MeteorList gets populated correctly.

Screenshot iOS autopublish on


Solution

  • I upgraded to newer versions of react-native, meteor, and react-native-meteor but that didn't solve the issue. However, when renaming the renderRow function to renderItem it started working.

    renderRow={this.renderRow}
    
    renderRow={this.renderItem}