0

I add picture of the dots that I want to change.

this is the picture .

I'm using the react-native-swiper

Is there a way to change the style(color, size..) for dots in swiper? 

<Swiper
  style={styles.wrapper}
  showsButtons={false}
  onIndexChanged={this.onSwiperIndexChanged}
  index={this.state.initialIndex} //{list.length - this.state.initialIndex - 1}
>
  {list.map((item, index) => (
    <InfoTable
      key={index}
      headerInfo={item}
      approvers={approvers}
      settings={settings}
    />
  ))}
</Swiper>;
keikai
  • 14,085
  • 9
  • 49
  • 68
mia
  • 1
  • 1
  • 4

1 Answers1

3

Yes, you can

Refer to the document swiper-pagination

dot

Allow custom the dot element.

<View
  style={{
    backgroundColor: "rgba(0,0,0,.2)",
    width: 8,
    height: 8,
    borderRadius: 4,
    marginLeft: 3,
    marginRight: 3,
    marginTop: 3,
    marginBottom: 3
  }}
/>;
keikai
  • 14,085
  • 9
  • 49
  • 68
  • can you show me how to do it in my code ? because i try already and its doesnt work for me – mia Mar 12 '20 at 07:28
  • @mia Could you add some details explanation about the problem you are facing to your question? Or add an online demo? – keikai Mar 12 '20 at 07:42
  • i add picture of the dots that i wanna change style of them above in my question – mia Mar 12 '20 at 07:49
  • @mia Guess what, you need to make it clear what's the problem you are facing, rather than add a picture waiting for others to achieve it. If you have questions adding custom styles to `dot`, I believe I have answered it. If you have further CSS setting problems, explain it in detail with a new question is preferred. – keikai Mar 12 '20 at 07:54
  • https://stackoverflow.com/questions/40473352/how-to-change-default-colors-of-react-native-swiper-component/70668879#70668879 – FabioDev Jan 11 '22 at 14:56