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