react-native-indicate
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

React Native Indicate Preview

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.

Package Sidebar

Install

npm i react-native-indicate

Weekly Downloads

1

Version

3.0.2

License

MIT

Unpacked Size

29.7 kB

Total Files

8

Last publish

Collaborators

  • naminho
  • tobua