explaingit

huolalatech/rn-pull-to-refresh

14C++Audience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A React Native component that adds native pull-to-refresh and load-more interactions on Android, iOS, and HarmonyOS, with support for React Native's new Fabric architecture.

Mindmap

mindmap
  root((rn-pull-to-refresh))
    What it does
      Pull to refresh gesture
      Load more footer
      Custom UI headers
    Platforms
      Android
      iOS
      HarmonyOS
    Tech Stack
      React Native
      C++
      SmartRefreshLayout
      MJRefresh
    Audience
      Mobile developers
      React Native teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a pull-to-refresh gesture to a React Native scrollable list that works natively on Android and iOS.

USE CASE 2

Upgrade an older React Native app to use Fabric's new architecture without losing pull-to-refresh support.

USE CASE 3

Show a custom branded loading spinner instead of the default indicator when the user pulls down to refresh.

USE CASE 4

Add a load-more footer that automatically triggers data fetching when the user reaches the bottom of a list.

Tech stack

React NativeC++JavaScriptAndroidiOSHarmonyOS

Getting it running

Difficulty · easy Time to first run · 30min

iOS requires a pod install step after npm install, Android links automatically.

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

rn-pull-to-refresh is a mobile component library that adds a pull-to-refresh interaction to React Native apps. When a user pulls down on a scrollable list, the app shows a loading indicator and fetches fresh content. This library handles that gesture natively on Android, iOS, and HarmonyOS (Huawei's mobile platform), rather than relying on JavaScript-only animations that can conflict with the platform's native scroll behavior. The library is a fork of an existing open-source component called react-native-troika. The main addition is support for React Native's New Architecture, also called Fabric. React Native has been gradually introducing a new rendering system that runs more work natively rather than over a JavaScript bridge. Many older pull-to-refresh libraries do not support it, forcing teams to either stay on the old architecture or switch to heavier alternatives that require upgrading React Native to version 0.74 or above. This library adds Fabric support while keeping compatibility with older React Native versions (0.67 and above). On Android, the native implementation uses a library called SmartRefreshLayout. On iOS it uses MJRefresh. Both are widely adopted native components in their respective ecosystems that handle the visual animation and physics of the pull gesture. On HarmonyOS, the library integrates through native C++ code. Beyond pull-to-refresh, the library also supports a load-more footer at the bottom of a list, which triggers when a user scrolls to the end. Both the header and footer can be replaced with your own custom UI components. Installation is one command using npm or yarn, and it links automatically to native Android code. iOS requires one additional pod install step. The library is MIT licensed and credits the original react-native-troika project for the base implementation.

Copy-paste prompts

Prompt 1
I have a React Native FlatList with data fetched from an API. Show me how to add pull-to-refresh using rn-pull-to-refresh that works on both iOS and Android.
Prompt 2
My React Native app is migrating to the New Architecture (Fabric). Show me how to configure rn-pull-to-refresh to support Fabric without upgrading to React Native 0.74.
Prompt 3
I want a custom animated loading header instead of the default spinner in rn-pull-to-refresh. Write a custom header component and show me how to pass it to the library.
Prompt 4
Show me how to implement infinite scroll using rn-pull-to-refresh's load-more footer that fetches the next page when the user scrolls to the bottom.
Open on GitHub → Explain another repo

← huolalatech on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.