react-native-scroll-up
A React Native component to add custom button for scrolling back to top
Install
npm install react-native-scroll-up
or
yarn add react-native-scroll-up
Preview
Demo
https://snack.expo.io/@rizalibnu/react-native-scroll-up-example
Example
Basic Example
import React from 'react';import ScrollView View Text from 'react-native';import ScrollUp from 'react-native-scroll-up'; const data = Array; Component state = visible: false ; { const offsetY = eventnativeEventcontentOffsety; if offsetY > 50 this; else this; }; { return <React.Fragment> <ScrollView = => data </ScrollView> <ScrollUp ="ScrollView" = = ="image" /> </React.Fragment> ; } ;
Image Example
import arrowUpImage from '../../assets/image.png'; <ScrollUp ="ScrollView" = ="image" =/>
Text Example
<ScrollUp ="ScrollView" = ="text" ="scroll to top" = ="#fff" ="#dd0000"/>
Custom Icon Example
import Icon from 'react-native-vector-icons/Feather'; <ScrollUp ="ScrollView" = ="icon" = ="#dd0000"/>
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
root | React.Ref | required | pass a ref of the root view | |
refView | string | required | type of your scrollable view. choose one of ListView , ScrollView , FlatList , SectionList |
|
type | string | required | type of your button component. choose one of image , text , icon |
|
visible | boolean | Yes | true | is button visible. you can use this for example button will visible when scroll offset Y more than 50, else button will not visible |
icon | React.Element | Yes | null | custom icon button, if type is icon . you can use this to put custom component |
right | number | Yes | 30 | distance from the right |
bottom | number | Yes | 30 | distance from the bottom |
width | number | Yes | 40 | width of the button and the image if you have |
height | number | Yes | 40 | height of the button and the image if you have |
radius | boolean | Yes | true | is a round view |
borderRadius | number | Yes | 50 | border radius of the button |
backgroundColor | string | Yes | 'transparent' | background color of the button, |
text | string | Yes | Scroll Up | custom text button, if type is text |
fontSize | number | Yes | 12 | font size of the text button, if type is text |
color | string | Yes | #fff |
color of the text button, if type is text |
customTextStyle | Object | Yes | {} | custom stylesheet of the text button, if type is text |
image | Object | Yes | { uri : a base64 image } | source of your image button, if type is image |
customImageStyle | string | Yes | {} | custom stylesheet of your image button, if type is image |