1.0.1 • Published 3 years ago

native-agreement v1.0.1

Weekly downloads
4
License
MIT
Repository
github
Last release
3 years ago

native-agreement

NPM version NPM downloads NPM license run in expo snack Codecov Travis

About

React Native component that allows display different footer based on scroll position of content section e.g.: if you want to display agreement you will be able to render different button or disable it until user read (scroll to bottom) section with the contract.

How to Install

First, install the library in your project by npm:

$ npm install native-agreement

Or Yarn:

$ yarn add native-agreement

Options

Props extends ViewProps

NameTypeDescription
renderHeader(read: boolean) => React.ReactNodeFunction to render component inside the header
renderContent(read: boolean) => React.ReactNodeFunction to render component inside the scroll section
renderFooter(read: boolean) => React.ReactNodeFunction to render component inside the footer
headerComponentReact.ReactNodeComponent to be rendered inside the header
contentComponentReact.ReactNodeComponent to be rendered inside the scroll section
headerPropsViewPropsProps for the header
contentPropsScrollViewPropsProps for the scroll section
footerPropsViewPropsProps for the footer
onRead() => voidCallback on agreement read
onReadChange(read: boolean) => voidCallback on read value change
isReadbooleanSet and reset read value from outside the component

Example

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import NativeAgreement from 'native-agreement'

const App = () => {
  const [agreed, setAgreed] = useState(false)

  const headerRenderer = () => (
    <View>
      <Text>Agreement</Text>
    </View>
  )

  return (
    <NativeAgreement
      renderHeader={headerRenderer}
      contentComponent={<Text>Very long text here...</Text>}
      renderFooter={(read) => (
        <Button onPress={() => setAgreed(true)} disabled={!read}>
          Agree
        </Button>
      )}
    />
  )
}

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada