Creating a React Native Mobile App with Replit Assistant and Expo

Learn how to create your first React Native mobile app with Expo and Replit Agent, an advanced AI-coding agent. This step-by-step guide teaches you how to go from an initial idea to a cross platform, mobile app in minutes, regardless of skill level.

React Native dominates the mobile application development landscape, powering some of the world’s most popular mobile applications: Facebook, Instagram, Shopify, etc. Meta, which created and maintains React Native, relies on React Native to power their portfolio of cross-platform mobile applications on iOS and Android. However, newcomers to React Native often face significant hurdles when setting up a new React Native project, from setting an environment that’s capable of running React Native to installing numerous dependencies, all of which must all be completed before being able to write any actual code. While the Expo framework provides a set of tools and services that simplify the React Native development process, getting started with React Native remains a daunting technical gauntlet that can overwhelm inexperienced developers, often consuming hours or even days of valuable development time.

This is where Replit changes the game. With Replit's cloud-based development environment, developers can bypass the majority of these setup headaches entirely. Replit offers an 

 that already has everything setup, allowing developers to start building React Native applications immediately from the comfort of their browser or the Replit mobile app. Simply create a new project based on the existing Expo template (”remix the template,” which is basically forking the template), and Replit will automatically spin up and configure a new environment, install all necessary dependencies, and set up a code editor, as well as a preview pane that let’s you preview your React Native application.

This comprehensive guide will demonstrate how you can create a React Native application with Replit Assistant and Expo. Specifically, you will be building a habit-tracking mobile application that uses calendar heatmaps to visualize user progress. With Replit Assistant, an AI-powered coding assistant that’s integrated into the Replit platform, you have a pair-programming partner that can assist you as you are building your React Native application. Whether it’s generating code snippets, troubleshooting errors, suggesting optimizations, or providing contextual guidance, Replit Assistant makes building a React Native application accessible to everyone.

How do you get started with building a React Native mobile application on Replit?

To get started with building a React Native mobile application on Replit, first log into your Replit account. If you don’t already have a Replit account, then sign up for one - it’ll only take a few minutes. Then, visit the 

 and click the “Remix template” button. 

Upon clicking the “Remix template” button, a modal pops up that asks you to enter the name and a description for this new project. In this case, let’s name it “Habit Tracker” and provide the description “A dark-themed, habit-tracking React Native mobile application that uses calendar heatmaps to visualize user progress.” For privacy, select the default “Public” option (you can only choose the “Private” option if you are subscribed to the Replit Core plan). The “Public” option makes the project visible to anyone on the web, as well as allows them to fork (”remix”) your project, which is perfectly fine for this guide. Once all of the required fields have been filled out, click the “Use Template” button.

Replit redirects you to a new project with all of the template’s project files. Additionally, Replit provisions the project environment and installs the project dependencies so that you are able to preview your React Native mobile application in the preview pane. Feel free to follow along Replit’s onboarding steps to learn about the features available in the project workspace.

How do you preview a React Native mobile application from Replit on a physical mobile device?

To preview the React Native mobile application on a mobile device, download the Expo Go app from your mobile device’s respective app store. 

Then, back in the project workspace, in the right-side pane, add a new tab for “Console” by clicking on the “+” button next to the pane’s tabs and selecting “Console” from the list of options (you may need to search for it). Console displays the runtime logs of the React Native application as it’s running. Within the “Console” pane, scroll up until a QR code is visible on your screen.  

Using a QR code scanner app, or your mobile device’s native camera app, scan the QR code. This will open the React Native application in the Expo Go app via deeplink. Additionally, anytime you make changes to the React Native application in Replit, Expo Go will live reload the application automatically, allowing you to see updates in real time. This instant feedback loop will help you identify issues and test new features faster.

How do you prompt Replit Assistant to create a React Native mobile application?

I. Personalize Replit Assistant with a custom prompt.

To make Replit Assistant aware of the project context (in case it cannot be readily inferred from the project files) and provide better responses to your prompts, you can personalize Replit Agent with a custom prompt, much like a system prompt.

