react-native-scrolling-images v1.0.6

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

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.