npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rn-parallax-view

v0.1.1

Published

A ScrollView-like component with parallax and sticky header support

Downloads

2

Readme

Rodrigocs - Animated Driver

This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by default it has Animated.ScrollView, also if you use FlatList or secontList, as the same as, you should use Animted.createAnimatedComponent() method to wrapper it.

Example

import ParallaxScrollView from 'rn-parallax-view';
import CustomScrollView from 'custom-scroll-view'

const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)

render() {
  return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      // renderScrollComponent={() => <Animated.View />}
      renderScrollComponent={() => <AnimatedCustomScrollView />}
      renderForeground={() => (
       <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Hello World!</Text>
        </View>
      )}>
      <View style={{ height: 500 }}>
        <Text>Scroll me</Text>
      </View>
    </ParallaxScrollView>
  );
}

rn-parallax-view

A ScrollView-like component that:

  • Has a parallax header
  • Has an optional sticky header
  • Is composable with any component that expects a ScrollView (e.g. ListView or InfiniteScrollView)
  • Can be nested within other views
  • Works on iOS and Android

Installation

$ npm install rn-parallax-view --save

Note: For React Native 0.19.0 and earlier, you'll want to use [email protected]. Version 0.18.0 changes the scrolling API to be compatible with React Native 0.20.0.

Demo

| iOS | Android | | -------------------------- | ------------------------------ | | | |

Basic Usage

import ParallaxScrollView from 'rn-parallax-view';

// Inside of a component's render() method:
render() {
  return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      renderForeground={() => (
       <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Hello World!</Text>
        </View>
      )}>
      <View style={{ height: 500 }}>
        <Text>Scroll me</Text>
      </View>
    </ParallaxScrollView>
  );
}

Examples

Please refer to the ListView example provided to see how ParallaxScrollView can be used in combination with ListView.

The Android ListView example shows how you can use PullToRefreshViewAndroid with ParallaxScrollView.

There are more examples in the examples folder.

Usage (API)

All of the properties of ScrollView are supported. Please refer to the ScrollView documentation for more detail.

The ParallaxScrollView component adds a few additional properties, as described below.

| Property | Type | Required | Description | | -------------------------- | -------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | backgroundColor | string | No | The color of the header background. Defaults to #000) | | backgroundScrollSpeed | number | No | The speed factor that the background moves at relative to the foreground. Defaults to 5. | | contentBackgroundColor | string | No | This is the background color of the content. (Defaults to '#fff') | | fadeOutForeground | bool | No | If true, the foreground will fade out as the user scrolls up. (Defaults to true) | | onChangeHeaderVisibility | func | No | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a boolean value to indicate whether header is visible or not. | | parallaxHeaderHeight | number | Yes | This is the height of parallax header. | | renderBackground | func | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using backgroundColor) | | renderContentBackground | func | No | This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visible View) | | renderFixedHeader | func | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You should set its height and width appropriately. | | renderForeground | func | No | only for ScrollView, This renders the foreground header that moves at same speed as scroll content. **if you want apply this effect to FlatList or SectionList, please pass this value to it's listHeaderComponent property ** | | renderScrollComponent | func | No | A function with input props and outputs an Animated.ScrollView-like component in which the content is rendered. This is useful if you want to provide your own scrollable component, remember however to make it an Animated component. (See: https://github.com/exponentjs/react-native-scrollable-mixin) (By default, returns a Animated.ScrollView with the given props) | | renderStickyHeader | func | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. | | stickyHeaderHeight | number | If renderStickyHeader is used | If renderStickyHeader is set, then its height must be specified. | | contentContainerStyle | object | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for ScrollView) | | outputScaleValue | number | No | The value for the scale interpolation output value, default 5 | | scrollEvent | func | No | Callback to recieve the animated scroll event values |

Latest changes

0.1.0

  • fix renderScrollComponent not apply flatlist

Contributing

I welcome contributions! Please open an issues if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)