How to change the default position of React Native Swiper dots?

Question

I'm using this RN package https://reactnativeexample.com/swiper-slider-for-react-native-and-react-native-web/

I'm trying to move the pagination dots up a little bit.

Here is my code

<Swiper
     from={1}
     minDistanceForAction={0.1}
     controlsProps={{
     dotsTouchable: true,
     prevPos: 'left',
     nextPos: 'right',
     nextTitle: '',
     prevTitle: '',
     dotsWrapperStyle: { },
     nextTitleStyle: { color: 'red', fontSize: 24, fontWeight: '500' },
     }}
>
   <View style={[styless.slideContainer]}>
      //some views
   </View>
</Swiper>

Is there a way to move the dots? because the slider views are small in height, so the dots are being hidden by other views.

Answer 1

you can use this:

<Swiper
     from={1}
     minDistanceForAction={0.1}
     controlsProps={{
     dotsTouchable: true,
     prevPos: 'left',
     nextPos: 'right',
     nextTitle: '',
     prevTitle: '',
     dotsWrapperStyle: { marginBottom: 20 },
     nextTitleStyle: { color: 'red', fontSize: 24, fontWeight: '500' },
     }}
>
   <View style={[styless.slideContainer]}>
      //some views
   </View>
</Swiper>

The only change is the margin value on the dotsWrapperStyle prop. make sure to change the value by your needs.