rn-pull-to-refresh
pull-to-refresh component for rn
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.
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.
Where it fits
- Add a pull-to-refresh gesture to a React Native scrollable list that works natively on Android and iOS.
- Upgrade an older React Native app to use Fabric's new architecture without losing pull-to-refresh support.
- Show a custom branded loading spinner instead of the default indicator when the user pulls down to refresh.
- Add a load-more footer that automatically triggers data fetching when the user reaches the bottom of a list.