• Stars
    star
    580
  • Rank 73,961 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Parallax effects for React Native using Animated API

react-native-parallax

NOTE: This module requires React Native 0.8+

Installation

npm install --save react-native-parallax

Usage

Note: Parallax.Image elements must be direct descendants of Parallax.ScrollView

var Parallax = require('react-native-parallax');

var ParallaxView = React.createClass({
  render: function() {
    return (
      <Parallax.ScrollView>
        <Parallax.Image
          style={{ height: 200 }}
          overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
          source={{ uri: 'http://loremflickr.com/640/480' }}
        >
          <Text>This is optional overlay content</Text>
        </Parallax.Image>
      </Parallax.ScrollView>
    );
  },
});

Parallax.ScrollView Properties

Any ScrollView property and the following:

Prop Description Default
scrollViewComponent What underlying component to compose around, must be ScrollView compatible. ScrollView

Parallax.Image Properties

Any Image property and the following:

Prop Description Default
onPress Fired when element is tapped. None
imageStyle Optional image style, width and height styles are set automatically. None
overlayStyle Optional overlay style, might be useful if you want a shaded background for better readability. None
parallaxFactor The speed of the parallax effect. Larger values require taller images or they will be zoomed in. 0.2

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson

More Repositories

1

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
JavaScript
17,222
star
2

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
JavaScript
9,663
star
3

react-native-progress

Progress indicators and spinners for React Native
JavaScript
3,577
star
4

react-native-keychain

🔑 Keychain Access for React Native
Java
3,046
star
5

hush

🤫 Noiseless Browsing – Content Blocker for Safari
JavaScript
3,017
star
6

react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
JavaScript
2,805
star
7

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
JavaScript
2,404
star
8

loki

👁 Visual Regression Testing for Storybook
JavaScript
1,729
star
9

react-native-image-progress

Progress indicator for networked images in React Native
JavaScript
1,701
star
10

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
JavaScript
1,485
star
11

react-native-performance

📐 Monitor and measure React Native performance
TypeScript
864
star
12

react-native-store-review

Rate on App/Play Store directly in your React Native app
Java
717
star
13

react-native-shimmer

Simple shimmering effect for any view in React Native
Java
662
star
14

react-native-esbuild

Fast bundler and dev server for react-native using esbuild
JavaScript
571
star
15

react-native-vector-image

iOS/Android native vector assets generated from SVG
JavaScript
290
star
16

react-native-pinchable

Instagram like pinch to zoom for React Native
Java
217
star
17

angular-parallax

Lightweight & performant parallax scrolling for angular.js.
JavaScript
203
star
18

angular-lazytube

Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.
JavaScript
46
star
19

diglett

Keep your JS project lean by detecting duplicate dependencies
JavaScript
44
star
20

esbuild-server

Fast, lightweight and powerful development server for esbuild
TypeScript
31
star
21

oblador.github.io

Landing page for my GitHub projects
HTML
10
star
22

oblador

5
star
23

node-cloud-imager

Powerful yet simple way to apply filters/crop/resize images and upload to cloud providers (Amazon S3, Rackspace, Azure).
JavaScript
3
star
24

node-ups-sdk

JavaScript
3
star
25

.github

1
star
26

react-native-fabric-image-unicode-issue

TypeScript
1
star