weahforsage / react-native-animated-pagination-dots Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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?
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.
Please add the separation, cause it seem to be impossible to change styles for active dot and not changing others
does this package has a plan to migrate to reanimated instead animated from "react-native"?
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
Thanks for this amazing component! Would it be possible to programmatically scroll to the next page upon pressing a button for example?
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?
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 },
]}
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.
Update documentation with the prop activeDotColor for Expanding dot, to change the color style for active dots.
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.
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.
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.
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?
The subject is pretty self-explaining, it will help navigation through the pages via dots.
Hello,
I received the following error after trying to implement the "Button Navigation Example":
Invariant Violation: requireNativeComponent: "RNSVGLine" was not found in the UIManager.
Using LiquidLike dots always gives an error :
TypeError: undefined is not an object (evaluating 'scrollOffset.interpolate')
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.