react-native-indicate

Enhanced ScrollView with elements indicating scrollable overflow.

Installation

npm i react-native-indicate

Usage

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.