import React from 'react';
import { View, Text, FlatList } from 'react-native';
import Meteor, { withTracker } from '@ajaybhatia/react-native-meteor';

Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once

const App = ({ settings, todos, todosReady }) => {
  return (
    <View>
      <Text>{settings.title}</Text>
      {!todosReady && <Text>Not ready</Text>}

      <FlatList
        data={todos}
        keyExtractor={item => item._id}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    </View>
  );
};

export default withTracker(params => {
  const handle = Meteor.subscribe('todos');
  Meteor.subscribe('settings');

  return {
    todosReady: handle.ready(),
    todos: Meteor.collection('todos').find({}, { sort: { createdAt: -1 } }),
    settings: Meteor.collection('settings').findOne(),
  };
})(App);

import React from 'react';
import { View, Text, FlatList } from 'react-native';
import Meteor, { useTracker } from '@ajaybhatia/react-native-meteor';

Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once

export default App = () => {
  const loading = useTracker(() => {
    const handle = Meteor.subscribe('todos');
    Meteor.subscribe('settings');

    return !handle.ready();
  }, []);

  const todos = useTracker(
    () => Meteor.collection('todos').find({}, { sort: { createdAt: -1 } }),
    [loading]
  );
  const settings = useTracker(() => Meteor.collection('settings').findOne(), [
    loading,
  ]);

  if (loading) {
    return (
      <View>
        <Text>Not ready</Text>
      </View>
    );
  }

  return (
    <View>
      {loading && <Text>Not ready</Text>}

      <FlatList
        data={todos}
        keyExtractor={item => item._id}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    </View>
  );
};