Building App Clips with React Native
Article Summary
Sebastian Ekström from Shopify built something that shouldn't exist: a React Native App Clip under 10MB. The Shop app itself is 51MB, and React Native isn't exactly known for being lightweight.
Shopify's Shop team wanted to eliminate the friction between checkout and app installation using iOS App Clips. The challenge? App Clips have a strict 10MB size limit, and no one had successfully built one with React Native at scale before.
Key Takeaways
- Initial React Native 'Hello World' App Clip was 28MB, cut to 4.3MB by explicitly defining dependencies
- Code sharing with main app proved impossible due to hidden native dependencies adding 2.5MB+
- Final App Clip shipped at 9.1MB using duplicated code and technology-driven design decisions
- CI script automatically detects when shared components add new native dependencies
- Full production testing only possible after early release with beta flags
Shopify shipped a 9.1MB React Native App Clip by abandoning code sharing, explicitly managing every dependency, and letting technical constraints drive design decisions.
About This Article
Shopify noticed a lot of users dropping off between the checkout 'Thank you' page and Shop app installation. The app had a 4.8-star rating, but people didn't want to deal with the extra work of downloading it from the App Store.
Shopify added App Clip support using React Native's Linking module. Users could now scan QR codes or tap buttons right on the checkout page to access order tracking instantly, without needing to install the full app or go through onboarding.
With App Clips, users got push notifications for package tracking right after checkout. This removed friction from the conversion funnel and gave them immediate order visibility without requiring a full app installation.
