Swiper/react autoplay
react-native-web-swiperSimple swiper / slider. Works both on React-Native and React-Native-Web. Show DemoHybrid Snack: https://snack.expo.io/@oxyii/react-native-web-swiper Installation$ npm i react-native-web-swiper --save Usageimport React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-web-swiper';
const styles = StyleSheet.create({
container: {
flex: 1,
},
slideContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
slide1: {
backgroundColor: 'rgba(20,20,200,0.3)',
},
slide2: {
backgroundColor: 'rgba(20,200,20,0.3)',
},
slide3: {
backgroundColor: 'rgba(200,20,20,0.3)',
},
});
export default class Screen extends React.Component {
render() {
return (
<View style={styles.container}>
<Swiper>
<View style={[styles.slideContainer,styles.slide1]}>
<Text>Slide 1</Text>
</View>
<View style={[styles.slideContainer,styles.slide2]}>
<Text>Slide 2</Text>
</View>
<View style={[styles.slideContainer,styles.slide3]}>
<Text>Slide 3</Text>
</View>
</Swiper>
</View>
);
}
} With props<Swiper
vertical {/* slide up / down instead left / right */}
from={1} {/* initial slide is second */}
loop {/* back to first slide after last */}
timeout={2} {/* autoplay duration (2 secs) */}
springConfig={{ speed: 11 }} {/* RN Animated.spring config */}
minDistanceForAction={0.15} {/* Swipe less that 15% keep active slide */}
positionFixed {/* Fix mobile safari vertical bounces */}
controlsProps={{
DotComponent: ({ index, isActive, onPress }) => <Text onPress={onPress}>Your Custom Dot {index+1}</Text>
}}
>
<View style={{ flex: 1 }} /> {/* Slide 1 */}
<View style={{ flex: 1 }} /> {/* Slide 2 */}
{/* ... */}
</Swiper> Dynamic contentThe slide automatically gets props.activeIndex and props.index. import React from 'react';
import { Text, View } from 'react-native';
import Swiper from 'react-native-web-swiper';
type Props = {
index?: number,
activeIndex?: number,
}
export const SomeSlide = (props: Props) => (
<View>
<Text>{props.activeIndex}/{props.index}</Text>
</View>
)
export default () => (
<Swiper>
<SomeSlide />
<SomeSlide />
</Swiper>
) This is possible because Swiper used cloneElement and inject internally the activeIndex and index props to each slide. This also means that all slides will re-render on swipe, since the activeIndex prop value changes on swipe. Props
Controls PropsOver the swiper we need to create a controls layer. But this layer will block the possibility of swiper layer control. We created 9 controls placeholders to solve this problem: top-left, top, top-right, left, center, right, bottom-left, bottom and bottom-right. You can adjust controls position by placing into relevant placeholder: <Swiper
...
controlsProps={{
prevTitle: 'prev button title',
nextTitle: 'next button title',
dotsTouchable: true, {/* touch over dot will make swiper move to rel slide */}
dotsPos: 'top',
prevPos: false, {/* hide prev button */}
nextPos: 'top-right',
cellsStyle: {
'top': { padding: 5, backgroundColor: 'rgba(0, 0, 0, .3)' },
'top-left': { /* any custom placeholder style */ },
},
cellsContent: {
'bottom-right':
Interaction methodsStore a reference to the Swiper in your component by using the ref prop provided by React (see docs): const swiperRef = useRef(null);
...
<Swiper
ref={swiperRef}
...
/> Then you can manually trigger swiper from anywhere: () => {
swiperRef.current.goTo(1);
swiperRef.current.goToPrev();
swiperRef.current.goToNext();
const index = swiperRef.current.getActiveIndex();
}; |