How to use meteor and react native in 2019

mobile
1

I am building an app targeted at both mobile and desktop. I want to use react-native for the mobile app. I have read a lot of posts about react-native-meteor but most of them are from 2016.

I want to get a general overview of current ways of integrating meteor and react-native and how the setup looks like. Maybe a more recent post or bullet point summary will do. Any advice about whether practices in 2016/17 are still relevant today is highly appreciated.

I’d appreciate if any link to an app that uses a combination of both that is currently listed in the google play store.

1 Like
2

You should check out the courses from Spencer Carli, which are still relevant. My current app (simplyfield.co) with this setup is in production for almost 2 years now and everything is working fine. The only problem is that I still didn’t find a good solution to handle offline use of the app.

3

Wow!!! Thanks for this.

Could you please give a little pointer on how to setup for both desktop and mobile.

I want both to have different styling and I don’t know if I have to build two separate frontends. I’m using react and onsen UI for my current project.

4

@spencercarli, I checked out your course and the content looks promising. I’d love to enroll but the price is on the high side for me currently.

Honestly, I can only afford $5 at the moment. Any help would be appreciated.

Or perhaps you could give me a breakdown on how to connect the meteor and react-native sides, keeping in mind that I will have a desktop version too. I pretty much have all the backend logic as of right now. I have redux for my state manager.

5
1 Like
6

Unfortunately it is doesn’t work with latest Meteor release. I have tried it.
Info in:

I have two apps in the Google Play Store and in the AppStore built with ‘react-native-meteor’. Everything works but I consider to change to simpleddp.

The main reason is it uses promises everywhere.

1 Like
7

Thanks.

Could you help me with a little source code on how to connect meteor and react-native.

Just an overview.

I see the example on the npm page https://www.npmjs.com/package/react-native-meteor, but I don’t know how to configure this line Meteor.connect('ws://192.168.X.X:3000/websocket'); //do this only once for development and production.

8

It is a very simple app concept. Usually I use redux not a reactive dictionary to handle dynamic parameters. The other reason is using redux to store all data for offline using with redux-persist.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Meteor, {
  withTracker,
  ReactiveDict,
  Accounts,
} from "react-native-meteor";

/** Connect to server.*/
Meteor.connect("ws://app.sample.com/websocket");

class App extends React.Component {
  render() {
    let {
      connected,
      user,
      isListLoading,
      isListExists,
      list,
      handleSubsParam,
    } = this.props;
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

/** Reactive variable/dictionary to store dynamic subscription parameters */
const reactiveDictionary = new ReactiveDict();
reactiveDictionary.set("subsParam", 20);

/** Meteor HOC container component */
const AppContainer = withTracker(props => {
  let user = Meteor.user();
  let connected = Meteor.status().connected;

  let subsParam = reactiveDictionary.get("subsParam");
  let meteorSubscription = Meteor.subscribe("SamplePublication", subsParam);
  let isListLoading = !meteorSubscription.ready();
  let list = Meteor.collection("sample.collection").find({});
  let isListExists = !isListLoading && list.length > 0;

  const handleSubsParam = param => {
    reactiveDictionary.set("subsParam", param);
  };

  return {
    connected,
    user,
    isListLoading,
    isListExists,
    list,
    handleSubsParam,
  };
})(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default AppContainer;
9

Thanks for this. I’m coming along with my app already.

So how do I connect my local development server db to the react-native app. I mean for this line Meteor.connect("ws://app.sample.com/websocket");, how do I connect my local dev server.

I’ll keep you posted of my progress.

If you do transition to simpleddp kindly share your experience here.

Thanks

11

My problem is that Meteor.loginWithPassword() seems not to be working. I think this is the case because Meteor.user() returns null.

I use redux for state management as I have in the react app.

I update the currently logged in user with the code below

This code updates the logged in user inside componentDidMount() insideApp.js`

shared-action.js

import Meteor, { Tracker } from 'react-native-meteor';

Tracker.autorun( () => {
    let username = Meteor.user() ? Meteor.user().username : ''
    dispatch(set_current_user(username))
})

login-action.js

export const login = (username) => {
    return {
        type: LOGIN,
        username
    }
}

But it seems Meteor.user() is not reactive inside the packaged Tracker

SignIn.js

import Meteor from 'react-native-meteor'
import { login } from '../actions/current_user';

Meteor.loginWithPassword(email, password, (err) => {

    if (err) {
        this.setState(() => ({error: err.reason}))
        console.warn('Error logging in', err)
    }
    else {
        console.log('logged in user: ', Meteor.user())
        this.setState(() => ({error: false}))
        dispatch(login(Meteor.user().username))
    }
})