Loading…
React Native
7 posts about React Native. Every summary links to the original.
Shopify ·
Management of Native Code and React Native at Shopify
Shopify’s Point of Sale team describes how its React Native strategy changed after limitations appeared in complex UI and background synchronization. The team kept complicated views in React Native, improving rendering with why-did-you-render, React DevTools Profiler, Application Performance Index measurements, memoization, lazy renders, and Reanimated 2 for drag-and-drop interactions. For background jobs, it built a native job manager with Kotlin Multiplatform Modules, sharing synchronization logic in common/ while isolating platform-specific file, database, networking, preferences, and threading code through libraries or wrappers and exposing it through React Native native modules. The resulting implementation shared approximately 95% of its code and reduced a medium-sized store’s initial sync from at least 30 seconds to 2–3 seconds, while the article notes KMM’s learning curve and recommends a separate library project for clearer boundaries and isolated sandbox testing.
2023-10-18Shopify ·
Tophatting in React Native
Shopify’s tophatting process manually verifies coworkers’ changes before pull requests are approved, but React Native reviews previously required saving work, switching branches, rebuilding, and loading the app. The new tool stores compressed JavaScript bundles and their assets in cloud storage when Shopify Build’s CI pipeline processes a React Native pull request. A backend service records metadata such as the app ID, commit SHA, and branch, generates signed URLs, and posts a pull-request comment with a QR code, bundle ID, and download link. A React Native component library handles deep links through a separate Tophat screen, confirms bundle metadata, downloads and decompresses the selected bundle, saves metadata locally, and restarts the app with it. The first iteration lets developers load peer changes within seconds, and almost all Shopify React Native projects now use the tool.
2023-10-18Shopify ·
5 Ways to Improve Your React Native Styling Workflow
Shop's React Native app began as Arrive's codebase, and its visual overhaul prompted a broader rethink of styling practices. The resulting open-source Restyle library organizes styling around a design system covering spacing, semantic colors, and typography, represented by a theme object that components receive through React's Context API. Reusable Box and Text components map props such as spacing, background color, and text variants to theme values, while responsive properties target predefined screen-size breakpoints and TypeScript restricts props to valid theme options with editor autocomplete. The stated result is a more enjoyable and efficient workflow: Restyle supported the transition from Arrive to Shop, enabled theme switching, helped tailor screens to device sizes, and made dark mode easy to add.
2023-10-18Shopify ·
A First Look at Reanimated 2
Reanimated 2 is presented as a new approach to building gestures and animations in React Native, replacing the declarative domain-specific language of Reanimated 1 with animation worklets. Worklets are JavaScript functions declared with the “worklet” directive that execute independently on the UI thread, can receive parameters, access JavaScript-thread constants, call other worklets synchronously, and invoke JavaScript-thread functions asynchronously. The API introduces five hooks for creating shared and derived values, handling gesture events, and assigning animated styles or properties; a drag example combines shared values, gesture context, and velocity-based decay. The article also describes a liquid-swipe example using bezier interpolation, gesture handling, and physics-based animation, and reports that the new design lowers the entry barrier, supports cases previously requiring the bridge, and improves initialization performance.
2023-10-18Shopify ·
Building Arrive's Confetti in React Native with Reanimated
Shopify rewrote its Arrive package-tracking app in React Native and launched it on Android, where the earlier iOS-only app’s delivery confetti needed a cross-platform implementation. Rather than duplicate the iOS CAEmitterLayer code in Java or Kotlin, the team implemented the effect in JavaScript with Reanimated, whose declarative instructions run animation computations on the native UI thread after setup. The walkthrough initializes 100 randomized confetti, animates position and three-dimensional rotation from randomized velocities, and uses delta time, a clock, staggered delays, and edge-bounce elasticity to shape their motion. It also adds two confetti cannons and 2-dimensional confetti, while leaving cleanup of images and animation stopping beyond the post’s scope. The resulting version is described as resembling the original while spreading confetti more uniformly and making it behave more like paper.
2023-10-18Shopify ·
Creating Native Components That Accept React Native Subviews
React Native’s standard native-module documentation does not explain how to reuse an existing native container while rendering React Native views inside it. This Android-focused Kotlin guide builds a native bottom-sheet component with a ViewGroupManager, inflating a CoordinatorLayout XML layout whose second child becomes the draggable sheet content. It overrides addView to place the first React Native child in the main container and subsequent content in the bottom sheet, then exposes the component through TypeScript with style and children props. A sheetState prop accepts collapsed or expanded, while BottomSheetBehaviour emits a BottomSheetStateChange event so native gestures update React state. The guide concludes that ViewGroupManager enables flexible React Native layouts around native functionality, while noting that platform parity remains important.
2023-10-18Shopify ·
React Native is the Future of Mobile at Shopify
Shopify is moving forward with React Native for new mobile apps after years of native development, driven by mobile purchasing volumes and a desire to consolidate iOS and Android work. It describes React Native as a framework that uses JavaScript and React’s declarative model to translate virtual DOM structures into native platform views through native bindings. Experiments with Arrive, Point of Sale, and Compass reported twice the productivity on Arrive, an estimated 80% code sharing target, and observed sharing of 95% for Arrive and 99% for Compass, while testing lowered the considered Android CPU threshold from 2GHz to 1.5GHz. The policy does not require rewriting existing native apps, leaves low-level libraries native and native hiring in place, and calls for dedicated React Native tooling, foundations, and open-source partnerships.
2023-10-18
