react-native-scrolling-images

1.0.6 • Public • Published

react-native-scrolling-images

npm version MIT license

Easily create looping scrolling images for backgrounds and parallax.

Features

  • Supports scrolling in the up, down, left and right directions
  • Custom scrolling speed
  • Takes in an array of images to repeat
  • Repeats image components automaticlly to fill the screen
  • Smooth animations
  • Lightweight
  • Compatible with Expo

Demo

Link to live demo

Scrolling Up Scrolling Down Scrolling Left Scrolling Right

Installation

To install the latest version of react-native-scrolling-images run:

npm install react-native-scrolling-images

Quick Start

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

import ScrollingBackground from 'react-native-scrolling-images';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollingBackground
          style={styles.scrollingBackground}
          speed={20}
          direction={"left"}
          images={[require("./assets/greenOrange.png"),require("./assets/blueOrange.png")]}
          useNativeDriver={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: "100%"
  },
  scrollingBackground: {
    backgroundColor: "#0B7483"
  },
});

API Reference

Properties

Prop Description Accepted Values Required
speed Duration it takes for the images to repeat (The lower the faster the animation). Number Yes
direction Direction of scrolling. "up", "down", "left" or "right" Yes
images Images stiched together to create the looping pattern. Array of image references (Check quick start section for example). Yes
useNativeDriver Specify if the animation should perform natively. Boolean (Defaults to false). No

Styling

The only styling property used is 'backgroundColor'. This helps default to a background color in case the image doesn't load instantly.

To-Do

  • Auto rotating images when direction is "left" or "right". If the user picks one of these optinos currently, they might have to rotate the actual images manually depending on how they want them displayed.
  • Figure out why there is slight delay on animation loop when Native Driver is enabled. When Native Driver is set to true for the current animations, there is a slight pause after the second animation.

Package Sidebar

Install

npm i react-native-scrolling-images

Weekly Downloads

51

Version

1.0.6

License

MIT

Unpacked Size

4.41 MB

Total Files

8

Last publish

Collaborators

  • andreyonadam