FormidableLabs / FormidableLabs/victory-native-xl
Animation not working correctly on line paths with monotoneX curve type
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 109
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 3
Description
### Describe Your Environment
**What version of victory-native-xl are you using?** 41.16.0
**What version of React and React Native are you using?** 0.76.5
**What version of Reanimated and React Native Skia are you using?** 1.5.0
**Are you using Expo or React Native CLI?** Expo
**What platform are you on?** Android and Web
### Describe the Problem
Hello, first of all thanks a lot for working on this amazing library :)
I noticed that animations on line paths using the "monotoneX" `curveType` do not work reliably on all paths.
The example below works correctly when setting `curveType` to "natural" (or other values), but not when using "monotoneX".
Some paths still work correctly when using "monotoneX", but often they don't (like in the case below).
I am not sure if this issue is limited to "monotoneX" curve types but I wasn't able to repro with other types of curves.
```
function MyAnimatedLines({ points }: { points: PointsArray }) {
const { path } = useLinePath(points, {curveType: 'monotoneX'});
const animPath = useAnimatedPath(path, { type: "spring", duration: 1000 });
return ;
}
function FocusGraph() {
const allData: { x: number, y: number }[][] = [
[
{ x: 0, y: 659},
{ x: 0, y: 647},
{ x: 2, y: 733},
{ x: 7, y: 802},
{ x: 8, y: 863},
],
[
{ x: 0, y: 647 },
{ x: 0, y: 647 },
{ x: 4, y: 733 },
{ x: 7, y: 82 },
{ x: 10, y: 863 },
],
]
const [viewSelectionIdx, setViewSelectionIdx] = useState(1);
const [data, setData] = useState<{ x: number, y: number }[]>(allData[1]);
useEffect(() => {
// switch data every 2 seconds
const interval = setInterval(() => {
setViewSelectionIdx((viewSelectionIdx + 1) % 2);
setData(allData[viewSelectionIdx]);
}, 2000);
return () => clearInterval(interval);
}, [viewSelectionIdx]);
return (
{({ points }) => }
);
}
```
**Expected behavior:**
The line is animated correctly when using other types of curves (e.g. 'natural').
https://github.com/user-attachments/assets/2d13694d-3fa2-473d-a5c9-728e3668c40b
**Actual behavior:**
https://github.com/user-attachments/assets/dde37acb-2c70-42e0-a060-bbfa46b815c4
Contributor guide
Assessment
This issue has not been assessed yet.