1.0.0 • Published 2 years ago
react-native-colored-scrollbar v1.0.0
Simple, lightweight and easy to use custom scrollbar component. Pass the component customisable props and your content inside it.
Example
Install
npm install react-native-colored-scrollbar
Usage
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
import ScrollBar from 'react-native-colored-scrollbar';
import {styles,book} from './data';
export default function App() {
return (
<>
<View style={{flex: 1, paddingTop: 50, backgroundColor:'#28BFA7'}}>
<View style={{alignItems: 'center'}}>
<Text style={styles.header}>Colored Scroll Bar</Text>
</View>
<ScrollBar
indicatorBackground="#006064"
indicatorColor="#18FFFF"
persistent=true
style={{padding: 20, flex:1, backgroundColor:'#625554'}}>
<Text style={styles.title}>{book.title}</Text>
<Text style={styles.text}>{book.description}</Text>
</ScrollBar>
</View>
</>
);
}
Props
Common props you may want to specify include:
Prop | Description | Default |
---|---|---|
indicatorColor | Color of the scroll indicator | #CFD8DC |
indicatorBackground | Background color of the scroll indicator | #455A64 |
indicatorWidth | Width of the scroll indicator | 6 |
persistent | Causes the scrollbars not to turn transparent when they are not in use | false |
style | Style object of the ScrollView container | null |
License
MIT Licensed. Copyright © Or Fayne 2021.
1.0.0
2 years ago