{"id":4443,"date":"2025-02-15T21:43:47","date_gmt":"2025-02-15T16:13:47","guid":{"rendered":"https:\/\/codingislove.com\/?p=4443"},"modified":"2025-02-15T21:46:57","modified_gmt":"2025-02-15T16:16:57","slug":"medusa-mobile-react-native","status":"publish","type":"post","link":"https:\/\/codingislove.com\/medusa-mobile-react-native\/","title":{"rendered":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js"},"content":{"rendered":"\n<p>Looking to build a mobile app with\u00a0Medusa.js? This comprehensive guide walks\u00a0you through creating a React Native Medusa mobile\u00a0app from scratch. Whether you&#8217;re starting a new\u00a0project or looking for a React Native starter Medusa template, you&#8217;ll learn how to build a\u00a0production-ready mobile e-commerce solution.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1-1024x536.png\" alt=\"\" class=\"wp-image-4451\" srcset=\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1-1024x536.png 1024w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1-300x157.png 300w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1-768x402.png 768w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Medusa?<\/h2>\n\n\n\n<p><a href=\"https:\/\/medusajs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Medusa<\/a> is an open-source headless commerce engine that enables developers to create unique\u00a0and scalable e-commerce experiences. Unlike traditional e-commerce platforms, Medusa offers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Headless Architecture: Complete\u00a0freedom in frontend implementation<\/li>\n\n\n\n<li>Extensible Core: Plugin system for custom\u00a0functionality<\/li>\n\n\n\n<li>Developer-First: Built with TypeScript and modern development\u00a0practices<\/li>\n\n\n\n<li>Multi-Region\u00a0Support: Built-in multi-currency support based on region<\/li>\n\n\n\n<li>Order Management: Comprehensive order lifecycle handling<\/li>\n\n\n\n<li>Inventory Management: Built-in inventory and variant\u00a0management<\/li>\n\n\n\n<li>Modular architecture<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why React\u00a0Native?<\/h2>\n\n\n\n<p><a href=\"https:\/\/reactnative.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a> is a\u00a0framework for building native mobile applications\u00a0using React:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Native\u00a0Performance: Direct access to native\u00a0platform capabilities<\/li>\n\n\n\n<li>Code\u00a0Reusability: Share logic between iOS and Android<\/li>\n\n\n\n<li>Large Ecosystem: Extensive library\u00a0of third-party packages<\/li>\n\n\n\n<li>Hot\u00a0Reload: Fast development with\u00a0instant feedback<\/li>\n\n\n\n<li>Strong Community: Active development and community support<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using React\u00a0Native with Medusa<\/h2>\n\n\n\n<p>Combining React Native and Medusa.js creates\u00a0powerful mobile e-commerce possibilities:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Native Mobile\u00a0Experience: Build a React Native Medusa app\u00a0with native UI components<\/li>\n\n\n\n<li>Mobile-First Features: Leverage device\u00a0capabilities like push notifications<\/li>\n\n\n\n<li>Offline Support: Implement AsyncStorage for cart and user data<\/li>\n\n\n\n<li>Performance Optimization: Native\u00a0rendering for smooth product browsing<\/li>\n\n\n\n<li>Cross-platform support: Build an Android and iOS e-commerce mobile app using a single code base<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Introducing Medusa Mobile<\/h2>\n\n\n\n<p><a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native\" target=\"_blank\" rel=\"noreferrer noopener\">Medusa Mobile<\/a> is\u00a0a complete React Native Medusa starter. It is not just a starter, it comes with 90% of the functionality that you need for a production-ready app.<\/p>\n\n\n\n<p><strong>Features of Medusa Mobile:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udecd\ufe0f Product browsing with infinite scroll<\/li>\n\n\n\n<li>\ud83d\udc64 User authentication and profile\u00a0management<\/li>\n\n\n\n<li>\ud83d\udd0d Categories\u00a0and collections<\/li>\n\n\n\n<li>\ud83d\uded2 Cart management<\/li>\n\n\n\n<li>\ud83c\udfc3\u200d\u2642\ufe0f Guest checkout<\/li>\n\n\n\n<li>\ud83d\udce6 Order tracking<\/li>\n\n\n\n<li>\ud83c\udfa8 Multiple themes with dark\u00a0mode<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/2-1024x536.png\" alt=\"\" class=\"wp-image-4452\" srcset=\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/2-1024x536.png 1024w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/2-300x157.png 300w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/2-768x402.png 768w, https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/2.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up\u00a0Medusa Backend<\/h2>\n\n\n\n<p>Before running\u00a0the mobile app, you need a Medusa backend. Set it up in a few steps by following the official docs &#8211; <a href=\"https:\/\/docs.medusajs.com\/learn\/installation\" target=\"_blank\" rel=\"noreferrer noopener\">Install Medusa backend application<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up&nbsp;Medusa Mobile<\/h2>\n\n\n\n<p>Now let&#8217;s set up the React Native\u00a0Medusa mobile app<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udccb Prerequisites<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-prerequisites\"><\/a><\/h2>\n\n\n\n<p>Before you begin, ensure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js (v20 or newer)<\/li>\n\n\n\n<li>React Native development environment &#8211;\u00a0<a href=\"https:\/\/reactnative.dev\/docs\/set-up-your-environment\" target=\"_blank\" rel=\"noreferrer noopener\">Set Up Your Environment<\/a><\/li>\n\n\n\n<li>A running Medusa v2 backend server &#8211;\u00a0<a href=\"https:\/\/docs.medusajs.com\/learn\/installation\" target=\"_blank\" rel=\"noreferrer noopener\">Medusa v2 installation<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Environment Setup<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#step-1-environment-setup\"><\/a><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clone the repository:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\ngit clone git@github.com:bloomsynth\/medusa-mobile-react-native.git medusa-mobile\ncd medusa-mobile\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Install dependencies:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm install\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Configure environment variables:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\ncp .env.template .env\n<\/pre><\/div>\n\n\n<p>Edit&nbsp;<code>.env<\/code>&nbsp;with your Medusa backend URL and publishable API key.<\/p>\n\n\n\n<p><em>NOTE: Update the\u00a0<code>MEDUSA_BACKEND_URL<\/code>\u00a0in your\u00a0<code>.env<\/code>\u00a0file. If you set the URL as localhost, then the Android emulator will not be able to connect to the server. Use your local IP address instead. example:\u00a0<code>http:\/\/192.168.1.100:9000<\/code>\u00a0Run\u00a0<code>ipconfig<\/code>\u00a0to get your local IP address.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Start Metro Server<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm start\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Run the Application<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#step-3-run-the-application\"><\/a><\/h3>\n\n\n\n<p>For Android:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm run android\n<\/pre><\/div>\n\n\n<p>For iOS: Install dependencies for iOS:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpx pod-install ios\n<\/pre><\/div>\n\n\n<p>Run the application:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: bash; title: ; notranslate\" title=\"\">\nnpm run ios\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcf1 Expo Usage<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-expo-usage\"><\/a><\/h2>\n\n\n\n<p>This project uses React Native CLI to ensure maximum flexibility for all developers. However, Expo users are more than welcome! You can easily add Expo support with a single command.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.expo.dev\/bare\/using-expo-cli\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about migrating to Expo CLI<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc1 Project Structure<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-project-structure\"><\/a><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\napp\/\n\u251c\u2500\u2500 screens\/       # Screen components\n\u251c\u2500\u2500 components\/    # Reusable UI components\n\u251c\u2500\u2500 data\/          # Data context providers\n\u251c\u2500\u2500 styles\/        # Theme and style utilities\n\u251c\u2500\u2500 utils\/         # Helper functions\n\u2514\u2500\u2500 api\/           # API client configuration\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcd6 Developer Guide<\/h2>\n\n\n\n<p>Here&#8217;s the documentation for managing the core functionality of the app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\uded2 Cart Management<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-cart-management\"><\/a><\/h3>\n\n\n\n<p>The cart functionality is provided through the&nbsp;<code>useCart<\/code>&nbsp;hook, which gives you access to cart operations and state.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Basic Usage<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useCart } from &#039;@data\/cart-context&#039;;\n\nfunction MyComponent() {\n  const { \n    cart,                \/\/ Current cart state\n    addToCart,          \/\/ Add items to cart\n    updateLineItem,     \/\/ Update item quantity\n    removeLineItem,     \/\/ Remove item from cart\n    applyPromoCode,     \/\/ Apply discount code\n    removePromoCode,    \/\/ Remove discount code\n    setShippingMethod   \/\/ Set shipping option\n  } = useCart();\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Working with Cart Items<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#working-with-cart-items\"><\/a><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a product to the cart:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { addToCart } = useCart();\n\n\/\/ Quantity is required when adding items\nawait addToCart(variantId, 1); \/\/ Add one item\nawait addToCart(variantId, 3); \/\/ Add three items\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Update item quantity:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { updateLineItem } = useCart();\n\n\/\/ Update to specific quantity\nawait updateLineItem(lineItemId, 2);\n\n\/\/ Remove item by setting quantity to 0\nawait updateLineItem(lineItemId, 0);\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Managing Promotions<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { applyPromoCode, removePromoCode } = useCart();\n\n\/\/ Apply a promotion code\nconst success = await applyPromoCode(&#039;SUMMER2024&#039;);\n\n\/\/ Remove a promotion code\nawait removePromoCode(&#039;SUMMER2024&#039;);\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Shipping Methods<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { setShippingMethod } = useCart();\n\n\/\/ Set shipping method\nawait setShippingMethod(shippingMethodId);\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Accessing Cart Data<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { cart } = useCart();\n\n\/\/ Get cart items\nconst items = cart.items;\n\n\/\/ Get cart totals\nconst {\n  subtotal,\n  tax_total,\n  shipping_total,\n  discount_total,\n  total\n} = cart;\n\n\/\/ Check applied discounts\nconst appliedPromotions = cart.promotions;\n\n\/\/ Get selected shipping method\nconst currentShipping = cart.shipping_methods?.&#x5B;0];\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Cart Lifecycle<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#cart-lifecycle\"><\/a><\/h4>\n\n\n\n<p>The cart system handles various states and transitions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cart Creation:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst { cart } = useCart();\n\n\/\/ Cart is automatically created when needed\n\/\/ You don&#039;t need to explicitly create a cart\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Guest to Customer Cart Transfer:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ When a guest user logs in, their existing cart is \n\/\/ automatically associated with their customer account\n\/\/ This is handled by the CartProvider and CustomerProvider\n\nimport { useCustomer } from &#039;@data\/customer-context&#039;;\nimport { useCart } from &#039;@data\/cart-context&#039;;\n\nfunction CheckoutFlow() {\n  const { customer } = useCustomer();\n  const { cart } = useCart();\n  \n  \/\/ Cart remains the same, only the customer_id is updated\n}\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Cart update on region change:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useRegion } from &#039;@data\/region-context&#039;;\nimport { useCart } from &#039;@data\/cart-context&#039;;\n\nfunction MyComponent() {\n  const { region } = useRegion();\n  const { cart } = useCart();\n\n  \/\/ Cart automatically updates when region changes\n  \/\/ Product prices will be updated based on the region\n  console.log(cart.region_id); \/\/ Current region ID\n  console.log(cart.currency_code); \/\/ Region&#039;s currency\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf0d Region Management<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-region-management\"><\/a><\/h3>\n\n\n\n<p>The region functionality is provided through the&nbsp;<code>useRegion<\/code>&nbsp;hook, which handles region selection and persistence.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Basic Usage<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#basic-usage-1\"><\/a><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useRegion } from &#039;@data\/region-context&#039;;\n\nfunction MyComponent() {\n  const {\n    region,             \/\/ Current selected region\n    setRegion,          \/\/ Update region state\n  } = useRegion();\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Working with Regions<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#working-with-regions\"><\/a><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Access current region:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { region } = useRegion();\n\n\/\/ Get region details (if region is loaded)\nconst {\n  id,\n  name,\n  currency_code,\n  countries\n} = region || {};\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Change region:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { setRegion } = useRegion();\n\n\/\/ Fetch region data first\nconst { region: newRegion } = await apiClient.store.region.retrieve(regionId);\n\n\/\/ Update region\nsetRegion(newRegion);\n\/\/ This will:\n\/\/ - Persist region selection\n\/\/ - Update cart region automatically\n\/\/ - Trigger price recalculations\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Region Selection UI<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#region-selection-ui\"><\/a><\/h4>\n\n\n\n<p>The app provides a built-in region selector modal:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { useNavigation } from &#039;@react-navigation\/native&#039;;\n\nfunction MyComponent() {\n  const navigation = useNavigation();\n  \n  \/\/ Open region selector modal\n  const openRegionSelect = () =&gt; {\n    navigation.navigate(&#039;RegionSelect&#039;);\n  };\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Working with Countries<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#working-with-countries\"><\/a><\/h4>\n\n\n\n<p>The app provides a dedicated hook for accessing region countries:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useCountries } from &#039;@data\/region-context&#039;;\n\nfunction AddressForm() {\n  const countries = useCountries();\n  \n  \/\/ Format countries for picker\/selector\n  const countryOptions = countries?.map(country =&gt; ({\n    label: country.display_name,\n    value: country.iso_2\n  }));\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Region Persistence<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#region-persistence\"><\/a><\/h4>\n\n\n\n<p>Region selection is automatically persisted using AsyncStorage:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On first load, defaults to the first available region<\/li>\n\n\n\n<li>On subsequent loads, restores the previously selected region<\/li>\n\n\n\n<li>Region ID is stored under the &#8216;region_id&#8217; key<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udc64 Customer Management<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-customer-management\"><\/a><\/h3>\n\n\n\n<p>The customer functionality is provided through the&nbsp;<code>useCustomer<\/code>&nbsp;hook, which handles authentication and customer data management.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Basic Usage<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useCustomer } from &#039;@data\/customer-context&#039;;\n\nfunction MyComponent() {\n  const {\n    customer,           \/\/ Current customer data\n    login,             \/\/ Login with email\/password\n    logout,            \/\/ Logout current customer\n    register,          \/\/ Register new customer\n    refreshCustomer,   \/\/ Refresh customer data\n    updateCustomer     \/\/ Update customer details\n  } = useCustomer();\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Authentication<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#authentication\"><\/a><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Login:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { login } = useCustomer();\n\ntry {\n  await login(email, password);\n  \/\/ On successful login:\n  \/\/ - JWT token is stored in AsyncStorage\n  \/\/ - Customer data is fetched\n  \/\/ - Cart is associated with customer\n} catch (error) {\n  \/\/ Handle login error\n}\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Register new customer:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { register } = useCustomer();\n\ntry {\n  await register(\n    email,\n    password,\n    firstName,\n    lastName\n  );\n  \/\/ Registration automatically logs in the customer\n} catch (error) {\n  \/\/ Handle registration error\n}\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Logout:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { logout } = useCustomer();\n\nawait logout();\n\/\/ This will:\n\/\/ - Clear the stored JWT token\n\/\/ - Reset customer data\n\/\/ - Reset cart\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Managing Customer Data<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#managing-customer-data\"><\/a><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Access customer information:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useLoggedIn } from &#039;@data\/hooks&#039;;\n\nfunction MyComponent() {\n  const { customer } = useCustomer();\n  const isLoggedIn = useLoggedIn();\n\n  \/\/ Access customer details\n  const {\n    email,\n    first_name,\n    last_name,\n    phone,\n    billing_address,\n    shipping_addresses\n  } = customer || {};\n}\n<\/pre><\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Update customer details:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { updateCustomer } = useCustomer();\n\n\/\/ Update customer information\nawait updateCustomer({\n  first_name: &quot;John&quot;,\n  last_name: &quot;Doe&quot;,\n  phone: &quot;+1234567890&quot;\n});\n<\/pre><\/div>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Refresh customer data:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst { refreshCustomer } = useCustomer();\n\n\/\/ Fetch latest customer data from server\nawait refreshCustomer();\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Session Management<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#session-management\"><\/a><\/h4>\n\n\n\n<p>The customer session is automatically managed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JWT token is stored in AsyncStorage under &#8216;auth_token&#8217;<\/li>\n\n\n\n<li>Session is restored on app launch<\/li>\n\n\n\n<li>Token is automatically attached to API requests<\/li>\n\n\n\n<li>Session is cleared on logout<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfa8 Theme Management<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-theme-management\"><\/a><\/h3>\n\n\n\n<p>The app includes a flexible theming system with built-in light\/dark mode support and multiple color schemes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Basic Usage<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useColors, useTheme, useThemeName, useColorScheme } from &#039;@styles\/hooks&#039;;\n\nfunction MyComponent() {\n  const colors = useColors();          \/\/ Get current theme colors\n  const themeName = useThemeName();    \/\/ Get current theme name\n  const { colorScheme } = useColorScheme(); \/\/ Get &#039;light&#039; or &#039;dark&#039;\n\n  \/\/ Access theme colors\n  const {\n    primary,            \/\/ Brand\/accent color\n    background,         \/\/ Main background\n    backgroundSecondary,\/\/ Secondary\/card background\n    content,           \/\/ Main text color\n    contentSecondary   \/\/ Secondary text color\n  } = colors;\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Setting Default Theme<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/ In app.tsx, set your preferred theme name in ThemeProvider\n&lt;ThemeProvider name=&quot;default&quot;&gt;\n  {\/* ... other providers *\/}\n&lt;\/ThemeProvider&gt;\n<\/pre><\/div>\n\n\n<p>Available theme names:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;default&#8221; (Purple accent)<\/li>\n\n\n\n<li>&#8220;vintage&#8221; (Warm red accent)<\/li>\n\n\n\n<li>&#8220;funky&#8221; (Teal accent)<\/li>\n\n\n\n<li>&#8220;eco&#8221; (Green accent)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Changing Themes<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useTheme } from &#039;@styles\/hooks&#039;;\n\nfunction ThemeSwitcher() {\n  const { setThemeName } = useTheme();\n  \n  \/\/ Switch to a different theme\n  const switchTheme = (name: string) =&gt; {\n    setThemeName(name); \/\/ &#039;default&#039; | &#039;vintage&#039; | &#039;funky&#039; | &#039;eco&#039;\n  };\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">System Dark Mode<\/h4>\n\n\n\n<p>The theme system automatically responds to system dark mode changes through NativeWind&#8217;s&nbsp;<code>useColorScheme<\/code>&nbsp;hook. Each theme includes both light and dark variants that are automatically applied based on the system setting.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styling Components<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#styling-components\"><\/a><\/h4>\n\n\n\n<p>The app uses NativeWind (TailwindCSS) for styling. Theme colors are available as Tailwind classes:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction ThemedButton() {\n  return (\n    &lt;TouchableOpacity className=&quot;bg-primary&quot;&gt; \/\/ Theme primary color\n      &lt;Text className=&quot;text-content font-bold&quot;&gt; \/\/ Theme content color\n        Click Me\n      &lt;\/Text&gt;\n    &lt;\/TouchableOpacity&gt;\n  );\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\ud83e\ude9d Useful Hooks<a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native#-useful-hooks\"><\/a><\/h3>\n\n\n\n<p>The app provides additional hooks for common functionality:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { \n  useProductQuantity,\n  useVariantQuantity,\n  useCartQuantity,\n  useCurrentCheckoutStep,\n  useActivePaymentSession,\n  useLoggedIn,\n  useCountries\n} from &#039;@data\/hooks&#039;;\n\n\/\/ Get quantity of a specific product in cart\nconst quantity = useProductQuantity(productId);\n\n\/\/ Get quantity of a specific variant in cart\nconst variantQuantity = useVariantQuantity(variantId);\n\n\/\/ Get total number of items in cart\nconst cartQuantity = useCartQuantity();\n\n\/\/ Get current checkout step\nconst checkoutStep = useCurrentCheckoutStep(); \n\/\/ Returns: &#039;address&#039; | &#039;delivery&#039; | &#039;payment&#039; | &#039;review&#039;\n\n\/\/ Get active payment session in checkout\nconst paymentSession = useActivePaymentSession();\n\n\/\/ Check if user is logged in\nconst isLoggedIn = useLoggedIn();\n\n\/\/ Get formatted list of countries for current region\nconst countries = useCountries();\n\/\/ Returns: Array&lt;{ label: string, value: string }&gt;\n<\/pre><\/div>\n\n\n<p>Read the detailed documentation in the <a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native\" target=\"_blank\" rel=\"noreferrer noopener\">official repo of Medusa Mobile<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Next Steps<\/h2>\n\n\n\n<p>Your Medusa mobile\u00a0app is now running! Here&#8217;s what to do next:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customize Your App<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select one theme from the built-in themes, customize one of them, or build a new theme config to match your app requirement.<\/li>\n\n\n\n<li>Modify UI as needed. You have access to full source code andthe  ability to change anything.<\/li>\n\n\n\n<li>Add custom\u00a0features using Medusa&#8217;s\u00a0API<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Production\u00a0Release<\/h3>\n\n\n\n<p>Follow\u00a0React Native&#8217;s Release Guide for Android and iOS<\/p>\n\n\n\n<p><a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android\" target=\"_blank\" rel=\"noreferrer noopener\">Publishing to Google Play Store<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/reactnative.dev\/docs\/publishing-to-app-store\" target=\"_blank\" rel=\"noreferrer noopener\">Publishing to iOS App Store<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n\n\n<p>Start building your mobile commerce\u00a0experience with React Native and Medusa today! Check\u00a0out\u00a0the <a href=\"https:\/\/github.com\/bloomsynth\/medusa-mobile-react-native\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub repository of Medusa Mobile<\/a>\u00a0for the complete source\u00a0code.<\/p>\n<div style=\"margin-top: 15px; margin-bottom: 15px;\" class=\"sharethis-inline-share-buttons\" ><\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to build a mobile app with\u00a0Medusa.js? This comprehensive guide walks\u00a0you through creating a React Native Medusa mobile\u00a0app from scratch. Whether you&#8217;re starting a new\u00a0project&hellip; <\/p>\n","protected":false},"author":1,"featured_media":4451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":false,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[26,6],"tags":[8,117,58,10,103,73],"class_list":["post-4443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-resources","category-general","tag-coding","tag-developer","tag-development","tag-javascript","tag-react","tag-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love\" \/>\n<meta property=\"og:description\" content=\"Looking to build a mobile app with\u00a0Medusa.js? This comprehensive guide walks\u00a0you through creating a React Native Medusa mobile\u00a0app from scratch. Whether you&#8217;re starting a new\u00a0project&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Coding is Love\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/codingislove\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ranjithkumar10\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-15T16:13:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-15T16:16:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ranjith kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingislove\" \/>\n<meta name=\"twitter:site\" content=\"@codingislove\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ranjith kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\"},\"author\":{\"name\":\"Ranjith kumar\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e\"},\"headline\":\"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js\",\"datePublished\":\"2025-02-15T16:13:47+00:00\",\"dateModified\":\"2025-02-15T16:16:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\"},\"wordCount\":983,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codingislove.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png\",\"keywords\":[\"coding\",\"developer\",\"development\",\"Javascript\",\"React\",\"React Native\"],\"articleSection\":[\"Dev resources\",\"General\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\",\"url\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\",\"name\":\"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love\",\"isPartOf\":{\"@id\":\"https:\/\/codingislove.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png\",\"datePublished\":\"2025-02-15T16:13:47+00:00\",\"dateModified\":\"2025-02-15T16:16:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingislove.com\/medusa-mobile-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage\",\"url\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png\",\"contentUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingislove.com\/medusa-mobile-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Coding is Love\",\"item\":\"https:\/\/codingislove.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"General\",\"item\":\"https:\/\/codingislove.com\/category\/general\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingislove.com\/#website\",\"url\":\"https:\/\/codingislove.com\/\",\"name\":\"Coding is Love\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/codingislove.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingislove.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codingislove.com\/#organization\",\"name\":\"Coding is Love\",\"url\":\"https:\/\/codingislove.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png\",\"contentUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png\",\"width\":300,\"height\":225,\"caption\":\"Coding is Love\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/codingislove\/\",\"https:\/\/x.com\/codingislove\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e\",\"name\":\"Ranjith kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g\",\"caption\":\"Ranjith kumar\"},\"description\":\"A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.\",\"sameAs\":[\"https:\/\/www.facebook.com\/ranjithkumar10\",\"https:\/\/www.instagram.com\/livin_on_d_edge\/\",\"https:\/\/www.linkedin.com\/in\/ranjithkumar10\",\"https:\/\/www.youtube.com\/c\/codingislove01\"],\"url\":\"https:\/\/codingislove.com\/author\/ranjithkumar10\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingislove.com\/medusa-mobile-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love","og_description":"Looking to build a mobile app with\u00a0Medusa.js? This comprehensive guide walks\u00a0you through creating a React Native Medusa mobile\u00a0app from scratch. Whether you&#8217;re starting a new\u00a0project&hellip;","og_url":"https:\/\/codingislove.com\/medusa-mobile-react-native\/","og_site_name":"Coding is Love","article_publisher":"https:\/\/facebook.com\/codingislove\/","article_author":"https:\/\/www.facebook.com\/ranjithkumar10","article_published_time":"2025-02-15T16:13:47+00:00","article_modified_time":"2025-02-15T16:16:57+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","type":"image\/png"}],"author":"Ranjith kumar","twitter_card":"summary_large_image","twitter_creator":"@codingislove","twitter_site":"@codingislove","twitter_misc":{"Written by":"Ranjith kumar","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#article","isPartOf":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/"},"author":{"name":"Ranjith kumar","@id":"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e"},"headline":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js","datePublished":"2025-02-15T16:13:47+00:00","dateModified":"2025-02-15T16:16:57+00:00","mainEntityOfPage":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/"},"wordCount":983,"commentCount":0,"publisher":{"@id":"https:\/\/codingislove.com\/#organization"},"image":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","keywords":["coding","developer","development","Javascript","React","React Native"],"articleSection":["Dev resources","General"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingislove.com\/medusa-mobile-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/","url":"https:\/\/codingislove.com\/medusa-mobile-react-native\/","name":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js - Coding is Love","isPartOf":{"@id":"https:\/\/codingislove.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage"},"image":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","datePublished":"2025-02-15T16:13:47+00:00","dateModified":"2025-02-15T16:16:57+00:00","breadcrumb":{"@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingislove.com\/medusa-mobile-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#primaryimage","url":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","contentUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/codingislove.com\/medusa-mobile-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Coding is Love","item":"https:\/\/codingislove.com\/"},{"@type":"ListItem","position":2,"name":"General","item":"https:\/\/codingislove.com\/category\/general\/"},{"@type":"ListItem","position":3,"name":"Ultimate Guide: Build A Mobile E-commerce App With React Native And Medusa.js"}]},{"@type":"WebSite","@id":"https:\/\/codingislove.com\/#website","url":"https:\/\/codingislove.com\/","name":"Coding is Love","description":"","publisher":{"@id":"https:\/\/codingislove.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingislove.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingislove.com\/#organization","name":"Coding is Love","url":"https:\/\/codingislove.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/#\/schema\/logo\/image\/","url":"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png","contentUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png","width":300,"height":225,"caption":"Coding is Love"},"image":{"@id":"https:\/\/codingislove.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/codingislove\/","https:\/\/x.com\/codingislove"]},{"@type":"Person","@id":"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e","name":"Ranjith kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g","caption":"Ranjith kumar"},"description":"A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.","sameAs":["https:\/\/www.facebook.com\/ranjithkumar10","https:\/\/www.instagram.com\/livin_on_d_edge\/","https:\/\/www.linkedin.com\/in\/ranjithkumar10","https:\/\/www.youtube.com\/c\/codingislove01"],"url":"https:\/\/codingislove.com\/author\/ranjithkumar10\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/codingislove.com\/wp-content\/uploads\/2025\/02\/1.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts\/4443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/comments?post=4443"}],"version-history":[{"count":10,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts\/4443\/revisions"}],"predecessor-version":[{"id":4455,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts\/4443\/revisions\/4455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/media\/4451"}],"wp:attachment":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/media?parent=4443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/categories?post=4443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/tags?post=4443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}