https://github.com/hikouki/react-native-use-scroll-indicator

React hooks for ScrollView indicator of react-native.
https://github.com/hikouki/react-native-use-scroll-indicator

indicator react-native scroll

Last synced: 12 days ago
JSON representation

React hooks for ScrollView indicator of react-native.

• Host: GitHub
• URL: https://github.com/hikouki/react-native-use-scroll-indicator
• Owner: hikouki
• License: mit
• Created: 2022-01-28T02:55:07.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-31T02:08:09.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T10:03:00.710Z (8 months ago)
• Topics: indicator, react-native, scroll
• Language: TypeScript
• Homepage:
• Size: 1.02 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-use-scroll-indicator

React hooks for ScrollView indicator of react-native.

## Installation

```

npm install react-native-use-scroll-indicator

```

## Usage

Horizontal Indicator.

```tsx

import React from 'react';

import {Animated} from 'react-native';

import {HorizontalScrollIndicator} from 'react-native-use-scroll-indicator';

export default function Screen() {

  ...

  return (

    

      {({ref, onLayout, onContentSizeChange, onScroll}) => (

        

      )}

    

  );

}

```

Vertical Indicator.

```tsx

import React from 'react';

import {Animated} from 'react-native';

import {VerticalScrollIndicator} from 'react-native-use-scroll-indicator';

export default function Screen() {

  ...

  return (

    

      {({ref, onLayout, onContentSizeChange, onScroll}) => (

        

      )}

    

  );

}

```

Without Component.

```tsx

import React from 'react';

import {View, Animated} from 'react-native';

import {useScrollIndicator} from react-native-use-scroll-indicator';

export default function Screen() {

  const {moveX, indicator, viewportSize, onLayout, onContentSizeChange, onScroll} =

    useScrollIndicator();

  const scale = 0.8;

  return (

    

      

      

        

      

    

  );

}

```

## Interface

### HorizontalScrollIndicator

| Prop                    | Required | Type                  |

|-------------------------|:--------:|-----------------------|

| children                |    ☑️     | Function              |

| containerStyle          |          | StyleProp\ |

| indicatorContainerStyle |          | StyleProp\ |

| indicatorStyle          |          | StyleProp\ |

| scale                   |          | number                |

### VerticalScrollIndicator

| Prop                    | Required | Type                  |

|-------------------------|:--------:|-----------------------|

| children                |    ☑️     | Function              |

| containerStyle          |          | StyleProp\ |

| indicatorContainerStyle |          | StyleProp\ |

| indicatorStyle          |          | StyleProp\ |

| scale                   |          | number                |

## LICENSE

MIT