soomgo-mobile/react-native-animated-pagination-dot

react-native simple animated pagination dot

react-native-animated-pagination-dot's Issues

add vertical props

support for scrollable vertical mode

isRTL Issue in react native

Animated Dots not working when App is in RTL state.

Error

error nano-css detected browser environment because of "window" global, but "document" global seems to be defective.

import PaginationDot from "react-native-animated-pagination-dot"

Language : typescript
RN : 0.63.4

Only ship .js & .d.ts files when distributing via npm

Right now, users who are trying to consume this library with TypeScript using settings like noImplicitAny are having a negative user experience because the packaged .ts files are getting fully re-checked. See microsoft/TypeScript#15363 for an example of a problem caused by this.

Running TypeScript with --declaration to produce .d.ts files and adding your regular .ts files to an .npmignore file will prevent this issue.

Custom empty dot color

have you any plans to add a possibility to change empty dot color?
today with fixed opacity at the dots in some screens is hard to see the dot that is not selected.

Move project

Hey! Could you take a look here? https://github.com/felire/react-native-animated-dots-carousel

Maybe we can move the project to that library which is more configurable and has more options. IT will be good to have more people in order to find more issues and improve its behaviour.

Error build for Android

react-native: 0.61.5
"react-native-animated-pagination-dot": 0.1.8

` error SyntaxError: /var/app/XXXXX/build-20201016081531/node_modules/react-native-animated-pagination-dot/src/util/DotUtils.ts: Unexpected token, expected ";" (39:73)
15:17:28

15:17:28
37 | }
15:17:28
38 |
15:17:28

39 | export const getDotStyle = ({ idx, curPage, maxPage }:getDotStylePayload):IDotStyle => {
15:17:28
| ^
15:17:28
40 | let type = EnumDotType.SMALL;
15:17:28
41 |
15:17:28
42 | if (maxPage < 5) {. Run CLI with --verbose flag for more details.
15:17:28

15:17:28

Task :app:bundleReleaseJsAndAssets FAILED
15:17:29

`

Is there support for RTL layout?

When I change my phone language to Hebrew\Arabic, the pagination doesn't work.
I tried to set the curPage as such:

                  <PaginationDot
                      activeDotColor={'#f14447'} 
                      curPage={I18nManager.isRTL ? state.carouselItems.length - 1  - state.activeIndex : state.activeIndex} 
                      maxPage={state.carouselItems.length} // Note: my data set has 13 items
                      sizeRatio={2.0}
                  />

I don't see the first item highlighted, I only start see the curPage highlighted after 5 scrolls, and then after another 5 scrolls it disappears again.
I tried playing with the curPage setting it to different values, but it seems I cant get it to work on RTL layout.

Play Image

Cant change dot size

cant change dot Size.

New library to handle this

Hi man! I took some ideas of your code and I published this library:

https://github.com/felire/react-native-animated-dots-carousel

It's super configurable and works more like instagram, because in your library the active dot is always at the right when the user is coming back to the left.

So, it'd be nice if you can take a look and if you like it you can set a comment o migrate this project to that library. I can modify the README naming this library if you want. Let me know