react-native-image-slider-box with dotStyle above image Slider not working

Question

In this example i have used react-native-image-slider here i want to show image pagination dots at left side bottom image slider box how to do like that.

SliderBoxExample.js

import React, { Component } from 'react';
import {Image, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { SliderBox } from "react-native-image-slider-box";

export default class SliderBoxExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [
        require('./../assets/images/cat.jpg'),
        require('./../assets/images/dao.jpg'),
        require('./../assets/images/monkey.jpg'),
      ]
    };
  }
  render() {
    const { navigation } = this.props
    return (
        <View style={styles.container}>
          <SliderBox
            ImageComponent={Image}
            images={this.state.images}
            sliderBoxHeight={200}
            dotColor="red"
            inactiveDotColor="#90A4AE"
            paginationBoxVerticalPadding={20}
            autoplay
            circleLoop
            resizeMethod={'resize'}
            resizeMode={'cover'}
            paginationBoxStyle={{
            position: "absolute",
            bottom: 0,
            padding: 0,
            alignItems: "center",
            alignSelf: "center",
            justifyContent: "center",
            paddingVertical: 10
            }}
            dotStyle={{
              width: 10,
              height: 10,
              borderRadius: 5,
              marginHorizontal: 0,
              padding: 0,
              margin: 0,
              backgroundColor: "rgba(128, 128, 128, 0.92)"
            }}
            ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 25}}
        />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Suggest any solution if you have.. Thanks. Image change pagination at left side below image slider box..

score 0 · Answer 1 · answered May 14 '21 at 22:35

Windas_Coder! I'm not sure if I got it, but what I understood was that you want to move the pagination dots to the bottom-left side of the content box. An easy way of doing that is to set alignSelf to flex-start inside the property paginationBoxStyle. Something like that:

paginationBoxStyle={{
        alignSelf: "flex-start",
 }}

So as you can read more about here, you can:

apply this property to a single child to change its alignment within its parent.

Or in another words, change only the position of the pagination box, inside the SliderBox using flex properties.

score 0 · Answer 2 · answered May 14 '22 at 06:15

remove slider box dot.........

    <SliderBox
  images={this.state.images}
  sliderBoxHeight={200}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  dotColor="#FFEE58"
  inactiveDotColor="#90A4AE"
  dotStyle={{
    width: 0,
    height:0,
    borderRadius:0,
    marginHorizontal:0,
    padding: 0,
    margin: 0
  }}
/>

react-native-image-slider-box with dotStyle above image Slider not working

2 Answers2