martwetzels martwetzels - 4 months ago 88
Javascript Question

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

Answer

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}
Comments