#updated docs

#new version with minor changes

Author: Malik Kawee

.npmignore

@@ -5,5 +5,8 @@ npm-debug.log
 # Dependency directory
 node_modules
 
+#assets for readme
+assets
+
 # Runtime data
 tmp

README.md

@@ -1,7 +1,21 @@
 # rn-faded-scrollview
 A simple and customisable React Native component that allows you to add fade effect in ScrollView at both ends.
 
+Vertical Scroll             |  Horizontal Scroll
+:-------------------------:|:-------------------------:
+![](assets/vertical.gif) | ![](assets/horizontal.gif)
+
 ## Installation
 This library relies on [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient). Follow setup instructions of linear gradient.
 
-And now finally Run `npm install rn-faded-scrollview` in your project directory.
+And now finally Run `npm install rn-faded-scrollview` in your project directory.
+
+## Documentation
+This library accepts all the props of [ScrollView](https://reactnative.dev/docs/scrollview) and some additional props.
+### Props
+| Name                      | Description                              | Default     | Type    |
+|---------------------------|------------------------------------------|-------------|---------|
+| allowStartFade               | Add fade at the start of ScrollView  | false           | Boolean  |
+| allowEndFade               | Add fade at the end of ScrollView      | true       | Boolean  |
+| fadeSize | Fade size i.e( width incase of horizontal and height incase of vertical ScrollView) | 20     | Number  |
+| fadeColors          | Colors for fade effect        | ['rgba(229, 229, 229, 0.18)', 'rgba(206, 201, 201, 0.6)', 'rgba(206, 201, 201, 0.9)']     | Array  |

assets/horizontal.gif

@@ -1,6 +1,6 @@
 {
   "name": "rn-faded-scrollview",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A simple and customizable React Native component that allows you to add fade effect in ScrollView at both ends.",
   "main": "src/index.js",
   "scripts": {
@@ -13,6 +13,8 @@
   "keywords": [
     "react-native",
     "scrollview",
+    "scrollview faded",
+    "faded scrollview",
     "fadedscrollview",
     "faded",
     "rn-faded-scrollview",
@@ -27,10 +29,11 @@
   "homepage": "https://github.com/mak12/rn-faded-scrollview#readme",
   "peerDependencies": {
     "react": "16.11.0",
-    "react-native": "0.62.2",
+    "react-native": "0.62.2"
+  },
+  "dependencies": {
     "react-native-linear-gradient": "^2.5.6"
   },
-  "dependencies": {},
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.59.0"
   }

assets/vertical.gif

@@ -31,13 +31,13 @@ export default class RNFadedScrollView extends Component {
     }
 
     isEndFadeAllowed() {
-        const sizeToCompare = this.props.isHorizontal ? this.state.scrollWidth : this.state.scrollHeight;
-        const availableSpace = this.props.isHorizontal ? this.state.availableWidth : this.state.availableHeight;
+        const sizeToCompare = this.props.horizontal ? this.state.scrollWidth : this.state.scrollHeight;
+        const availableSpace = this.props.horizontal ? this.state.availableWidth : this.state.availableHeight;
         return this.props.allowEndFade ? sizeToCompare > availableSpace : false;
     }
 
     ifCloseToStart({ layoutMeasurement, contentOffset, contentSize }) {
-        return this.props.isHorizontal ? contentOffset.x < 10 : contentOffset.y < 10;
+        return this.props.horizontal ? contentOffset.x < 10 : contentOffset.y < 10;
     }
     isCloseToBottom({ layoutMeasurement, contentOffset, contentSize }) {
         return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
@@ -61,7 +61,7 @@ export default class RNFadedScrollView extends Component {
 
     //get start fade view
     getStartFaade() {
-        return (this.props.isHorizontal ?
+        return (this.props.horizontal ?
             <LinearGradient
                 start={{ x: 1, y: 0 }} end={{ x: 0, y: 0 }}
                 style={{ position: 'absolute', start: 0, width: this.props.fadeSize, height: '100%' }}
@@ -78,7 +78,7 @@ export default class RNFadedScrollView extends Component {
     }
 
     getEndFade() {
-        return (this.props.isHorizontal ?
+        return (this.props.horizontal ?
             <LinearGradient
                 start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                 style={{ position: 'absolute', end: 0, width: this.props.fadeSize, height: '100%' }}
@@ -97,12 +97,11 @@ export default class RNFadedScrollView extends Component {
     render() {
         const endFadeEnable = this.isEndFadeAllowed();
         return (
-            <View style={[styles.container, { flexDirection: this.props.isHorizontal ? "row" : "column" }]}
+            <View style={[styles.container, { flexDirection: this.props.horizontal ? "row" : "column" }]}
                 onLayout={this._onLayout.bind(this)}>
                 <ScrollView
                     {...this.props}
                     style={[styles.scrollViewStyle, this.props.style]}
-                    horizontal={this.props.isHorizontal}
                     onContentSizeChange={this.onContentSizeChange}
                     scrollEventThrottle={16}
                     onScroll={this.onScrolled}
@@ -128,14 +127,12 @@ const styles = StyleSheet.create({
     }
 });
 RNFadedScrollView.propTypes = {
-    isHorizontal: PropTypes.bool,
     allowStartFade: PropTypes.bool,
     allowEndFade: PropTypes.bool,
     fadeSize: PropTypes.number,
     fadeColors: PropTypes.array,
 }
 RNFadedScrollView.defaultProps = {
-    isHorizontal: false,
     allowStartFade: false,
     allowEndFade: true,
     fadeSize: 20,