Swiper Animated
May 06, 2023
1 min
The best Swiper component for React Native.
npm i react-native-swiper --save
or
npm i --save react-native-swiper@next
import React, { Component } from 'react' import { Text, View, Image, Dimensions } from 'react-native' import Swiper from 'react-native-swiper' const { width } = Dimensions.get('window') const styles = { wrapper: {}, slide: { flex: 1, justifyContent: 'center', backgroundColor: 'transparent' }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold' }, image: { width, flex: 1 }, paginationStyle: { position: 'absolute', bottom: 10, right: 10 }, paginationText: { color: 'white', fontSize: 20 } } const renderPagination = (index, total, context) => { return ( <View style={styles.paginationStyle}> <Text style={{ color: 'grey' }}> <Text style={styles.paginationText}>{index + 1}</Text>/{total} </Text> </View> ) } export default class extends Component { render() { return ( <Swiper style={styles.wrapper} renderPagination={renderPagination} loop={false} > <View style={styles.slide} title={ <Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text> } > <Image style={styles.image} source={require('./assets/1.jpg')} /> </View> <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>} > <Image style={styles.image} source={require('./assets/2.jpg')} /> </View> <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>} > <Image style={styles.image} source={require('./assets/3.jpg')} /> </View> <View style={styles.slide} title={ <Text numberOfLines={1}>Learn from Kim K to land that job</Text> } > <Image style={styles.image} source={require('./assets/4.jpg')} /> </View> </Swiper> ) } }
Quick Links
Legal Stuff