react-native-scrolling-images

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.