react-native-scroll-up

Install

npm install react-native-scroll-up

yarn add react-native-scroll-up

Preview

Demo

Example

Basic Example

import React from 'react';
import { ScrollView, View, Text } from 'react-native';
import ScrollUp from 'react-native-scroll-up';
const data = Array.from(Array(20));
class App extends React.Component {
 state = {
 visible: false,
 };
 handleOnScroll = event => {
 const offsetY = event.nativeEvent.contentOffset.y;
 if (offsetY > 50) {
 this.setState({
 visible: true,
 });
 } else {
 this.setState({
 visible: false,
 });
 }
 };
 render() {
 return (
 <React.Fragment>
 <ScrollView
 ref={scrollview => {
 this.scrollview = scrollview;
 }}
 onScroll={event => this.handleOnScroll(event)}>
 {data.map((item, index) => (
 <View
 style={{
 height: 200,
 backgroundColor: 'purple',
 justifyContent: 'center',
 }}>
 <Text
 style={{
 marginTop: 100,
 textAlign: 'center',
 fontWeight: 'bold',
 fontSize: 20,
 color: 'white',
 }}>
 scrollview component {index}
 </Text>
 </View>
 ))}
 </ScrollView>
 <ScrollUp
 refView="ScrollView"
 root={this.scrollview}
 visible={this.state.visible}
 type="image"
 />
 </React.Fragment>
 );
 }
}
export default App;

Image Example

import arrowUpImage from '../../assets/image.png';
<ScrollUp
 refView="ScrollView"
 root={this.scrollview}
 type="image"
 image={arrowUpImage}
/>

Text Example

<ScrollUp
 refView="ScrollView"
 root={this.scrollview}
 type="text"
 text="scroll to top"
 fontSize={14}
 color="#fff"
 backgroundColor="#dd0000"
/>

Custom Icon Example

import Icon from 'react-native-vector-icons/Feather';
<ScrollUp
 refView="ScrollView"
 root={this.scrollview}
 type="icon"
 icon={<Icon name="arrow-up" size={24} style={{ color: '#fff' }} />}
 backgroundColor="#dd0000"
/>

Props