``markdown


React Native Scroll Indicator Always

![npm version](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.

Installation

Make sure you have 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

$3

`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(null);
const [result, setResult] = React.useState();

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

return (


Result: {result}
style={{ width: '100%', height: 400, backgroundColor: 'tomato' }}
/>

style={{ width: '100%', height: 400, backgroundColor: 'green' }}
/>
style={{ width: '100%', height: 400, backgroundColor: 'yellow' }}
/>


);
}

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

$3

`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(null);

return (


This is a sample ScrollView with an always visible scroll indicator.
{/ Your ScrollView content here /}


);
}

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

$3

`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(null);

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

return (
ref={scr}
data={data}
keyExtractor={(item) => item}
renderItem={({ item }) => (

{item}

)}
/>
);
}

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