React Native Quick Scroll

Introduction

react-native-quick-scroll is a npm package that provides a quick scroll functionality for React Native applications. It allows users to quickly scroll to specific sections of a scrollable view with just a single tap.

Features

• Quick scroll functionality in React Native
• Easy integration into existing projects
• Supports both iOS and Android platforms

Installation

Install react-native-quick-scroll using npm or yarn:

npm install react-native-quick-scroll

or

yarn add react-native-quick-scroll

Usage

1. Import the QuickScroll component from react-native-quick-scroll:

import QuickScroll from 'react-native-quick-scroll';

2. Wrap your scrollable content with the QuickScroll component:

<QuickScroll>
  {/* Your scrollable content */}
</QuickScroll>

3. Add quick scroll buttons to your desired sections:

<QuickScroll>
  <QuickScroll.Section
    title="Section 1"
    onPress={() => console.log('Clicked Section 1')}
  >
    {/* Content for Section 1 */}
  </QuickScroll.Section>
  
  <QuickScroll.Section
    title="Section 2"
    onPress={() => console.log('Clicked Section 2')}
  >
    {/* Content for Section 2 */}
  </QuickScroll.Section>

  {/* Add more sections as needed */}
</QuickScroll>

Props

QuickScroll props

| Prop | Type | Description | | ------------------- | -------- | ----------------------------------------------- | | children | node | The content to be scrollable | | scrollContainerStyle| object | Style object for the scroll container | | buttonContainerStyle| object | Style object for the button container | | buttonStyle | object | Style object for the quick scroll buttons | | buttonTextStyle | object | Style object for the text inside buttons |

QuickScroll.Section props

| Prop | Type | Description | | ------------------- | -------- | ------------------------------------------------ | | title | string | The title or label for the section | | onPress | function | The function to be called when section is tapped | | buttonStyle | object | Style object for the quick scroll button | | buttonTextStyle | object | Style object for the text inside button |

Example

Here's an example of using react-native-quick-scroll in a React Native application:

import React from 'react';
import { View, ScrollView, Text, StyleSheet } from 'react-native';
import QuickScroll from 'react-native-quick-scroll';

const App = () => {
  return (
    <View style={styles.container}>
      <QuickScroll
        scrollContainerStyle={styles.scrollContainer}
        buttonStyle={styles.button}
        buttonTextStyle={styles.buttonText}
      >
        <QuickScroll.Section
          title="Section 1"
          onPress={() => console.log('Clicked Section 1')}
          buttonStyle={styles.sectionButton}
          buttonTextStyle={styles.sectionButtonText}
        >
          <Text style={styles.sectionContent}>
            Content for Section 1
          </Text>
        </QuickScroll.Section>

        <QuickScroll.Section
          title="Section 2"
          onPress={() => console.log('Clicked Section 2')}
          buttonStyle={styles.sectionButton}
          buttonTextStyle={styles.sectionButtonText}
        >
          <Text style={styles.sectionContent}>
            Content for Section 2
          </Text>
        </QuickScroll.Section>

        {/* Add more sections as needed */}
      </QuickScroll>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scrollContainer: {
    flexGrow: 1,
    paddingTop: 20,
    paddingHorizontal: 10,
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#007bff',
    borderRadius: 5,
    paddingVertical: 5,
    paddingHorizontal: 10,
    marginVertical: 5,
  },
  buttonText: {
    fontSize: 16,
    color: '#fff',
  },
  sectionButton: {
    backgroundColor: '#ccc',
    marginVertical: 10,
  },
  sectionButtonText: {
    color: '#000',
  },
  sectionContent: {
    paddingVertical: 20,
    paddingHorizontal: 10,
    backgroundColor: '#f0f0f0',
  },
});

export default App;

Conclusion

react-native-quick-scroll is a powerful npm package that simplifies the implementation of quick scroll functionality in React Native applications. With its easy integration and customizable components, developers can improve the user experience of their scrollable views by enabling quick navigation to specific sections.