Allow changing the indicator color

[schlaegerz]

Feature Request

IOS allows changing the indicator colors and it would be great to bubble that up to react-native: var pageIndicatorTintColor: UIColor?

var currentPageIndicatorTintColor: UIColor?

Why it is needed

Visually its important to be able to control this color so you can make a page look good.

[troZee]

Can you propose js api for it ? I would like also handle indicator view styles like padding, margin etc

[schlaegerz]

I personally would be happy with

pageIndicatorColor={color} and activePageIndicatorColor={color} or currentPageIndicatorColor={color}

Being available. I think the color is a much more common use case and is very easy to implement as it just maps to properties in the native view.

I don't know if margin and padding is even possible without rendering the entire thing ourselves.

[troZee]

This is interesting feat, but I have no time to dig into it. I agree with you about props, that you proposed. Do you want to contribute, with what you proposed ? If you do, feel free. I can help you in case of any questions.

[schlaegerz]

I can try to take a stab at it, but probably won't have time. I've never worked on interacting with native from a react-native component so I'm not sure how tough this would be.

[troZee]

if you will find some time to do it, I would really appreciate it. Because you have never worked before, I write you some hints as follow:

You need to export prop to JS like here: https://github.com/react-native-community/react-native-viewpager/blob/master/ios/ReactViewPagerManager.m#L13

and then use this prop here https://github.com/react-native-community/react-native-viewpager/blob/master/ios/ReactNativePageView.m#L481

Here you can find more information https://facebook.github.io/react-native/docs/native-modules-ios

[schlaegerz]

This looks like it will require me to learn a bit more objective C so I don't think I will have much time to look into this for now :(

[wilsolutions]

Hi, please, what is the status of this PR? It has been there since Dec 2019, kinda basic customization that I feel like should be there since the beginning... Any thoughts? How can we have this feature? Currently I need to change the pageIndicatorTintColor, a lot of people use white background and having a white pageIndicatorTintColor in a white background App make it simply disappear =)

[mssodhi]

@wilsolutions @troZee opened #379 to address this.

[rishiankush]

Any updates on this? I am using a white background and not able to view the non active indicator.

[pouyarezvani]

any updates?

[troZee]

Closing bc we don't have a plan to support page indicators. If you would like to add page indicators, please checkout this example: https://github.com/callstack/react-native-pager-view/blob/master/example/src/PaginationDotsExample.tsx