@arturmiglio/react-skroll NPM

This is a fork of react-skroll.

react-skroll

Uses react-spring for butter smooth enhanced scrolling experience

Install

npm install @arturmiglio/react-skroll --save

Demo

Codepen Demo

Usage

Functional Children Pattern

Most useful for simple scenarios when you only need the scroll inside the Scroller scope.

import { Scroller } from 'react-skroll'

const Demo = () => (
  <Scroller
    scrollRef={ref => this.scroll = ref}
    autoScroll={true}
    autoFrame={true}
  >
    {scroll =>
      <View>
        <Button
          title="1"
          onPress={() => scroll.scrollToNext()}
        />
      </View>
      <View>
        <Button
          title="2"
          onPress={() => scroll.scrollToNext()}
        />
      </View>
    }
  </Scroller>
)

Callback Pattern

Most useful for when you only need to read the scroll information

import { Scroller, scrollInitalState } from 'react-skroll'

class Demo extends Component {
  constructor() {
    super()

    this.state = {
      // recommend to use for first render
      scroll: scrollInitalState
    }
  }

  render() {
    return (
      <View>
        <Text>{this.State.scroll.position}</Text>

        <Scroller
          onScrollChange={scroll => this.setState({ scroll })}
        >
          <View>
            ...
          </View>
          <View>
            ...
          </View>
        </Scroller>
      </View>
    )
  }
}

Reference Pattern

Most useful for when you need scroll outside the Scroller scope, for example in a navigation bar.

import { Scroller } from 'react-skroll'

class Demo extends Component {
  constructor() {
    super()

    this.scroll = null
  }

  render() {
    return (
      <View>
        <Button
          title="Go to bottom"
          onPress={() => this.scroll.scrollToBottom()}
        />

        <Scroller
          scrollRef={ref => this.scroll = ref}
        >
          <View>
            ...
          </View>
          <View>
            ...
          </View>
        </Scroller>

        <Button
          title="Return to top"
          onPress={() => this.scroll.scrollToTop()}
        />
      </View>
    )
  }
}