3.0.2 • Published 5 months ago
react-native-indicate v3.0.2
react-native-indicate
Enhanced ScrollView with elements indicating scrollable overflow.
Installation
npm i react-native-indicateUsage
import React from 'react'
import { Text } from 'react-native'
import Indicate from 'react-native-indicate'
export () =>
<Indicate>
<Text>Hello Plugin</Text>
</Indicate>Options
By default scrolling is enabled for both directions (horizontal and vertical) if there is overflow. The behaviour of Indicate can further be configured with the following props.
| Prop | Description | Default | Type |
|---|---|---|---|
| horizontal | Allow horizontal scrolling. | true | boolean |
| vertical | Allow vertical scrolling. | true | boolean |
| fadeWidth | Width of the fade effect used to indicate overflow. | 20 | number |
| appearanceOffset | In this range scrollable overflow will be ignored. | 10 | number |
| wrapperStyle | Added to the wrapping SafeAreaView component. | null | StyleProp |
| style | Styles added to the ScrollView. | null | StyleProp |
| innerViewStyle | Styles added to the inner ScrollView (both directions). | null | StyleProp |
| contentContainerStyle | Passed to the ScrollView as well. | null | StyleProp |
| gradient | Imported image representing a gradient for the left element. | null | string, ImageSourcePropType |
| any | All other props passed will be passed down to the ScrollView. | null | ScrollViewProps |
If you need the gradient colored differently, pass a PNG with height 1 pixel and width matching the fadeWidth as the gradient prop. Same format as would be passed to this: <Image source={require('../gradient.png')} />. Support for react-native-linear-gradient (which requires native dependencies) is planned.