1.0.2 • Published 6 months ago

rn-collapsing-image-scrollview v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
6 months ago
  • A collapsing image by scrollview's scroll Y.

  • It comes with a built-in TypeScript typings and is compatible with all popular JavaScript frameworks. You can use it directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

Example:

npm.io npm.io

How to use:

  <CollapsingScroll
      scrollProps={{ contentContainerStyle: { paddingBottom: 16 } }}
      onClickBack={onclickBack}
      showBackButton
      image={() => (
        <Image
          style={{ width: '100%', height: '100%' }}
          source={require('@equalbill/assets/images/friends.png')}
        />
      )}
    >
     <>
        <View style={{ height: 100, width: '100%', backgroundColor: 'pink', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'yellow', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'blue', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'red', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'blue', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'purple', marginBottom: 20 }} />
        <View style={{ height: 100, width: '100%', backgroundColor: 'black', marginBottom: 20 }} />
      </>
    </CollapsingScroll>

CollapsingScroll Props -

NameTypeDefault
image() => JSX.Element
imageStyleViewStyle
imageBackStyleViewStyle
conainerStyleViewStyle
scrollStyleViewStyle
scrollPropsScrollViewProps
dataContainerStyleViewStyle
showBackButtonboolean
backButton() => JSX.Element
onClickBack() => void
imageHeightnumber
childrenany