1.0.0 • Published 2 years ago

react-native-colored-scrollbar v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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:

PropDescriptionDefault
indicatorColorColor of the scroll indicator#CFD8DC
indicatorBackgroundBackground color of the scroll indicator#455A64
indicatorWidthWidth of the scroll indicator6
persistentCauses the scrollbars not to turn transparent when they are not in usefalse
styleStyle object of the ScrollView containernull

License

MIT Licensed. Copyright © Or Fayne 2021.