React Native Scroll Up

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

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

Contributing

• Fork it ( https://github.com/jfalih/react-native-scroll-up-container/fork )
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create a new Pull Request

License

MIT

Authors

• @jfalih