React-native-swiper: Move the dots to another position?

[itinance]

I would like to move the dots, which represents each slide, to another position.

Is this possible? And if yes, how? :)

[hossammourad]

@itinance Yes you can but you will have to modify the library itself, the code that is responsible for the position of the dots is located at

react-native-swiper/src/index.js

then search for pagination_x and pagination_y

[unicornRainbows]

Aweness people!

Just use
paginationStyle={}

<Swiper scrollEnabled={true} ref={component => (this.swiper = component)} onIndexChanged={index => { this.swiperIndexChanged(index); }} onScrollBeginDrag={(e, state, context) => { console.log('onScrollBeginDrag'); //this.refs.myViewToAni.transitionTo({ top: Metrics.screenHeight*0.5,left: -Metrics.screenWidth*0.5}) }} dotStyle={{ backgroundColor: Colors.brightBlue, width: 5, height: 5, borderRadius: 3, marginLeft: 4, marginRight: 4, marginBottom: Metrics.marginEverywhere * 1.5, }} activeDotStyle={{ backgroundColor: Colors.brightBlue, width: 15, height: 5, borderRadius: 3, marginLeft: 4, marginRight: 4, marginBottom: Metrics.marginEverywhere * 1.5, }} removeClippedSubviews={false} loop={false} style={styles.wrapper} showsButtons={false} paginationStyle={{ position: 'absolute', backgroundColor: 'transparent', bottom: 0, left: 0, alignSelf: 'flex-end', justifyContent: 'flex-start', paddingLeft: Metrics.marginDouble, width: Metrics.screenWidth, }} > </Swiper>

Spreading some lovin! <3

[saifbinabdulkarim]

I used paginationStyle={} to move dots top right corner of screen and it works for me.

loop={false}
paginationStyle={{
position: 'absolute',
top: 0,
right: 0,
bottom: height * 0.955,
left: 265,
}}>

....