# react-native-anchrable-scrollview

> A simple scrollview where you can add anchors to go directly to the point the anchor is placed

Latest version **1.0.1** (published 2021-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-anchrable-scrollview
pnpm add react-native-anchrable-scrollview
yarn add react-native-anchrable-scrollview
bun add react-native-anchrable-scrollview
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-02-21 |
| First published | 2021-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Vincent Riamon |
| Maintainers | riamon-v |
| Keywords | component, mobile, ios, android, scrollview, anchors, anchrable, react-native, measurement, onLayout, scroll |

## Links

- npm: https://www.npmjs.com/package/react-native-anchrable-scrollview
- Repository: https://github.com/riamon-v/react-native-anchrable-scrollview
- Homepage: https://github.com/riamon-v/react-native-anchrable-scrollview#readme
- Issues: https://github.com/riamon-v/react-native-anchrable-scrollview/issues
- npm.io page: https://npm.io/package/react-native-anchrable-scrollview

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-native](https://npm.io/package/react-native.md) https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-02-21
- 1.0.0 — 2021-02-20

## 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**

<h4 style="color: red">NOT WORKING IN WEB</h4>

![](assets/Demo.gif)

##[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 (
    <View style={{marginTop: 50}}>
      <Button onPress={() => goToAnchor("#1")} title={anchorsRef[0].label}/>
      <Button onPress={() => goToAnchor("#2")} title={anchorsRef[1].label}/>
      <Button onPress={() => goToAnchor("#3")} title={anchorsRef[2].label}/>
      <AnchrableScrollView
        ref={ref}
      >
        <View>
         <Anchor name={anchorsRef[0].name} ref={anchorsRef[0].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/>
         <Anchor name={anchorsRef[1].name} ref={anchorsRef[1].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/>
         </View>
        <Anchor name={anchorsRef[2].name} ref={anchorsRef[2].ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/>
      </AnchrableScrollView>
    </View>
  );
}
```

##### 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 (
    <View style={{marginTop: 50}}>
    <HeaderAnchors 
      anchors={[...anchorsRef, anchor]}
      goToAnchor={goToAnchor}
    />
    <AnchrableScrollView
      ref={ref}
    >
      {
       anchorsRef.map((e, index) => (
          <View key={`${index}`}>
            <Anchor 
              ref={e.ref}
              name={e.name}
            >
              <Text>{e.label}</Text>
            </Anchor>
          <View style={{
            height: 700,
            borderWidth: 1,
            borderColor: 'red',
            justifyContent: 'space-between'
          }}>
            <Text>Here I am</Text>
            <Text>Here I am</Text>
          </View>
          </View>
        ))
      }
      <Anchor name={anchor.name} ref={anchor.ref} style={{height: 1000, borderWidth: 1, borderColor: 'green'}}/>
    </AnchrableScrollView>
    </View>
  );
}
```
---

<!-- ### Demo -> Show me what you got

[Link to your awesome Demo](#) 

[Another Link to your awesome Demo](#) -->


## Documentation

#### AnchrableScrollView

> PROPS

| Name | Description | Details | Type |
|------|-------------|---------|------|
| ref  | Ref of the container: React.useRef() | *required* | React.RefObject<ScrollView> |
| 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 <br> `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<View> |
| children | Children pass inside the view | *not required* | React.ReactNode |


#### HeaderAnchors

![](assets/HeaderComponent.gif)

> 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<ScrollView>(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

---
_Source: https://npm.io/package/react-native-anchrable-scrollview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._