React Native Integration
React Native has grown to be one of the most popular platforms for building native apps, being used by companies like Tesla, Instagram, and Facebook in production. React Native allows you to write apps in JavaScript that are rendered with native code. It has many of the features that you value when working with Meteor, like instant refresh on save.
After reading this guide, you'll know:
- How to set up a React Native project with Meteor
- How to connect React Native to your Meteor server
- How to use Meteor's data layer in React Native
- How to use Meteor Accounts in React Native
Overview
You can easily integrate your React Native app with Meteor, using the same methods you would on a Meteor + React Web app. The integration supports most Meteor features, including Methods, Pub/Sub, and Password Accounts, and has the same usage as react-meteor-data.
Getting started with React Native
React Native projects are coded using the same React principles, but have a completely separate codebase from your Meteor project.
A collection of npm packages are being developed to make it easy for you to integrate React Native with Meteor. In order to use React Native with Meteor, you create a React Native app and use the @meteorrn/core package to connect your app to your Meteor server.
For most projects, since your native app will display the same data and call the same methods as your Meteor web app, creating a React Native app that connects to your Meteor server does not require any changes to your Meteor codebase.
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.
Expo vs. Vanilla React Native
There are two routes for getting started with React Native. You can use "Vanilla" React Native, or you can use Expo. Expo is a set of tools built around React Native. You can even try out React Native from your web browser using Expo Snack.
Downsides to using Expo:
- You cannot add Native Modules that use Native Code (Java, Swift, etc)
- You cannot use packages that require linking (npm modules that include native code)
- Apps that use Expo are much larger than pure React Native apps
Expo does provide some native features (click here for the full list), 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.
You can "eject" your app from Expo to take advantage of Vanilla React Native features, but ejection cannot be undone easily.
Here is the link to the React Native getting started documentation: https://reactnative.dev/docs/environment-setup
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.
Installation
To install the @meteorrn/core package, run the following command in your React Native project:
npm install --save @meteorrn/coreYou also need to confirm you have the package's peer dependencies installed:
- Confirm you have
@react-native-community/netinfoinstalled - Confirm you have
@react-native-async-storage/async-storage@>=1.8.1installed
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.loginWithPassword, and allows you to display data in your app with the withTracker method or hooks.
Setup
First, import Meteor, withTracker, and Mongo:
import Meteor, { Mongo, withTracker } from '@meteorrn/core';Next, you need to connect to your Meteor server. This should typically be at the start of your App.jsx:
Meteor.connect('wss://myapp.meteor.com/websocket');For local development, you can connect to your local Meteor server:
// Use your computer's IP address (not localhost) for the mobile device to connect
Meteor.connect('ws://192.168.1.100:3000/websocket');Define your collections:
const Todos = new Mongo.Collection('todos');And now you're ready to start coding.
Coding with Meteor React Native
If you've used React before, coding with React Native is pretty straightforward. However, instead of components like div and span, we have View and Text. You can learn the fundamentals of React Native here.
Meteor React Native's usage is designed to be as close to meteor/react-meteor-data and the Meteor core as possible.
Using withTracker
import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import Meteor, { Mongo, withTracker } from '@meteorrn/core';
const Todos = new Mongo.Collection('todos');
function MyApp({ loading, myTodoTasks }) {
if (loading) {
return (
<View>
<Text>Loading your tasks...</Text>
</View>
);
}
return (
<ScrollView>
{!myTodoTasks.length ? (
<Text>You don't have any tasks</Text>
) : (
myTodoTasks.map(task => (
<Text key={task._id}>{task.text}</Text>
))
)}
</ScrollView>
);
}
export default withTracker(() => {
const handle = Meteor.subscribe('myTodos');
const myTodoTasks = Todos.find({ completed: false }).fetch();
return {
myTodoTasks,
loading: !handle.ready()
};
})(MyApp);Using Accounts
The package also has full support for accounts, including Meteor.loginWithPassword, Meteor.user, Accounts.createUser, Meteor.loggingIn, Accounts.forgotPassword, etc.
import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import Meteor from '@meteorrn/core';
function LoginScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState(null);
const handleLogin = () => {
Meteor.loginWithPassword(email, password, (err) => {
if (err) {
setError(err.reason);
}
});
};
return (
<View>
<TextInput
placeholder="Email"
value={email}
onChangeText={setEmail}
/>
<TextInput
placeholder="Password"
value={password}
onChangeText={setPassword}
secureTextEntry
/>
{error && <Text style={{ color: 'red' }}>{error}</Text>}
<Button title="Login" onPress={handleLogin} />
</View>
);
}Calling Methods
import Meteor from '@meteorrn/core';
// Call a Meteor method
async function addTask(text) {
try {
const result = await Meteor.callAsync('tasks.insert', text);
console.log('Task added:', result);
} catch (error) {
console.error('Error adding task:', error);
}
}Rendering large lists
If you are rendering large amounts of data, you should use the FlatList component instead of mapping over arrays:
import { FlatList, Text, View } from 'react-native';
function TodoList({ todos }) {
return (
<FlatList
data={todos}
keyExtractor={(item) => item._id}
renderItem={({ item }) => (
<View>
<Text>{item.text}</Text>
</View>
)}
/>
);
}