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

##View demo on snack.expo.io

Installation

If using yarn:

$ yarn add react-native-anchrable-scrollview

If using npm:

$ 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 goToAnchorfunction
• Anchorwhich is a component base on react-native View component
• HeaderAnchors which is a horizontal scrollview including buttons for each anchor inside the AnchrableScrollView

Usage

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

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 component to have as many buttons as anchors

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>
  );
}

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

    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