Easiest way to connect with React Native

help
1

I recently came across this article https://medium.com/the-guild/connecting-react-native-and-meteor-w-o-any-3rd-party-library-in-2018-3e784d33acb0

And was hoping I found a fast way I could use meteor and react native together, I followed the steps but when it came to the step of importing:

import ‘meteor-client’;
import ‘react-native-meteor-polyfills’;

It would just not work on android, Im not sure if theres a special way I need to set up the meteor project that isn’t included in the instructions but it was very frustrating and time wasting

Just wondering if there are any up to date resources on the best way to connect react native to meteor, would be very much appreciated :slight_smile:

1 Like
2

Have you tried this: https://www.npmjs.com/package/react-native-meteor

3

What about the New js DDP client (SimpleDDP) by @gregivy

1 Like
4

I have not tried simpleDDP with ReactNative but there are should be no problem since simpleDDP is environment agnostic. So I can help you if you want, I was going to write a guide anyway and react native guide is on roadmap.

1 Like
5

A simpleDDP guide for React Native would be so amazing, the biggest problem I had with the solution I originally mentioned is connecting to a meteor server and seeing a simple real world example of sending data between React Native and the Server

6

I am working hard on version 1.2.0, it is almost done, but I have much to test anyway and I want to make a good guide.

This version will bring a lot of cool stuff especially for mobile app development. However you can try with current version 1.1.10 just for testing.

First of all you should decide where and how you want to use communication with server.

Here is an example of a component:

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

import simpleDDP from 'simpleddp';

export default class FlatListBasicsWithDDP extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialReady: false,
      mySubData: null
    };
    
    // init
    this.server = new simpleDDP({
      endpoint: "ws://somemeteorserver.com/websocket", // or wss:// if you have https
      SocketConstructor: WebSocket, // ReactNative supports it, 
               //see https://facebook.github.io/react-native/docs/network
      reconnectInterval: 5000
    });

    // subscribing
    this.sub = this.server.sub('mySubName',[parameters]);
    this.sub.ready().then(()=>{
      // from here you can be sure that you have some data
      this.setState({initialReady:true});
    });

    // listen for changes
    this.server.collection('mycollection').onChange(({added,removed,changed}) => {
      if (added) {
         // something was added
         const mySubData = this.state.mySubData;
         this.setState({
            mySubData: mySubData.concat([added])
         });
      } else if (removed) {
         // something was removed
         const mySubData = [...this.state.mySubData]; // make a separate copy of the array
         const index = mySubData.find(doc=>doc.id==removed.id);
         if (index !== -1) {
           mySubData.splice(index, 1);
           this.setState({mySubData: mySubData});
         }
      } else if (changed) {
         // something was changed
         const mySubData = [...this.state.mySubData]; // make a separate copy of the array
         const index = mySubData.find(doc=>doc.id==changed.id);
         if (index !== -1) {
           mySubData[index] = changed.next;
           this.setState({mySubData: mySubData});
         }
      }
    });
  }

  callSomeMethod() {
    const m = await this.server.call("myMethodName");
    console.log(m);
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.initialReady ? 
          <FlatList
             data={this.state.mySubData}
             renderItem={({item}) => <Text style={styles.item}>{item.someProperty}</Text>} /> 
          : 
         <Text style={styles.item}>Loading...</Text>
        }
      </View>
    );
  }

  componentWillUnmount() {
    this.server.disconnect();
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

With new simpleDDP 1.2.0 it will be much more easier!

If you have any questions I will gladly answer.

7

Might I suggest my fork of this package? https://www.npmjs.com/package/@socialize/react-native-meteor

Why?

  1. More Frequent Maintenance
  2. Better Docs
  3. Better Alignment with Meteor API
6 Likes
9

I took a look at this solution but it does not show the Meteor side of the connection, which was my original problem with the first post

10

Can you elaborate on what you mean by this?

11

In the readme seen here: https://www.npmjs.com/package/@socialize/react-native-meteor

It shows an ‘Example Usage’ you would use on react-native, but there isn’t an example of the meteor project where the the imformation is sent from

Seeing that would help me understand the connection, for example do I import anything special on the meteor project side for the react native side to work? Or do I just make a Meteor.publish for the todosReady: Meteor.subscribe(‘todos’).ready(), like normal

Can I use blaze (on the meteor project) or is it just a react project that would work

12

I’ve not used this library myself, but when I looked the readme, it’s clear to me that is using meteor collections, methods, and reactive variables. So I concluded, that there is nothing special on the server, you just connect to the client and make meteor methods calls, also I don’t think it has anything to do with what web client technology is being used since it’s communicating with the backend severs… others can verify my understanding.

2 Likes
13

You are correct @alawi, you dont need anything special on the meteor project. Just connect to the meteor server in react native and thats it.

3 Likes
14

Yes, as stated by @alawi and @pmogollon, you’ll write your Meteor app just like any other time. react-native-meteor recreates parts of the Meteor API and some core packages to allow you to interface with your app’s server and even share parts of you app’s API across both codebases.

Most of the packages under the @socialize scope on NPM share code with their Meteor package counterparts. Have a look at their repos if you wanna get an idea how it is accomplished, and if you have any questions don’t hesitate to contact me.

3 Likes