CaptainN

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, Image } from 'react-native';
import { AsyncStorage } from 'react-native';

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

CaptainN

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, CheckBox } from 'react-native';

/**
 * A computer language has 3 main parts:
 * 1. Syntax
 * 2. A Static environment
 * 3. A Dynamic environment
 *
 * The syntax the format of the input. The struction of the

CaptainN

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, CheckBox } from 'react-native';

/**
 * A computer language has 3 main parts:
 * 1. Syntax
 * 2. A Static environment
 * 3. A Dynamic environment
 *
 * The syntax the format of the input. The struction of the

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// Create a reusable subscribe hook
const usePageSubscription = (pageId) => useTracker(() => {
  const subscription = Meteor.subscribe('page', pageId)
  return !subscription.ready()
}, [pageId])

// Separate page hook
const usePage = (pageId) => useTracker(() => {

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// We can easily make old style HOCs out of the hooks
const withUser = (Component) => (props) => {
  const accountProps = useAccount()
  return <Component {...props} {...accountProps} />
}
const withPage = (Component) => (props) => (
  const pageProps = usePage(props.pageId)
  return <Component {...props} {...pageProps} />

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// Create a reusable hook
const usePage = (pageId) => useTracker(() => {
  // The publication must also be secure
  const subscription = Meteor.subscribe('page', pageId)
  const page = Pages.findOne({ _id: pageId })
  return {
    page,
    isLoading: !subscription.ready()

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// Hook, basic use, everything in one component
const MyPage = (pageId) => {
  const { user, isLoggedIn, page } = useTracker(() => {
    // The publication must also be secure
    const subscription = Meteor.subscribe('page', pageId)
    const page = Pages.findOne({ _id: pageId })
    return {
      page,

CaptainN

import { withTracker } from 'meteor/react-meteor-data'

// Create a reusable hook
const withAccount = withTracker((props) => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// Create a reusable hook
const useAccount = () => useTracker(() => {
  const user = Meteor.user()
  const userId = Meteor.userId()
  return {
    user,
    userId,
    isLoggedIn: !!userId

CaptainN

import { useTracker } from 'meteor/react-meteor-data'

// Hook, basic use, everything in one component
const MyProtectedPage = (pageId) => {
  const { user, isLoggedIn, page } = useTracker(() => {
    // The publication must also be secure
    const subscription = Meteor.subscribe('page', pageId)
    const page = Pages.findOne({ _id: pageId })
    const user = Meteor.user()
    const userId = Meteor.userId()