react-native-swiper-parallax

Swiper parallax

react-native-swiper-parallax is a swiper component for React Native featuring paging and an optional parallax effect. Compatible with Android & iOS.

Getting started

npm install react-native-swiper-parallax --save

Usage

Content and delayed content are being passed as render props.

import Slider from 'react-native-swiper-parallax';

class MyComponent extends Component {
  renderContent = content => {
    return (
      <Content>
        <Text>content</Text>
      </Content>
    );
  };

  renderDelayedContent = content => {
    return (
      <DelayedContent>
        <Text>{content.title}</Text>
      </DelayedContent>
    );
  };

  render() {
    return (
      <Slider
        slides={slides}
        renderContent={this.renderContent}
        renderDelayedContent={this.renderDelayedContent}
        delayFactor={0.3}
        triggeringThreshold={0}>
        {(slideCount, currentIndex, nextIndex, requestSlideIndex) => (
          <Fragment>
            <PagingContainer>
              <Paging
                slideCount={slideCount}
                currentSlideIndex={currentIndex}
                currentControlColor={colors.mainOrange}
                defaultControlColor="rgba(46, 43, 43, 0.25)"
              />
            </PagingContainer>

            <BottomBar
              swipe={() => requestSlideIndex(currentIndex, currentIndex + 1)}
            />
          </Fragment>
        )}
      </Slider>
    );
  }
}

In depth

The Slider component is using React context api. It has a provider and every child which uses the HOC withSliderContext has access to the Slider store which is shown below.

const SliderContext = createContext({
  currentIndex: null,
  nextIndex: null,
  setCurrentIndex: () => {},
  setNextIndex: () => {},
  slideCount: null,
});

The Slider itself is inside the provider and has therefore access to an action which sets the next index before the animation is triggered. The Paging component while being connected to the Slider store is aware of any index change in real time. Slider has a shouldComponentUpdate method which prevents the component from re rendering when the nextIndex is set:

shouldComponentUpdate(nextProps: OwnProps) {
		return this.props.nextIndex === nextProps.nextIndex;
}

Props

Props	Params	Returns	Description
slides	content delayedContent	none	Array of slides with a content and a delayed content
renderContent	content	jsx	Render all slides main content
renderDelayedContent	content	jsx	Render all slides delayed content for parallax effect
delayFactor	none	none	Number to delay the sliding animation

OwnProps (withSliderContext HOC)

OwnProps	Params	Returns	Description
currentIndex	none	none	Slider current index
nextIndex	none	none	Slider next index before animation is triggered
setCurrentIndex	index	none	Set current index
setNextIndex	index	none	Set next index
slideCount	none	none	Number of slides