React-native-scroll-up-container NPM

React Native Scroll Up

React native scroll up container is a react native component with scroll up animation, you will see an example below.

Default

With Children

Installation

Before you install this package, this package requires react-native-gesture-handler and react-native-reanimated packages.

  npm i react-native-gesture-handler react-native-reanimated

After that you can install this package.

  npm i react-native-scroll-up-container

Usage/Examples

import React from 'react'
import { View } from 'react-native'
import SwipeContainer from 'react-native-scroll-up-container'

function App() {
  return <SwipeContainer 
    useLine
    containerStyle={{
      flex:1
    }}
    translateY={300}
    overValue={50}
    topComponent={
      <View style={{
        flex:1,
        backgroundColor:'blue'
      }}>
      </View>
    }
    limitTopValue={50}
    limitBottomValue={250}
  >
    <View style={{
      height:800,
      width:'100%',
      backgroundColor:'red
    }}>
    </View>
  </SwipeContainer>
}

Props

Prop	Type	Description
`useLine`	`Boolean`	Optional, Default: True. Use default line for bottom component
`containerStyle`	`Object`	Optional. For customize container style
`translateY`	`Number`	Optional, Default: 300. Position translateY of bottom component
`overValue`	`Number`	Optional, Default: 50. Over height value for top component
`limitTopValue`	`Number`	Optional, Default: 50. Limit top value for animate spring
`limitBottomValue`	`Number`	Optional, Default: 250. Limit bottom value for animate spring
`topComponent`	`Component`	For customize top component of container
`children`	`Component`	For customize children of container