react-native-scroll-up v0.1.6

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