Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/native-ly/native-agreement
✅ Make sure the user has read the agreement
https://github.com/native-ly/native-agreement
agree agreement android component confirm content contract expo ios mobile policy position react react-native read scroll web
Last synced: 15 days ago
JSON representation
✅ Make sure the user has read the agreement
- Host: GitHub
- URL: https://github.com/native-ly/native-agreement
- Owner: native-ly
- License: mit
- Created: 2020-11-15T16:39:44.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-03T15:05:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-08T16:38:38.475Z (about 1 month ago)
- Topics: agree, agreement, android, component, confirm, content, contract, expo, ios, mobile, policy, position, react, react-native, read, scroll, web
- Language: TypeScript
- Homepage: https://snack.expo.io/@jbiesiada/native-agreement
- Size: 2.99 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [Native Agreement](https://github.com/native-ly/native-agreement)
[](https://www.npmjs.com/package/native-agreement)
[](https://www.npmjs.com/package/native-agreement)
[](https://www.npmjs.com/package/native-agreement)
[](https://snack.expo.io/@jbiesiada/native-agreement)
[](https://codecov.io/gh/native-ly/native-agreement)
[](https://app.travis-ci.com/github/native-ly/native-agreement)
[](https://packagephobia.com/result?p=native-agreement)
## About
A React Native component that allows you to display different footers depending on the scroll position of the content section, e.g. if you want to display agreement, you will be able to render another button or disable it until the user read (scroll to bottom) the contract section.
## How to Install
First, install the library in your project by npm:
```sh
$ npm install native-agreement
```
Or Yarn:
```sh
$ yarn add native-agreement
```
## Getting Started
**Connect the library with the project using ES6 import:**
```js
import NativeAgreement from 'native-agreement'
```
## Options
Props extends [ViewProps](https://reactnative.dev/docs/view#props)
| Name | Type | Description |
| -------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------- |
| **renderHeader** | (read: boolean) => React.ReactNode | Function to render component inside the header |
| **renderContent** | (read: boolean) => React.ReactNode | Function to render component inside the scroll section |
| **renderFooter** | (read: boolean) => React.ReactNode | Function to render component inside the footer |
| **headerComponent** | React.ReactNode | Component to be rendered inside the header |
| **contentComponent** | React.ReactNode | Component to be rendered inside the scroll section |
| **children** | React.ReactNode | Children component to be rendered inside the scroll section |
| **headerProps** | [ViewProps](https://reactnative.dev/docs/view#props) | Props for the header |
| **contentProps** | [ScrollViewProps](https://reactnative.dev/docs/scrollview#props) | Props for the scroll section |
| **footerProps** | [ViewProps](https://reactnative.dev/docs/view#props) | Props for the footer |
| **onRead** | () => void | Callback on agreement read |
| **onReadChange** | (read: boolean) => void | Callback on read value change |
| **isRead** | boolean | Set and reset read value from outside the component |
## Example
```js
import React, { useState } from 'react'
import { View, Text, Button } from 'react-native'
import NativeAgreement from 'native-agreement'
const App = () => {
const [agreed, setAgreed] = useState(false)
const headerRenderer = () => (
Agreement
)
return (
Very long text here...}
renderFooter={(read) => (
setAgreed(true)} disabled={!read}>
Agree
)}
/>
)
}
export default App
```
## License
This project is licensed under the MIT License © 2020-present Jakub Biesiada