Skip to content

A React Native component to add custom button for scrolling back to top

License

Notifications You must be signed in to change notification settings

rizalibnu/react-native-scroll-up

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

About

A React Native component to add custom button for scrolling back to top

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published