https://github.com/riamon-v/react-native-anchrable-scrollview
A simple component that allow you to put anchors inside any children of a scrollview to directly go to its position.
https://github.com/riamon-v/react-native-anchrable-scrollview
anchors anchors-inside anchorscroll react-native scrollview
Last synced: 5 months ago
JSON representation
A simple component that allow you to put anchors inside any children of a scrollview to directly go to its position.
- Host: GitHub
- URL: https://github.com/riamon-v/react-native-anchrable-scrollview
- Owner: riamon-v
- License: mit
- Created: 2021-02-10T09:40:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-21T11:21:15.000Z (over 5 years ago)
- Last Synced: 2025-09-16T22:44:39.160Z (10 months ago)
- Topics: anchors, anchors-inside, anchorscroll, react-native, scrollview
- Language: TypeScript
- Homepage:
- Size: 689 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-anchrable-scrollview
* * *
A simple component that allow you to put anchors inside any children of a scrollview to directly go to its position.
* Each component accepts props of the initial react-native component
* Typescript support
Works for both **Android & IOS**
NOT WORKING IN WEB
##[View demo on snack.expo.io](https://snack.expo.io/@riamon-v/react-native-anchrable-scrollview)
## Installation
If using yarn:
```shell
$ yarn add react-native-anchrable-scrollview
```
If using npm:
```shell
$ npm i react-native-anchrable-scrollview
```
---
## List of components
* `AnchrableScrollView` which is a component based on react-native Scrollview that calculates positions of Anchors inside and provide a `goToAnchor`function
* `Anchor`which is a component base on react-native View component
* `HeaderAnchors` which is a horizontal scrollview including buttons for each anchor inside the AnchrableScrollView
---
## Usage
``` javascript
import AnchrableScrollView, { Anchor } from 'react-native-anchrable-scrollview'
```
Wrap all your anchors component inside one top parent `AnchrableScrollView` component, and give a name to each anchor.
The `AnchrableScrollView` component will look for all `Anchors` components inside itself recursively.
Then you can put an anchor whereever you want in the component tree, as long as the top parent is an `AnchrableScrollView`
##### Basic Usage
* Create a ref for the scrollView
* Create an array of refs for the anchors
* useCallback on the provided function goToAnchor
``` js
function App() {
// Ref of the scrollView
const ref = React.useRef();
//Array representing anchors
const anchorsRef = [
{name: "#1", label: "My first section", ref: React.createRef()},
{name: "#2", label: "Second veryyyyyyyy long section", ref: React.createRef()},
{name: "#3", label: "Third section", ref: React.createRef()}
]
const goToAnchor = React.useCallback(name => ref.current?.goToAnchor?.(name), [ref?.current])
return (
goToAnchor("#1")} title={anchorsRef[0].label}/>
goToAnchor("#2")} title={anchorsRef[1].label}/>
goToAnchor("#3")} title={anchorsRef[2].label}/>
);
}
```
##### Better Usage
* Map throw the anchorsRef array to make section with anchors.
* Use [`HeaderAnchors`](#HeaderAnchors) component to have as many buttons as anchors
``` javascript
import AnchrableScrollView, { Anchor, HeaderAnchors } from 'react-native-anchrable-scrollview'
function App() {
const ref = React.useRef();
const anchorsRef = [
{name: "#1", label: "My first section", ref: React.createRef()},
{name: "#2", label: "Second veryyyyyyyy long section", ref: React.createRef()}
]
const anchor = {name: "#3", label: "Third section", ref: React.createRef()}
const goToAnchor = React.useCallback(name => ref.current?.goToAnchor?.(name), [ref?.current])
return (
{
anchorsRef.map((e, index) => (
{e.label}
Here I am
Here I am
))
}
);
}
```
---
## Documentation
#### AnchrableScrollView
> PROPS
| Name | Description | Details | Type |
|------|-------------|---------|------|
| ref | Ref of the container: React.useRef() | *required* | React.RefObject |
| children | Children pass inside the scrollview | *required* | React.ReactNode |
| Accepts any props of the [`ScrollView` Component](https://reactnative.dev/docs/scrollview#props) of react-native|
|---|
> REF METHODS
| Name | Description | Details |
|------|-------------|---------|
| goToAnchor | function provided to move to a specific anchor specifying the name | **params:** anchorName |
| The ref contains the reference of the actual scrollView |
|---|
| You can access all [method of standard ScrollView](https://reactnative.dev/docs/scrollview#methods) with
`ref?.current?._scrollView?.current.method`|
#### Anchor
> PROPS
| Name | Description | Details | Type |
|------|-------------|---------|------|
| name | Name to identify the anchor | *required* | string |
| ref | Ref of the container: React.createRef() | *required* | React.RefObject |
| children | Children pass inside the view | *not required* | React.ReactNode |
#### HeaderAnchors
> PROPS
| Name | Description | Details | Type |
|------|-------------|---------|------|
| anchors | Array of anchors declared above | *required* | array |
| goToAnchor | callback to specify how to go to an anchor | *required* | Func |
| tagStyle | Button container style | *optional* | any |
| tagTextStyle | Style of the text inside a button | *optional* | any |
| Accepts any props of the [`ScrollView` Component](https://reactnative.dev/docs/scrollview#props) of react-native|
|---|
#### useAnchorsMeasurements
This hook will provide you the set of measurements for Each anchors. It will return a Map with:
* `key`: the name of the anchor
* `value`: the measurement of that anchor (x, y, height, width)
**Basic Usage**
``` javascript
const { children } = props
const _scrollView = React.useRef(null)
const anchorsMeasurements = useAnchorsMeasurements(children, _scrollView, [])
```
> PARAMS
| Name | Description | Details | Type |
|------|-------------|---------|------|
| children | The childrens you want to look for `Anchors` | *required* | React.ReactNode |
| parentContainer | The very top container which is the scrollView | *required* | React.RefObject |
| deps | dependencies to recalculates measurements when deps are changing | *optional* | any |
---
### Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
Keep it simple. Keep it minimal. Don't put every single feature just because you can.
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
---
### Authors or Acknowledgments
* Vincent Riamon
### License
This project is licensed under the MIT License