In the left-side pane, under the “Assistant” tab, click on the gear icon on the upper right side of the pane. This brings up the Replit Assistant’s settings.

Under the “Assistant Prompt” section, click the gear icon next to the default prompt. In the modal that pops up, click on the “+ Add new prompt” button.

For this new prompt, title it “Expo Project.” For the prompt, enter in the following:

You are developing a React Native application with this Expo project.

When providing code, focus on React Native and Expo-specific implementation details. Prioritize and use Expo SDK features and APIs, when possible. 

Adapt your responses with respect to this context.

Once all of the required fields have been filled out, press the “Save” button.

Now you can select this prompt from the dropdown of available prompts that you can choose to personalize Replit Assistant with.

II. Come up with a concise, one-sentence description of the React Native application.

In the prompt that’s provided to Replit Assistant, the first sentence should explicitly state that you want to create a React Native application. Additionally, it should describe the React Native application’s purpose and core functionality.

For example, for a React Native application that displays calendar heatmaps to visualize a user’s ability to maintain certain habits:

Create a habit-tracking mobile application that uses calendar heatmaps to visualize user progress. The app should allow users to log their habits, with each habit associated with its own calendar heatmap, to make it easy to identify patterns and track streaks over time.


If you have trouble coming up with a concise, one-sentence description, then you can prompt Claude AI or ChatGPT with the following:

Give a concise description for the following task:

"<DESCRIPTION>"

 with the task you want to describe concisely, and copy and paste the description into Replit Assistant’s chat interface.

II. Provide a list of features the React Native application should support.

After adding a one-sentence description of the React Native application to the prompt, add a detailed list of any features that the React Native application should support. The more items that describe how the React Native application should behave, the more likely that Replit Assistant will generate exactly what you’re looking for. Being specific about functionality, user interactions, and expected behaviors helps Replit Assistant understand your vision and translate it into functional code.

Create a habit-tracking mobile application that uses calendar heatmaps to visualize user progress. The app should allow users to log their habits, with each habit associated with its own calendar heatmap, to make it easy to identify patterns and track streaks over time.

The mobile application should support the following functionality:

1. The home view displays a scrollable list of habits, each represented by a panel that contains two sections. The header section contains an icon that represents the habit, the name of the habit, a description of the habit, and a button for marking the habit as completed for the day. The button contains a check icon and is grayed out. When tapped, the button will be colored, indicating that the habit has been completed for the day. The body section that's below the header section contains a calendar heatmap that visualizes the user's completion history for that specific habit. 

2. Fixed towards, and slightly offsetted from, the bottom of the screen is a floating drawer component. The floating drawer component is labeled "Add New Habit." When tapped, an action sheet slides open from the bottom and displays a form that allows users to fill out the new habit's name, description, icon, and color. The color is used for coloring the calendar heatmap, as well as coloring the marked as complete button when it's tapped.

3. At the very top of the home view is a section that's split into two sections, horizontally. In the left section, aligned to the left, is a search button that only contains a magnifying glass icon. In the right section, aligned to the right, is a counter that shows the total number of habits that have been completed today, as well as the total number of habits that are registered in the application. When the user taps on the search button, a modal appears with a search field for searching habits and options for filtering completed/incompleted habits. Once the "Apply" button has been tapped, the search parameters will be applied, the modal will disappear, and the list of habits on the home view will update accordingly. The magnifying glass icon in the search bar should be colored with a yellow-orange gradient to indicate that search parameters have been applied. Tapping on the search button again, the user should be able to see the active search parameters, as well as two buttons: "Apply" for applying search parameters (grayed out when the search field is empty, and no filters have been selected) and "Clear" for clearing search parameters (grayed out when there are no search parameters that have been applied).  

4. Tapping on any of the habit panels will open an action sheet that slides open from the bottom. The action sheet will display information about the habit, as well as display two buttons, one for editing the habit and one for deleting the habit. When you tap on the "Delete Habit" button, an alert component will ask the user if they're sure if they want to delete the habit. If the user taps the "Okay" button, then the habit will be deleted. If the user taps the "Cancel" button, then the alert component will disappear. When you tap on the "Edit Habit" button, the user is able to inline edit the information.

