react-native-scroll-up

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.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

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