/

Coinbase Pull to Refresh

A visually engaging, animated pull-to-refresh wallet interface for React Native. This component provides a custom refresh control that displays a smoothly animated, flowing gradient bar, enhancing the user experience of a typical wallet or transaction history screen.

Features

  • Custom Pull-to-Refresh Animation: Replaces the standard RefreshControl with a beautiful, custom animation.
  • Flowing Gradient Bar: On refresh, a multi-colored gradient bar appears and its colors flow horizontally in a seamless loop.
  • Smooth Transitions: The gradient bar animates its height and opacity for a smooth appearance and disappearance.
  • Modern UI: A clean, modern wallet UI layout with a header, balance display, action buttons, and a tabbed view.
  • Grouped Transactions: Automatically groups a list of transactions by date.
  • Customizable: Easily change colors, animation timings, and data.
  • Iconography: Utilizes @expo/vector-icons for clear and scalable icons.
  • Safe Area Handling: Uses react-native-safe-area-context to ensure the UI renders correctly on all devices, including those with notches.

Dependencies

Before using this component, ensure you have the following packages installed in your React Native project:

  • @expo/vector-icons (If not using Expo, you can use react-native-vector-icons)
  • react-native-safe-area-context

Installation & Usage

  1. Copy the WalletRefresh.tsx file (the code you provided) into your components directory.

  2. Ensure you have the required dependencies installed. If not:

  3. Import and use the component in your app:

Customization

This component is designed to be easily customized.

1. Colors

The flowing gradient bar's colors can be changed by modifying the colorGradients array. Each inner array represents a gradient group, and these are flattened to create the seamless colorBlocks.

2. Animation Behavior

Animation timings, heights, and other parameters can be tuned in the ANIMATION_CONFIG object.

3. Transaction Data

The component uses a static transactions array. In a real application, you would fetch this data from an API and ensure it conforms to the Transaction interface.

How It Works

The animation is orchestrated using React Native's Animated API within the onRefresh callback.

  1. State: The refreshing state, when true, triggers the RefreshControl.
  2. onRefresh Callback:
    • Sets refreshing to true.
    • Starts a parallel animation to expand the gradient bar's height (gradientHeightAnimation) and fade it in (gradientOpacityAnimation).
    • Initiates a looping animation for the horizontal movement (gradientMoveAnimation). This animation translates the colorBlocksContainer from right to left, and because the visual blocks are rendered twice, it creates a seamless, infinite loop.
  3. Exit Animation:
    • A setTimeout based on REFRESH_DURATION sets refreshing to false.
    • It then runs another parallel animation to collapse the bar's height and fade it out.
    • The looping movement animation is stopped after the collapse animation is complete to prevent it from running in the background.