III. Specify technologies (e.g., languages, libraries, frameworks, tools, and APIs) to use and design principles to follow.

After adding a detailed list of features that the React Native application should support to the prompt, enrich the prompt by mentioning any specific technologies that should be used and the design principles to follow. This ensures that Replit Assistant understands not just what to build, but how to build it according to your technical and design preferences. 

For example, for a React Native application that displays calendar heatmaps to visualize a user’s ability to maintain certain habits: 

Create a dark-themed, habit-tracking React Native mobile application that uses calendar heatmaps to visualize user progress. The app should allow users to log their habits, with each habit associated with its own calendar heatmap, to make it easy to identify patterns and track streaks over time.

The mobile application should support the following functionality:

1. The home view displays a scrollable list of habits that's fetched from `AsyncStorage`. Each habit is represented by a panel that contains two sections. The header section contains an icon that represents the habit, the name of the habit, a description of the habit, and a button for marking the habit as completed for the day. The button contains a check icon and is grayed out. When tapped, the button will be colored, indicating that the habit has been completed for the day. The body section that's below the header section contains a calendar heatmap that visualizes the user's completion history for that specific habit. Implement the calendar heatmap with the `<CalendarHeatmap />` component from the `react-native-calendar-heatmap` library.

2. Fixed towards, and slightly offsetted from, the bottom of the screen is a floating drawer component that's shaped like Apple's Dynamic Island component. The floating drawer component is labeled "Add New Habit." When tapped, an action sheet slides open from the bottom and displays a form that allows users to fill out the new habit's name, description, icon, and color. The color is used for coloring the calendar heatmap, as well as coloring the marked as complete button when it's tapped.

3. At the very top of the home view is a section that's split into two sections, horizontally. In the left section, aligned to the left, is a search button that only contains a magnifying glass icon. In the right section, aligned to the right, is a counter that shows the total number of habits that have been completed today, as well as the total number of habits that are registered in the application. When the user taps on the search button, a modal appears with a search field for searching habits and options for filtering completed/incompleted habits. Once the "Apply" button has been tapped, the search parameters will be applied, the modal will disappear, and the list of habits on the home view will update accordingly. Use the Fuse.js library for fuzzy-searching habits by name and description. The magnifying glass icon in the search bar should be colored with a yellow-orange gradient to indicate that search parameters have been applied. Tapping on the search button again, the user should be able to see the active search parameters, as well as two buttons: "Apply" for applying search parameters (grayed out when the search field is empty, and no filters have been selected) and "Clear" for clearing search parameters (grayed out when there are no search parameters that have been applied). Persist the search parameters in `AsyncStorage`.

4. Tapping on any of the habit panels will open an action sheet that slides open from the bottom. The action sheet will display information about the habit, as well as display two buttons, one for editing the habit and one for deleting the habit. When you tap on the "Delete Habit" button, an alert component will ask the user if they're sure if they want to delete the habit. If the user taps the "Okay" button, then the habit will be deleted. If the user taps the "Cancel" button, then the alert component will disappear. When you tap on the "Edit Habit" button, the user is able to inline edit the information.

Style the React Native application using Tailwind CSS and its color palette.

IV. Enter the final prompt into Replit Assistant and build the initial prototype of the React Native application.

Once the prompt has been finalized, enter the prompt into Replit Assistant. It will…

In this case, once Replit Assistant finishes proposing all of the changes it would make to the project, click the “Apply all” button. Replit Assistant will install the proposed dependencies and modify existing (and introduce new) project files accordingly.  

Once completed, Replit Assistant will create a checkpoint. In the right-side pane, add a new tab for “Webview” by clicking on the “+” button next to the pane’s tabs and selecting “Webview” from the list of options (you may need to search for it). Since 

 has been running this whole time, you should automatically see the initial prototype of the React Native application. 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating a React Native Mobile App with Replit Assistant and Expo

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript