SwiftScrollAnim

A React Native reproduction of an iOS banking app scroll animation, originally shared on Twitter by @musabalfawal.

About

This project is a reproduction attempt of a beautiful scroll animation that features a dynamic credit card UI that morphs and interacts with the iPhone's Dynamic Island. The animation is specifically designed for iPhone 16, as it utilizes the bezel area of the Dynamic Island to create seamless transitions.

Built with:

• React Native via Expo
• Reanimated 4 for smooth, performant animations
• Expo Router for navigation
• TypeScript for type safety

Project Structure

SwiftScrollAnim/
├── app/                      # Expo Router screens
│   └── HomeScreen.tsx        # Main screen with scroll animation
├── components/               # Reusable UI components
│   ├── action-buttons.tsx    # Action buttons (Send, Request, More)
│   ├── credit-card.tsx       # Animated credit card component
│   ├── dynamic-island.tsx    # Dynamic Island integration
│   ├── send-to-content.tsx   # Send money modal content
│   ├── title-text.tsx        # Title text component
│   ├── top-navigation.tsx    # Top navigation bar
│   ├── top-section.tsx       # Top section with card and actions
│   ├── transaction-list.tsx  # Scrollable transaction list
│   └── ui/                   # Base UI components
│       ├── collapsible.tsx   # Collapsible component
│       └── icon-symbol.tsx   # Icon symbol components
├── constants/                # App constants
│   ├── mockData.ts          # Mock transaction data
│   ├── screen.ts            # Screen dimensions and constants
│   └── theme.ts             # Theme colors and styles
└── hooks/                    # Custom React hooks
    ├── use-color-scheme.ts   # Color scheme hook
    └── use-theme-color.ts    # Theme color hook

Features

• 🎨 Smooth scroll-driven animations
• 💳 Credit card that morphs into the Dynamic Island
• 📱 Optimized for iPhone 16 Dynamic Island
• 🔄 Interactive transaction list
• 🎭 Beautiful UI with modern design patterns
• ⚡ 60 FPS animations using Reanimated Worklets
• 🫧 Metaball (gooey/liquid) effect for seamless UI transitions

How the Metaball Effect Works

The metaball effect creates a liquid, organic merging animation between the SendTo bubble and the Dynamic Island as you scroll. This "gooey" effect is achieved using a clever combination of blur and color matrix transformations.

Technical Implementation

The effect is implemented in components/metaball-effect.tsx using React Native Skia. Here's how it works:

1. Two Rounded Rectangles: We render two black rounded rectangles that match the exact shape and position of the Dynamic Island and SendTo bubble

   • Dynamic Island: Fixed height (37px), animated width, border radius 20
   • SendTo Bubble: Fully animated height, width, border radius, and position

2. Layer Effects Group: Both rectangles are wrapped in a Skia <Group> with special layer effects:

   <Group layer={
     <Paint>
       <Blur blur={10} />
       <ColorMatrix matrix={[
         1, 0, 0, 0, 0,
         0, 1, 0, 0, 0,
         0, 0, 1, 0, 0,
         0, 0, 0, 18, -7  // Magic happens here
       ]} />
     </Paint>
   }>

3. The Magic Formula:

   • Blur: First, we apply a 10px Gaussian blur to the shapes, creating soft edges
   • Color Matrix: Then we apply a color matrix that manipulates the alpha channel:
     • Multiply alpha by 18 (makes edges very opaque)
     • Subtract 7 (creates hard cutoff)

   This combination creates sharp edges from blurred shapes, and when two shapes overlap, their blurred regions combine before the threshold is applied, creating that smooth, liquid merging effect.

4. Real-time Synchronization: The rectangles track the animated properties from top-section.tsx using useDerivedValue and interpolate, ensuring they perfectly overlay the actual UI elements throughout the entire scroll animation.

Why This Works

The metaball effect is essentially a threshold operation on blurred shapes:

• When shapes are far apart: blur + threshold gives clean, separate shapes
• When shapes get close: blurred edges start to overlap
• When overlapping: the combined blur values exceed the threshold, creating a bridge
• Result: Shapes appear to merge like liquid droplets! 💧

This technique is commonly used in graphics programming and game development to create organic, fluid effects without complex physics simulations.

Get started

1. Install dependencies

   npm install

2. Start the app

   npx expo start

In the output, you'll find options to open the app in a

• development build
• iOS simulator (Recommended - iPhone 16 Pro)
• Expo Go

Note: For the best experience, run this on an iPhone 16 Pro simulator or device, as the animation is designed around the Dynamic Island dimensions.

Credits

Original animation design by @musabalfawal - View original post

Learn More

To learn more about the technologies used in this project:

• Expo documentation - Learn about Expo fundamentals
• React Native Reanimated - Animation library documentation
• Expo Router - File-based routing for React Native

Author

Abijah Kajabika

• GitHub: @AbijahKaj
• Repository: react-native-SwiftScrollAnim