Building an App Clip with React Native

Being the first to build an App Clip in React Native that was going to be surfaced to millions of Shopify's Shop app users each day proved to be a challenging task.

Shopify logo
Shopify
•
Sebastian Ekström
•17 min read•intermediate•
--
•View Original
GolangGraphQLReactSwiftTypeScript

Overview

The article discusses the development of an App Clip using React Native, highlighting the challenges and solutions encountered while adhering to the 10MB size limit. It outlines the innovative approach taken by Shopify to leverage React Native for building a lightweight app experience that enhances user engagement without requiring a full app download.

What You'll Learn

1

How to build an App Clip using React Native while adhering to size constraints

2

Why minimizing native dependencies is crucial for maintaining App Clip size

3

When to implement a fail-fast approach in software development projects

Prerequisites & Requirements

  • Understanding of React Native and mobile app development
  • Familiarity with iOS development and App Clip technology(optional)

Key Questions Answered

What is an App Clip and how does it function?
An App Clip is a lightweight version of an app that can be downloaded on-the-go, with a size limit of 10MB. Users can invoke it through actions like scanning a QR code or tapping a link, allowing for instant access to app features without the need for full app installation.
How did Shopify address the size limitation when building the App Clip?
Shopify tackled the size limitation by explicitly defining only the necessary native dependencies in the Podfile, which reduced the initial size from 28MB to 4.3MB. This careful management allowed them to build a functional App Clip while staying under the 10MB limit.
What challenges did Shopify face when sharing code between the App Clip and the Shop app?
Shopify found that sharing code between the App Clip and the Shop app introduced complexity that could risk exceeding the 10MB size limit. They decided to limit shared components to avoid impacting the main application and maintain developer autonomy.
How does the App Clip improve user experience for the Shop app?
The App Clip allows users to track their orders directly after purchase without needing to download the full Shop app, thus reducing drop-off rates in the user funnel and enhancing the overall shopping experience.

Key Statistics & Figures

App Clip size limit
10MB
The maximum size allowed for an App Clip to ensure a smooth download experience.
Final App Clip size
9.1MB
The size of the completed App Clip, just under the 10MB limit.
Initial App Clip size during testing
28MB
The size of the initial 'Hello World' App Clip before optimizing dependencies.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used to build the App Clip, allowing for cross-platform development.
Backend
Graphql
Utilized for network calls to fetch order data in the App Clip.

Key Actionable Insights

1
Explicitly define native dependencies in your Podfile to control app size.
This practice is essential when developing lightweight applications like App Clips, as it helps ensure that only necessary components are included, thus keeping the app size within limits.
2
Adopt a fail-fast approach when experimenting with new technologies.
This method allows teams to quickly validate ideas and pivot if necessary, which is particularly useful in projects involving untested technologies like App Clips.
3
Consider the user journey when designing app features.
By streamlining the transition from an App Clip to the full app, developers can enhance user retention and satisfaction, making it easier for users to engage with the app.

Common Pitfalls

1
Failing to manage native dependencies can lead to exceeding size limits.
This often occurs when developers rely on auto-linking, which may include unnecessary components that bloat the app size. Explicitly defining dependencies helps mitigate this risk.

Related Concepts

App Clips
React Native Development
Mobile User Experience Design