React Native is a cross-platform mobile app framework that allows you to build native apps for iOS and Android using JavaScript. It was developed by Meta Platforms, Inc. and it is currently among the most popular JavaScript frameworks for building native apps with a huge active community behind it.
Medusa is an open source headless commerce platform that allows you to create online shopping stores in a few minutes. It includes every feature a store needs such as order management, customers, payments, products, discounts, and a lot more.
In this tutorial, you are building a React Native mobile commerce application with Medusa. For this part, you are going to create two screens, one for all products and the other for the product info.
You can also find the source code of the React Native app on the GitHub
Prerequisites
Before you start with the tutorial make sure you have Node.js v14 or greater installed on your machine.
Set Up Medusa Server
The first step is to setup the Medusa server, where the backend and APIs are handled.
You can install the Medusa CLI on your machine by running the following command:
Once the CLI is installed successfully, run the following command to create a Medusa project:
The
option is used to add dummy data such as products and users to the store.Copy to clipboard--seed
Change to the newly-created directory
and run the following command to start the medusa server:Copy to clipboardmy-medusa-store
It is recommended to add a storage plugin to be able to add products with images in Medusa. You can use MinIO, AWS S3, or Spaces.
Set Up Medusa Admin
Medusa has a very powerful admin dashboard where you can manage your products, payments, transaction, and more. This is very easy to setup however it is optional, so if you want you can skip this section.
In a separate directory, clone the Medusa Admin:
Once it is cloned, you should see a new directory named
. Navigate to the new directory and run the following command to install the dependencies of the project:Copy to clipboardmedusa-admin
Run Admin Panel
Finally, make sure that the Medusa server is still running and start the admin panel server by running the following command:
Now, open your browser and navigate to
and you should see the login page for admin panel. Login in to the admin with the below credentials.Copy to clipboardlocalhost:7000
- Email: admin@medusa-test.com
- Password: supersecret
Theoption you used earlier adds an admin user with the email and passwordCopy to clipboard--seed
Create Products
Once you are logged in successfully, choose Products from sidebar and you should see the list of products in your store.
If you are experiencing connection issues, it's most likely because of CORS issues. Check here how to fix it.
You can also create a new product by clicking on the "New Product" button. Add information for your product such as a name, description, handle, variants, images, prices, and a lot more.
Set Up React Native Ecommerce Project
Now that you have the store backend and admin panel ready it is time to start working on the react native ecommerce app.
In this tutorial, you are using Expo CLI to build the app. Run the following command to install the Expo CLI:
Once the CLI is installed successfully, run the following command to create a new react native ecommerce project:
You will be promoted with some questions. You can follow the below code for the answers:
Install Dependencies
Once the project is created successfully you should see a new directory named
. Navigate to the new directory and run the following command to install a few other dependencies:Copy to clipboardmedusa-store
is used to expose native navigation container components to React Native.Copy to clipboardreact-native-screens
provides API that helps users navigate between screens.Copy to clipboardreact-native-router-flux
creates smooth animations and interactions that run on the UI thread.Copy to clipboardreact-native-reanimated
is a small package used for responsiveness in the app.Copy to clipboardrn-responsive-screen
is a flexible way to handle safe areas.Copy to clipboardreact-native-safe-area-context
provides native-driven gesture management APIs for building the best possible touch-based experiences.Copy to clipboardreact-native-gesture-handler
is a promise-based HTTP Client to easily send requests to REST APIs and perform CRUD operations.Copy to clipboardaxios
includes popular icons sets which you can use in the app.Copy to clipboard@expo/vector-icons
Run Expo Development Server
After the packages are installed successfully, start the development server by running the following:
You can either scan the QR code using your device or run the app on an Android/iOS simulator. Once the app is shown on your mobile, you should see a similar screen.
This is a basic react native code in the
file.Copy to clipboardApp.js
Set Up Routes
In this section, you’ll set up different routes in your app.
Before setting up the routes, you have to create a few screens. Create a new folder named
and inside it create a new file namedCopy to clipboardscreens
.Copy to clipboardProducts.js
Inside
insert the following code:Copy to clipboardProducts.js
For now it contains a very simple
component.Copy to clipboardText
Now that you have a screen setup, you can continue to add routes to the project. Replace the code inside of the
with the following:Copy to clipboardApp.js
In the above code, you are using
to create the navigation.Copy to clipboardreact-native-router-flux
is used as a parent component and eachCopy to clipboardRouter
represents one screen. For now you have just one screen.Copy to clipboardScene
Save the file and you might see an error similar to this.
It is because that
usesCopy to clipboardreact-native-router-flux
and in order to make it work you need to add it toCopy to clipboardreact-native-reanimated
. Open the babel file from your directory and add the below line afterCopy to clipboardbabel.config.js
:Copy to clipboardpresents
Save the file and restart the server with the following command:
The option
clears the cache before running the server.Copy to clipboard-c
If you see the error “Invariant Violation: Tried to register two views with the same name RNGestureHandlerButton”, delete thedirectory and use Yarn to re-install the dependencies.Copy to clipboardnode_modules
Products List Screen
Create a new folder in the root directory named
. In theCopy to clipboardcomponents
folder create 3 files.Copy to clipboardcomponents
,Copy to clipboardButton.js
, andCopy to clipboardProductCard.js
.Copy to clipboardHeader.js
In the
file insert the following code to create a basic button component:Copy to clipboardButton.js
Similarly in the
insert the following code to create a simple header component:Copy to clipboardHeader.js
The last one is
. It is the main component in which you render the product data:Copy to clipboardProductCard.js
In the above code, the product price is divided by 100 because in Medusa the prices are hosted on the server without decimals.
Create URL Constant
Create a new folder named
and inside it create a new file namedCopy to clipboardconstants
with the following content:Copy to clipboardurl.js
In the above code, you define your Medusa server’s base URL. To be able to connect from your device to the local server, you must change the value of
to your machine’s IP address. You can refer to this guide to learn how to find your IP address.Copy to clipboardbaseURL
Products Screen
That’s it for the components. Now replace the code in the
with the following:Copy to clipboardProducts.js
In the code above, you call
when the screen loads usingCopy to clipboardfetchProducts
. In theCopy to clipboarduseEffect
function, you useCopy to clipboardfetchProducts
to fetch the products from the Medusa server and save it in the state.Copy to clipboardaxios
Once you fetch the products, you render them using the
component.Copy to clipboardProductCard
Run the App
Save the file and make sure that Expo and the Medusa server are running. Then, open the app on your device and you should see on the home screen the products from your Medusa server.
Product Info Screen
In this section, you’ll create the Product Info screen where the user can see more details about the product.
In the
directory, create a new file namedCopy to clipboardscreens
and for now you can use it to render a simpleCopy to clipboardProductInfo.js
component:Copy to clipboardText
Then, add the import
at the top ofCopy to clipboardProductInfo
:Copy to clipboardApp.js
And add a new
component below the existingCopy to clipboardScene
component in the returned JSX:Copy to clipboardScene
In the
directory, create a new directory namedCopy to clipboardcomponents
and create inside itCopy to clipboardProductInfo
with the following content:Copy to clipboardImage.js
In the above component you display a main big image and below it the rest of the product images as thumbnails. When the user press on one of the thumbnail images it is set as the active image and displayed as the main image.
In the
file, replace the map function in the returned JSX with the following:Copy to clipboardProducts.js
You add a
that navigates the user to the product info screen when they click on a product.Copy to clipboardTouchableOpacity
Usingyou pass the product ID from the home screen to the product info screen.Copy to clipboardreact-router-flux
Then, replace the code in
with the following:Copy to clipboardProductInfo.js
To briefly explain the code snippet:
- First you import all necessary components.
- Then you fetch the product data in useEffect function and save it in the state.
- Finally, you display the images using the
component.Copy to clipboardImages
Test Product Info Screen
Open the app now and click on any product on the home screen. A new screen will open showing the product’s images.
Now, you’ll display the product’s information.
In the
folder, inside theCopy to clipboardcomponents
directory create a new file namedCopy to clipboardProductInfo
with the following content:Copy to clipboardMetaInfo.js
In the above component, you render the product title, price, description and variants.
For the product variant, you map all the variants and when a user press on one of them, you set that variant as active.
Save the
file and import it at the top ofCopy to clipboardMetaInfo.js
:Copy to clipboardscreens/ProductInfo.js
Then, in the returned JSX add the
component below theCopy to clipboardMetaInfo
component:Copy to clipboardImages
Test New Changes in Product Info Screen
Save the changes and check the app now. The product info screen now shows details about the product.
What’s Next?
This article gives you the basis for creating a Medusa and React Native apps. Here are some more functionalities you can add using Medusa:
- Add a cart and allow adding products to cart.
- Add a payment provider using Stripe.
- Add a search engine using MeiliSearch.
- Check out the documentation for what more you can do with Medusa.
Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord. Also, check out our Next.js-based Storefront template.
Share this post
Try Medusa
Spin up your environment in a few minutes.
