v3-docs/docs/tutorials/integrations/react-native.md
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:
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.
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.
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:
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.
To install the @meteorrn/core package, run the following command in your React Native project:
npm install --save @meteorrn/core
You also need to confirm you have the package's peer dependencies installed:
@react-native-community/netinfo installed@react-native-async-storage/async-storage@>=1.8.1 installedThe @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.
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.
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.
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);
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>
);
}
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);
}
}
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>
)}
/>
);
}