weahforsage / react-native-animated-pagination-dots Goto Github PK

Update documentation with the prop activeDotColor for Expanding dot, to change the color style for active dots.

The subject is pretty self-explaining, it will help navigation through the pages via dots.

Hi @weahforsage , it would be possible to do so instead of halving the dots, make the dots have the size that is passed and then everything else conforms to this.

See the image to understand.

Link: https://snack.expo.io/pyTtLh2gp

Hello, I have a screen in my react native app that is using scaling dots within a box, however the scaling dots is using screen width so the dots are updating at the wrong points.

I can fix this locally by adding containerWidth as an optional prop. This defaults to width if not passed.

Is this something that we can add?

Can we have max number of dots to render ? because when there're lots of images, it doesn't look good to have lot of dots. Would be good if we could restrict the max number.

Got error from running an example from readme

Error: Requiring module "node_modules/react-native-animated-pagination-dots/src/index.tsx", which threw an exception: Invariant Violation: Tried to register two views with the same name RNSVGSvgView

react-native 0.64.3

I see the example and it only one card in a time. What if i have two card in one page and still want to have dot indicator?

Hello,

I received the following error after trying to implement the "Button Navigation Example":
Invariant Violation: requireNativeComponent: "RNSVGLine" was not found in the UIManager.

Hi @weahforsage ,
it seems that when the device rotates or is rotated, the pagination no longer works, I also tried with your example, but it gives problems.

I don't know if the problem is: const {width} = Dimensions.get('screen');, that when the device rotates it doesn't update its dimensions or anything.

hello, thank you for making awesome plugin.

i have some problem, when i try to put inside "ScrollView" the "Dots" not showing but still can slide, i try many things and not work also, if someone have some issue like me please help me to fix it

thank you.

Currently SlidingDot operates on the screen width, though I'm using it on a card with images being narrower than a window width.

On image scroll I have to replace

onProgressChange={(offsetProgress) => scrollX.setValue(-offsetProgress)}

with

onProgressChange={(offsetProgress) =>
  scrollX.setValue(
    -offsetProgress * (windowWidth / imageWidth)
    + (windowWidth - imageWidth) * (MARGIN_SIZE / windowWidth)
  )
}
// ...
<SlidingDot marginHorizontal={MARGIN_SIZE} {...otherProps} />

Giving an ability to change the inputRange to [-imageWidth, 0, imageWidth] I'll be able to skip this sophisticated scaling.

Hi @weahforsage ,
would it be possible to make it possible to click on the dots and receive I don't know, index of the clicked dots?

Hello
I would like to pass MaxPages and currentPage to the ExpandingDot component and control the pagination programmatically by updating the currentPage value.

I have tried to add this custom feature but without success.
Can you please give me some hints that can help me proceed.

I will post the final code if i achieved it here.

Thanks.

Hi @weahforsage , it would be possible to add the following feature to the module.

does this package has a plan to migrate to reanimated instead animated from "react-native"?

Thanks for this amazing component! Would it be possible to programmatically scroll to the next page upon pressing a button for example?

Please add the separation, cause it seem to be impossible to change styles for active dot and not changing others

Using LiquidLike dots always gives an error :
TypeError: undefined is not an object (evaluating 'scrollOffset.interpolate')

Currently, ExpandingDot only expands horizontally but how to achieve a vertically expanding dot.

For this, I used a prop isVerticle in ExpandingDot.

Attached, the patch-package if someone needs it.

diff --git a/node_modules/react-native-animated-pagination-dots/src/dots/ExpandingDot.tsx b/node_modules/react-native-animated-pagination-dots/src/dots/ExpandingDot.tsx
index 14895e1..9495aef 100644
--- a/node_modules/react-native-animated-pagination-dots/src/dots/ExpandingDot.tsx
+++ b/node_modules/react-native-animated-pagination-dots/src/dots/ExpandingDot.tsx
@@ -15,6 +15,7 @@ export interface ExpandingDotProps {
   inActiveDotColor?: string;
   expandingDotWidth?: number;
   activeDotColor?: string;
+  isVerticle?: boolean;
 }
 
 const ExpandingDot = ({
@@ -26,6 +27,7 @@ const ExpandingDot = ({
   inActiveDotColor,
   expandingDotWidth,
   activeDotColor,
+  isVerticle,
 }: ExpandingDotProps) => {
   const { width } = useWindowDimensions();
 
@@ -35,6 +37,7 @@ const ExpandingDot = ({
     expandingDotWidth: expandingDotWidth || 20,
     dotWidth: (dotStyle.width as number) || 10,
     activeDotColor: activeDotColor || '#347af0',
+    isVerticle: isVerticle ? isVerticle :  false,
   };
 
   return (
@@ -80,7 +83,7 @@ const ExpandingDot = ({
             style={[
               styles.dotStyle,
               dotStyle,
-              { width: expand },
+              defaultProps.isVerticle ? { height: expand, alignSelf: 'center' } : { width : expand },
               { opacity },
               { backgroundColor: colour },
             ]}

Hi, I am recently using this awesome library, but I experience a crash on SlidingDots.

Here is the error stack:

java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: ViewManager for tag 155 could not be found.

Any idea what went wrong?