React Native Quickstart
Learn how to query data from Convex in a React Native app.
- Create a React Native app
Create a React Native app using the
npx create-expo-app
command.npx create-expo-app my-app
- Install the Convex client and server library
To get started, install the
convex
package which provides a convenient interface for working with Convex from a React app.Navigate to your app and install
convex
and its peer dependencies.cd my-app && npm install convex react-dom react-native-get-random-values
- Setup a Convex dev deployment
Next, run
npx convex dev
. This will prompt you to log in with GitHub, create a project, and save your production and deployment URLs.It will also create a
convex/
folder for you to write your backend API functions in. Thedev
command will then continue running to sync your functions with your dev deployment in the cloud.npx convex dev
- Install .env helper tool
To configure your Convex deployment URL via
.env
files, in a new terminal window, installreact-native-dotenv
.npm install --dev react-native-dotenv
- Configure Babel for .env files
To use the deployment URL directly from the
.env
files, configure babel.babel.config.jsmodule.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["module:react-native-dotenv"],
};
}; - Create sample data for your database
Create a
sampleData.jsonl
file with some sample data.sampleData.jsonl{"text": "Buy groceries", "isCompleted": true}
{"text": "Go for a swim", "isCompleted": true}
{"text": "Integrate Convex", "isCompleted": false} - Add the sample data to your database
Now that your project is ready, add a
tasks
table with the sample data into your Convex database with theimport
command.npx convex import tasks sampleData.jsonl
- Expose a database query
Add a new file
tasks.js
in theconvex/
folder with a query function that loads the data.Exporting a query function from this file declares an API function named after the file and the export name,
api.tasks.get
.convex/tasks.jsimport { query } from "./_generated/server";
export const get = query({
args: {},
handler: async (ctx) => {
return await ctx.db.query("tasks").collect();
},
}); - Connect the app to your backend
In
App.js
, create aConvexReactClient
and pass it to aConvexProvider
wrapping your component tree.Also import
'react-native-get-random-values'
.Finally include the
Tasks
component which we'll add in the next step.App.jsimport { ConvexProvider, ConvexReactClient } from "convex/react";
import "react-native-get-random-values";
import { CONVEX_URL } from "@env";
import Tasks from "./Tasks";
const convex = new ConvexReactClient(CONVEX_URL, {
unsavedChangesWarning: false,
});
export default function App() {
return (
<ConvexProvider client={convex}>
<Tasks />
</ConvexProvider>
);
} - Display the data in your app
Add a new file
Tasks.js
with a component using theuseQuery
hook to fetch from yourapi.tasks.get
API.Tasks.jsimport { StyleSheet, Text, View } from "react-native";
import { useQuery } from "convex/react";
import { api } from "../convex/_generated/api";
export default function Tasks() {
const tasks = useQuery(api.tasks.get);
return (
<View style={styles.container}>
{tasks?.map(({ _id, text }) => (
<Text key={_id}>{text}</Text>
))}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
}); - Start the app
Start the app, scan the provided QR code with your phone, and see the serialized list of tasks in the center of the screen.
npm start
Are you trying to build a universal app targeting both browsers and mobile
devices? Use npm create tamagui
and apply the steps above to the apps/expo
directory and the steps in the Next.js Quickstart
to the apps/next
directory.