Quick Tutorial on Creating a React Native Mobile App for Your Shopify Store

Here's a simple guide to help you create a React Native mobile app for your Shopify store. By following these steps, you can make a special app that talks directly to your Shopify store, allowing your customers to shop in a personalized way using the Shopify Buy SDK for React Native.

1. Generate a Storefront API Access Token in Shopify

Before you connect your Shopify store to your app, you need to get a special key called a Storefront API access token. Here's how to do that:

• Go to Shopify Settings: Log in to your Shopify admin panel, and find "Settings" at the bottom of the left-hand side.
• Develop Apps: Click on "Apps and sales channels" and then on "Develop Apps."
• Create an App: Click "Create an App," give it a name, and set it up. Then click on "Configure Storefront API scopes" to choose the right access levels.
• Install the App: Click "Install" at the top right corner. After installing, go to "API Credentials" to find your Storefront API access token.

2. Set Up the Shopify Buy SDK in Your React Native App

Now that you have your API token, you can start using your app to connect with your Shopify store.

• Install Shopify Buy SDK

To install the Shopify Buy SDK, use the following command:

npm install shopify-buy

Or if you're using Yarn:

yarn add shopify-buy

• Create Shopify Functions

Make a file in your 'src' folder to manage your Shopify functions. Here's an example to set up the Client and get products:

import Client from 'shopify-buy';

const client = Client.buildClient({
  domain: 'your-shopify-domain',
  storefrontAccessToken: 'your-storefront-access-token'
});

export async function fetchAllProducts() {
  return client.product.fetchAll();
}

export async function fetchSingleProduct(productId) {
  return client.product.fetch(productId);
}

3. Display Products in Your React Native App

Now you can use these Shopify functions in your app to show products to your users.

• Fetch and Display Products

To fetch and display products, use the following code:

import { fetchAllProducts } from '../shopifyFunctions';
import { useState, useEffect } from 'react';

const [products, setProducts] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await fetchAllProducts();
      setProducts(data);
    } catch (error) {
      console.error('Error fetching products: ', error);
    }
  };
  fetchData();
}, []);

• Render Product List

This code snippet helps display a list of products:

import React from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Image, Text } from 'react-native';

const ProductList = ({ products, navigation }) => (
  <SafeAreaView>
    <ScrollView>
      {products.map((product) => (
        <TouchableOpacity key={product.id} onPress={() => navigation.navigate('Details', { id: product.id })}>
          {product.images && product.images.length > 0 ? (
            <Image source={{ uri: product.images[0].src }} style={{ width: 100, height: 100 }} />
          ) : (
            <Text>No Image Available</Text>
          )}
          <Text>{product.title}</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  </SafeAreaView>
);

Looking for more help?

If you need advanced assistance to build a React Native app for your Shopify store from scratch, Hire React Native Developer. These experts can create a seamless shopping experience tailored to your needs!

4. Implement Product Details and Cart Functionality

i. Product Details Screen

import React, { useState, useEffect } from 'react';
import { View, Text, Image } from 'react-native';
import { fetchSingleProduct } from '../shopifyFunctions';

const Product = ({ route }) => {
  const { id } = route.params;
  const [product, setProduct] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await fetchSingleProduct(id);
        setProduct(data);
      } catch (error) {
        console.error('Error fetching product: ', error);
      }
    };
    fetchData();
  }, [id]);

  return (
    <View>
      {product ? (
        <>
          <Image source={{ uri: product.images[0].src }} style={{ width: 200, height: 200 }} />
          <Text>{product.title}</Text>
          <Text>{product.description}</Text>
        </>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

ii. Add Products to Cart

import { useSelector } from 'react-redux';
import { addItem } from '../shopifyFunctions';

const checkoutId = useSelector(selectCheckoutIds);

const addToCart = async () => {
  const item = {
    variantId: product.variants[0].id,
    quantity: parseInt(quantity),
  };
  await addItem(checkoutId, item);
};

iii. Display Cart Items

import React, { useState, useEffect } from 'react';
import { SafeAreaView, ScrollView, View, Text } from 'react-native';
import { fetchCheckout } from '../shopifyFunctions';
import { useSelector } from 'react-redux';

const Cart = () => {
  const [cart, setCart] = useState(null);
  const checkoutId = useSelector(selectCheckoutIds);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetchCheckout(checkoutId);
      setCart({
        id: data.id,
        items: data.lineItems.map((lineItem) => ({
          id: lineItem.id,
          title: lineItem.title,
          quantity: lineItem.quantity,
        })),
        price: data.totalPrice.amount,
      });
    };
    fetchData();
  }, [checkoutId]);

  return (
    <SafeAreaView>
      <ScrollView>
        {cart?.items.map((lineItem) => (
          <View key={lineItem.id}>
            <Text>{lineItem.title}</Text>
            <Text>{lineItem.quantity}</Text>
          </View>
        ))}
      </ScrollView>
      <Text>TOTAL: {cart?.price} €</Text>
    </SafeAreaView>
  );
};

5. Finalize the Transaction

Finally, create a checkout process using the WebView component.

i. Create Checkout and Open in WebView

import React from 'react';
import { WebView } from 'react-native-webview';

const WebViewScreen = ({ route }) => {
  const { uri } = route.params;
  return <WebView source={{ uri }} />;
};

ii. Navigate to WebView for Payment

<TouchableOpacity onPress={() => navigation.navigate('Checkout', { uri: cart?.checkoutUrl })}>
  <Text>Pay</Text>
</TouchableOpacity>

By following these steps, you now have a fully functional React Native Shopify app that allows users to browse products, manage their carts, and complete purchases—all from within the app. But if you are still unconvinced about how to do it or need much deeper insights on this, you should read this article on “React Native Mobile App for Shopify Store”. Feel free to contact the company that shared this article as they are a leading mobile app development and Shopify development company in India.