Is it possible to use this boilerplate to integrate RN to an existing Meteor App?

[remingtonchan]

Hi,

I've been contemplating on (re)creating the mobile app I have using Meteor-React that was done using Meteor's built-in system (Cordova) in React Native.

There doesn't seem to be a resource on how to go about transitioning (or hopefully reusing) code into RN from Meteor React. I was wondering if there's an easy way to go about this and through this boilerplate as well.

[spencercarli]

What are you looking to reuse? You could access any of your existing meteor methods or publications.

[remingtonchan]

Definitely all the server side methods and publications, but also the front end stuff. I did try to "port" some of my front end in a react-native init'd project, but that didn't turn out so well. I also figured out (late) that the UI library I've been using (Material-UI) is web only 😰.

Can you advise on what's the best path to take when trying to do something like this?

[spencercarli]

React Native isn't really meant for that. You're targeting pretty different platforms with web vs. native.

You could look at React Native Web if needed. But I would suggest you only use that for small, simple components.

[copleykj]

@remingtonchan Sharing UI (React) code between your web app and RN app is probably going to be rough. I'm sure it there is a slight possibility it might work with React Native Web like @spencercarli mentioned, but you'd be left possibly trying to find a RN UI library that fully supports RNW and then trying to fit that UI onto a web layout. I can't imagine any scenario where this works out perfectly.

That being said, you can very much share the API for your apps by wrapping the different parts of your API that require access to the Meteor API, in functions that take these dependencies as params and return the collections/models. Then you can import the proper deps and these functions on each platform and call the functions with the proper deps getting back the parts of the API constructed with right dependencies for the platform.

For example...

// example-api.js
export default ({ Mongo }) => {
    const ExamplesCollection = Mongo.Collection('examples');

    return { ExamplesCollection };
};

// meteor-api.js
import { Mongo } from 'meteor/mongo';
import ApiConstruct from './api/example-api.js';

const { ExamplesCollection } = ApiConstruct({Mongo});

export { ExamplesCollection };

// react-native-api.js
import { Mongo } from '@socialize/react-native-meteor';
import ApiConstruct from './api/example-api.js';

const { ExamplesCollection } = ApiConstruct({Mongo});

export { ExamplesCollection };

For this approach, you probably need to place the API code within the RN project directory and then symlink it into the Meteor app since RN's bundler doesn't follow symlinks properly.

I've used this technique to create companion NPM packages that expose the client side parts of most of my socialize packages for use with RN. If you want better example code you can check out their code.

Hope this is somewhat helpful.

[om-mahato]

Hi do checkout this repo if interested https://github.com/om-mahato/Login-Signup-React-Native-Template.git