Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Guide: update react native page #13004

Open
wants to merge 1 commit into
base: devel
Choose a base branch
from
Open

Guide: update react native page #13004

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 22 additions & 11 deletions guide/source/react-native.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,33 @@ For most projects, since your native app will display the same data and call the

The only time you will need to make changes to your Meteor codebase is to enable certain features that are unique to your native app. For example, if you want to add push notifications to your native app, you will need to create a method on your Meteor app to store the native push tokens for a user.

There are two routes for getting started with React Native. You can use "Vanilla" React Native, or you can use [Expo](https://expo.io/). Expo is a set of tools built around React Native. You can even try out React Native from your web browser using [Expo Snack](https://snack.expo.io/). You don't even need to install XCode or Android Studio to start using Expo.
There are two ways to get started with React Native: using React Native CLI and Expo.

Here are the downsides to using Expo:
- You cannot add Native Modules that use Native Code (Java, Swift, etc)
- You cannot use packages that require linking (these are npm modules that include native code, and allow you to acess native features like the camera, push notifications, fingerprint authentication, etc). \
- Apps that use Expo are much larger then pure React Native apps
<h3 id="workflow-native">Use React Native CLI</h3>

Expo does provide some native features ([click here for the full list](https://docs.expo.io/versions/latest/)), but if there is a feature missing that you need, you'll likely need to use an npm package or your own custom native code.
The React Native guide to get started describes this workflow as following:

You can "eject" your app from Expo to take advantage of Vanilla React Native features, but ejection cannot be undone easily.
> If you are already familiar with mobile development, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personal opinion here: the distinction in the RN guide is broad and lacks true direction. It isn't about whether someone has previously done "native development" or not. It is about the requirements of the app they are going to build. If they likely will require some type of changes at the "native level", then consider invoking XCode and Android Studio. But even that can be done both with RN CLI and Expo CLI, and it can be done when needed, not at the start of a project.

My main concern with most things that discuss RN is that they way too quickly get into this differentiation (what has historically been called "ejecting") without clearly describing whether this is needed or not.

Though I don't have experience with Meteor, I suspect there is nothing in use of Meteor that requires use of XCode and Android Studio, especially if one is to be using Expo.

I guess my real question for this document is: what is the goal here? To tell people everything there is to know about RN and Expo, or is it to help them get started building an RN/Expo project for using Meteor?

If it is the latter, I would recommend simply mentioning that there are 2 ways to go, but that this document will focus on one (I prefer Expo). People who have experience with native development will have no problems going from an Expo project to an RN or even "native" project. But people who are new both both Meteor and Expo/RN would be wisest to start with Expo.

In my mind, the goal here is to "get people started with Meteor on mobile devices". I would from that go with "less is more" -- that is, don't try to cover every angle in the Meteor docs. Cover one "happy path" and let more experienced developers deal with whatever paths they follow away from that happy path.


The React Native documentation lets you choose between the Expo ("Expo CLI") and Vanilla React Native ("React Native CLI") setup instructions. You can read through the installation instructions and decide which option makes more sense for you.
Here is the link to the React Native getting started documentation: https://reactnative.dev/docs/environment-setup?guide=native

Here is the link to the React Native getting started documentation: https://reactnative.dev/docs/environment-setup
<h3 id="workflow-expo">Use Expo</h3>

Once you have your environment setup and have your app running on your device or in the emulator, you can proceed to the next step of the guide: "Meteor React Native Installation"
The React Native guide to get started describes this workflow as following:

> If you are new to mobile development, the easiest way to get started is with Expo Go.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is what the RN guide recommends, I would suggest putting this towards the very start of this document. New developers typically start with the first thing that seems like "instructions" in a document. If the first instruction says "use RN CLI", that's where they start, regardless of the other words that go around it 😄


Expo is an [open-source framework](https://github.com/expo/expo) for apps that run natively on Android, iOS, and the web. The `expo` npm package enables a suite of incredible features for React Native apps. The `expo` package can be installed in nearly any React Native project. See [what Expo offers](https://docs.expo.dev/core-concepts/) for more information or see [why does Expo have its own SDK](https://docs.expo.dev/faq/#why-does-expo-have-its-own-sdk).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I'd remove the world "incredible" from the second sentence. Maybe "productive" or "useful" or possibly "powerful"....but "incredible" is not informative and risks showing bias.


If you intend to create a new project using Expo, we suggest to read the [Expo getting started guide](https://docs.expo.dev/get-started/create-a-project/). Beyond that, there are some good resources to get started with Expo:

- [Development builds](https://docs.expo.dev/workflow/overview/)
- [Continuous Native Generation](https://docs.expo.dev/workflow/overview/#continuous-native-generation-cng)
- Native modules that use Native Code (either in form of third party libraries from React Native ecosystem or using Kotlin and Swift) is now possible to add. One can simply install most libraries `npm i ...` or if they want to create a native module, they can use [Expo Modules API](https://docs.expo.dev/workflow/customizing/#create-reusable-native-modules).
- [Making manual changes is also possible using Prebuild](https://docs.expo.dev/workflow/customizing/#manual-changes-to-the-native-project-files)
- [Core development loop](https://docs.expo.dev/workflow/overview/#the-core-development-loop).

Once you have your environment setup and have your app running on your device or in the emulator (Android) or simulator (iOS/MacOS), you can proceed to the next step of the guide: "Meteor React Native Installation"

<h2 id="installation">Meteor React Native Installation</h2>

Expand All @@ -43,7 +54,7 @@ npm install --save @meteorrn/core
````

You also need to confirm you have the package's peer dependencies installed:
- Confirm you have `@react-native-community/netinfo` installed
- Confirm you have `@react-native-community/netinfo` installed (optional, beginning with `@meteorrn/[email protected])
- Confirm you have `@react-native-async-storage/async-storage@>=1.8.1` installed. If you are using Expo, or otherwise cannot use `@react-native-async-storage/async-storage`, please see [these instructions](https://github.com/TheRealNate/meteor-react-native#custom-storage-adapter).

The `@meteorrn/core` package enables your React Native app to establish a DDP connection with your Meteor server so it can receive data from publications and call server methods. It also provides access to core Meteor client methods like `Accounts.createUser` and `Meteor.loginWithPasword`, and allows you to display data in your app with the `withTracker` method.
Expand Down