Nil Packet Minimizer

    react-native-scroll-view

    0.1.0 • Public • Published

    react-native-scroll-view

    The (Parallax) ScrollView component we all deserve. :rocket:

    Demo

    Demo gif

    Installation

    Install the package using yarn or npm:

    yarn add react-native-scroll-view or npm i react-native-scroll-view

    Usage

    import ParallaxScrollView from 'react-native-scroll-view';
     
    <ParallaxScrollView />
     
    <ParallaxScrollView
      windowHeight={SCREEN_HEIGHT * 0.4}
      backgroundSource='http://i.imgur.com/UyjQBkJ.png'
      navBarTitle='John Oliver'
      userName='John Oliver'
      userTitle='Comedian'
      userImage='http://i.imgur.com/RQ1iLOs.jpg'
      leftIcon={{name: 'rocket', color: 'rgba(131, 175, 41, 1)', size: 30, type: 'font-awesome'}}
      rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
    />
     
     
    <ParallaxScrollView
      windowHeight={SCREEN_HEIGHT * 0.4}
      backgroundSource='http://i.imgur.com/UyjQBkJ.png'
      navBarTitle='John Oliver'
      userName='John Oliver'
      userTitle='Comedian'
      userImage='http://i.imgur.com/RQ1iLOs.jpg'
      leftIcon={{name: 'rocket', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
      rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}
    >
      <ScrollView style={{flex: 1, backgroundColor: 'rgba(228, 117, 125, 1)'}}>
        <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 32, color: 'white'}}>Custom view</Text>
        </View>
        <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 32, color: 'white'}}>keep going.</Text>
        </View>
        <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 32, color: 'white'}}>keep going..</Text>
        </View>
        <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 32, color: 'white'}}>keep going...</Text>
        </View>
        <View style={{height: 300, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 32, color: 'white'}}>the end! :)</Text>
        </View>
      </ScrollView>
    </ParallaxScrollView>

    API

    prop default type description
    backgroundSource http://i.imgur.com/6Iej2c3.png string The background image for the header (url)
    windowHeight SCREEN_HEIGHT * 0.5 number The height of the header window
    navBarTitle Katy Friedson string The title to be display on the NavBar header
    userName Katy Friedson string The user name displayed in the collapsable header view
    userImage http://i.imgur.com/uma9OfG.jpg string The user image displayed in the collapsable header view
    userTitle Engineering Manager string The user title displayed in the collapsable header view
    headerView Profile View custom object Pass in a custom object to override the default header view
    leftIcon menu object Pass in the left icon name and type as an object. leftIcon={{name: 'rocket', color: 'red', size: 30, type: 'font-awesome'}}
    rightIcon present object Pass in the right icon name and type etc as an object. rightIcon={{name: 'user', color: 'blue', size: 30, type: 'font-awesome'}}
    children List View React Components Render any react views/components as children and these will be rendered below the headerView

    Try it out

    You can try it out with Exponent here.

    Example

    Look at the example folder to run the expo app locally.

    Motivation

    There are a couple packages that provide a similar parallax scroll view component (here and here) although both of them are not maintained.

    I really liked react-native-parallax-view but here are a couple reasons I didn't use it in my app:

    1. It was not maintained hence I knew submitting an issue on it would go nowhere
    2. It didn't have a Sticky NavBar when scrolling (similar to Spotify/ ReactConf'17 app)

    So I set out to create a Parallax ScrollView component (using react-native-parallax-view as a base) with

    1. Sticky NavBar Header 🎉
    2. An awesome default component that just works out of the box (<ParallaxScrollView />)
    3. Flexible and comprehensive API to build your own custom use case on it

    aka it's a (Parallax) ScrollView component for React Native that we truly deserve 🚀

    Feedback

    This repo is being actively manitained. Feel free to open a new Issue with a Feature Request or submit a PR with an Enhancement.

    Install

    npm i react-native-scroll-view

    DownloadsWeekly Downloads

    16

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • monte9