react-native-swiper-parallax v0.1.0
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 |
5 years ago