# react-native-scroll-indicator-always

> scroll indicator show always

Latest version **0.3.5** (published 2024-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-scroll-indicator-always
pnpm add react-native-scroll-indicator-always
yarn add react-native-scroll-indicator-always
bun add react-native-scroll-indicator-always
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2024-03-12 |
| First published | 2023-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 18.0.0 |
| Dependencies | 2 |
| Unpacked size | 120.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | jeetesh |
| Maintainers | jks_js |
| Keywords | react-native, ios, android, react-native-gesture-handler, react-native-scroll-indicator-always |

## Links

- npm: https://www.npmjs.com/package/react-native-scroll-indicator-always
- Repository: https://github.com/jeeteshshaw/react-native-scroll-indicator-always
- Homepage: https://github.com/jeeteshshaw/react-native-scroll-indicator-always#readme
- Issues: https://github.com/jeeteshshaw/react-native-scroll-indicator-always/issues
- npm.io page: https://npm.io/package/react-native-scroll-indicator-always

## Dependencies (2)

- [react-native-safe-area-context](https://npm.io/package/react-native-safe-area-context.md) ^4.7.4
- [react-native-keyboard-aware-scroll-view](https://npm.io/package/react-native-keyboard-aware-scroll-view.md) ^0.9.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.3.5 (latest) — 2024-03-12
- 0.3.4 — 2023-12-12
- 0.3.3 — 2023-12-11
- 0.3.2 — 2023-12-04
- 0.3.1 — 2023-12-04
- 0.3.0 — 2023-12-03
- 0.2.7 — 2023-11-23
- 0.2.6 — 2023-11-23
- 0.2.5 — 2023-11-21
- 0.2.4 — 2023-11-17
- 0.2.3 — 2023-11-16
- 0.2.2 — 2023-11-16
- 0.2.1 — 2023-11-16
- 0.1.4 — 2023-11-16
- 0.1.3 — 2023-11-15
- … 3 more at https://npm.io/package/react-native-scroll-indicator-always/versions

## README

```markdown
# React Native Scroll Indicator Always

[![npm version](https://badge.fury.io/js/react-native-scroll-indicator-always.svg)](https://badge.fury.io/js/react-native-scroll-indicator-always)

A React Native package that provides an always visible scroll indicator for ScrollView and FlatList components, built on top of [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view).

## Installation

Make sure you have [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) installed. If not, you can install it using:

```bash
npm install react-native-keyboard-aware-scroll-view
```

Now, install the scroll indicator package:

```bash
npm install react-native-scroll-indicator-always
```

or

```bash
yarn add react-native-scroll-indicator-always
```

## Usage

### Example 1: Using KeyboardAwareScrollView with ScrollView and FlatList

```jsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
  FlatList,
  ScrollView,
  KeyboardAwareScrollView,
  KeyboardAwareScrollViewProps,
} from 'react-native-scroll-indicator-always';
import { KeyboardAwareScrollView as KeyboardAwareScrollViewRef } from 'react-native-keyboard-aware-scroll-view';

export default function App() {
  const scr = React.useRef<KeyboardAwareScrollViewRef>(null);
  const [result, setResult] = React.useState<number | undefined>();

  React.useEffect(() => {
    setTimeout(() => {
      console.log("scr1", scr.current);
    }, 1000);
  }, []);

  return (
    <KeyboardAwareScrollView ref={scr} scrollEventThrottle={60}>
      <View style={styles.container}>
        <Text>Result: {result}</Text>
        <View
          style={{ width: '100%', height: 400, backgroundColor: 'tomato' }}
        />
        <View style={{ width: '100%', height: 400, backgroundColor: 'blue' }} />
        <View
          style={{ width: '100%', height: 400, backgroundColor: 'green' }}
        />
        <View
          style={{ width: '100%', height: 400, backgroundColor: 'yellow' }}
        />
      </View>
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});
```

### Example 2: Using Only ScrollView

```jsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { ScrollView, KeyboardAwareScrollViewProps } from 'react-native-scroll-indicator-always';

export default function App() {
  const scr = React.useRef<KeyboardAwareScrollViewProps>(null);

  return (
    <ScrollView ref={scr} scrollEventThrottle={60}>
      <View style={styles.container}>
        <Text>This is a sample ScrollView with an always visible scroll indicator.</Text>
        {/* Your ScrollView content here */}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

### Example 3: Using Only FlatList

```jsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatList, KeyboardAwareScrollViewProps } from 'react-native-scroll-indicator-always';

export default function App() {
  const scr = React.useRef<KeyboardAwareScrollViewProps>(null);

  const data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  return (
    <FlatList
      ref={scr}
      data={data}
      keyExtractor={(item) => item}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});
```

---
_Source: https://npm.io/package/react-native-scroll-indicator-always · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._