#fade styling

Author: mak12

README.md

@@ -29,6 +29,10 @@ This library accepts all the props of [ScrollView](https://reactnative.dev/docs/
 | allowDivider          | Allow divider at fade end.      | false    | Boolean.  |
 | isRtl          | For RTL Layouts      | false    | Boolean.  |
 
+### Styling
+For styling pass these props.
+
+`startFadeStyle`, `endFadeStyle` and `dividerStyle`.
 
 ### Events
 | Name                      | Callback param                              | Description     |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-faded-scrollview",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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": {

src/index.js

@@ -82,13 +82,13 @@ export default class RNFadedScrollView extends Component {
         return (this.props.horizontal ?
             <LinearGradient
                 start={{ x: this.props.isRtl ? 0 : 1, y: 0 }} end={{ x: this.props.isRtl ? 1 : 0, y: 0 }}
-                style={{ position: 'absolute', start: 0, width: this.props.fadeSize, height: '100%' }}
+                style={[{ position: 'absolute', start: 0, width: this.props.fadeSize, height: '100%' }, this.props.startFadeStyle]}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
             /> :
             <LinearGradient
                 start={{ x: 0, y: 1 }} end={{ x: 0, y: 0 }}
-                style={{ position: 'absolute', top: 0, width: '100%', height: this.props.fadeSize }}
+                style={[{ position: 'absolute', top: 0, width: '100%', height: this.props.fadeSize }, this.props.startFadeStyle]}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
             />
@@ -99,14 +99,14 @@ export default class RNFadedScrollView extends Component {
         return (this.props.horizontal ?
             <LinearGradient
                 start={{ x: this.props.isRtl ? 1 : 0, y: 0 }} end={{ x: this.props.isRtl ? 0 : 1, y: 0 }}
-                style={{ position: 'absolute', end: 0, width: this.props.fadeSize, height: '100%' }}
+                style={[{ position: 'absolute', end: 0, width: this.props.fadeSize, height: '100%' }, this.props.endFadeStyle]}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
             />
             :
             <LinearGradient
                 start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }}
-                style={{ position: 'absolute', bottom: 0, width: '100%', height: this.props.fadeSize }}
+                style={[{ position: 'absolute', bottom: 0, width: '100%', height: this.props.fadeSize }, this.props.endFadeStyle]}
                 colors={this.props.fadeColors}
                 pointerEvents={'none'}
             />)