Skip to content

lelandrichardson/react-native-parallax-view

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 12, 2015 14:44
May 7, 2015 20:47
October 20, 2015 10:24
May 7, 2015 22:02
June 9, 2016 18:00

react-native-parallax-view

Parallax view for vertical scrollview with a header image and header content

Installation

$ npm i react-native-parallax-view --save

Demo

parallax view demo

NOTE: I will put up an rnplay.org working example whenever they support React Native 0.8.0

Example

There is a working example in the project /example folder that you can check out. Remember to run npm install inside the example folder if you'd like to run that project.

cd react-native-parallax-view
cd example
npm install

Additionally, here is an example of the usage

<ParallaxView
    backgroundSource={require('image!backgroundImage')}
    windowHeight={300}
    header={(
        <Text style={styles.header}>
            Header Content
        </Text>
    )}
    scrollableViewStyle={{ backgroundColor: 'red' }}
>
  <View>
    // ... scrollview content
  </View>
</ParallaxView>

API (props)

Prop Required Default Type Description
backgroundSource YES null object the source prop that get's passed to the background <Image> component. If left blank, no background is rendered
header NO null renderable any content you want to render on top of the image. This content's opacity get's animated down as the scrollview scrolls up. (optional)
windowHeight NO 300 number the resting height of the header image. If 0 is passed in, the background is not rendered.
scrollableViewStyle NO null object this style will be mixed (overriding existing fields) with scrollable view style (view which is scrolled over the background)
... NO ...ScrollViewProps {...this.props} is applied on the internal ScrollView (excluding the style prop which is passed on to the outer container)

About

Parallax view for vertical scrollview/listviews with a header image and header content

Resources

License

Stars

Watchers

Forks

Packages

No packages published