Skip to content

Commit 7414a37

Browse files
bored-yunsbored-yuns
committed
fix: Enable android gesture handler and adjust hold duration for graph movements
1 parent 0a546d0 commit 7414a37

2 files changed

Lines changed: 91 additions & 84 deletions

File tree

‎src/AnimatedLineGraph.tsx‎

Lines changed: 87 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import Reanimated, {
3838
withDelay,
3939
} from 'react-native-reanimated'
4040
import { getSixDigitHex } from './utils/getSixDigitHex'
41-
import { GestureDetector } from 'react-native-gesture-handler'
41+
import { GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler'
4242
import { usePanGesture } from './hooks/usePanGesture'
4343
import { getYForX } from './GetYForX'
4444
import { hexToRgba } from './utils/hexToRgba'
@@ -57,6 +57,7 @@ export function AnimatedLineGraph({
5757
points,
5858
color,
5959
smoothing = 0.2,
60+
holdDuration = 300,
6061
gradientFillColors,
6162
lineThickness = 3,
6263
range,
@@ -80,7 +81,7 @@ export function AnimatedLineGraph({
8081
const [height, setHeight] = useState(0)
8182
const interpolateProgress = useValue(0)
8283

83-
const { gesture, isActive, x } = usePanGesture({ holdDuration: 300 })
84+
const { gesture, isActive, x } = usePanGesture({ holdDuration })
8485
const circleX = useValue(0)
8586
const circleY = useValue(0)
8687
const pathEnd = useValue(0)
@@ -460,101 +461,103 @@ export function AnimatedLineGraph({
460461
)
461462

462463
return (
463-
<View {...props}>
464-
<GestureDetector gesture={enablePanGesture ? gesture : undefined}>
465-
<ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
466-
{/* Top Label (max price) */}
467-
{TopAxisLabel != null && (
468-
<View style={styles.axisRow}>
469-
<TopAxisLabel />
470-
</View>
471-
)}
472-
473-
{/* Actual Skia Graph */}
474-
<View style={styles.container} onLayout={onLayout}>
475-
<Canvas style={styles.svg}>
476-
<Group>
477-
<Path
478-
// @ts-ignore
479-
path={path}
480-
strokeWidth={lineThickness}
481-
style="stroke"
482-
strokeJoin="round"
483-
strokeCap="round"
484-
>
485-
<LinearGradient
486-
start={vec(0, 0)}
487-
end={vec(width, 0)}
488-
colors={gradientColors}
489-
positions={positions}
490-
/>
491-
</Path>
492-
493-
{shouldFillGradient && (
464+
<GestureHandlerRootView>
465+
<View {...props}>
466+
<GestureDetector gesture={enablePanGesture ? gesture : undefined}>
467+
<ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
468+
{/* Top Label (max price) */}
469+
{TopAxisLabel != null && (
470+
<View style={styles.axisRow}>
471+
<TopAxisLabel />
472+
</View>
473+
)}
474+
475+
{/* Actual Skia Graph */}
476+
<View style={styles.container} onLayout={onLayout}>
477+
<Canvas style={styles.svg}>
478+
<Group>
494479
<Path
495480
// @ts-ignore
496-
path={gradientPath}
481+
path={path}
482+
strokeWidth={lineThickness}
483+
style="stroke"
484+
strokeJoin="round"
485+
strokeCap="round"
497486
>
498487
<LinearGradient
499488
start={vec(0, 0)}
500-
end={vec(0, height)}
501-
colors={gradientFillColors}
489+
end={vec(width, 0)}
490+
colors={gradientColors}
491+
positions={positions}
502492
/>
503493
</Path>
494+
495+
{shouldFillGradient && (
496+
<Path
497+
// @ts-ignore
498+
path={gradientPath}
499+
>
500+
<LinearGradient
501+
start={vec(0, 0)}
502+
end={vec(0, height)}
503+
colors={gradientFillColors}
504+
/>
505+
</Path>
506+
)}
507+
</Group>
508+
509+
{SelectionDot != null && (
510+
<SelectionDot
511+
isActive={isActive}
512+
color={color}
513+
lineThickness={lineThickness}
514+
circleX={circleX}
515+
circleY={circleY}
516+
/>
504517
)}
505-
</Group>
506-
507-
{SelectionDot != null && (
508-
<SelectionDot
509-
isActive={isActive}
510-
color={color}
511-
lineThickness={lineThickness}
512-
circleX={circleX}
513-
circleY={circleY}
514-
/>
515-
)}
516-
517-
{enableIndicator && (
518-
<Group>
519-
{indicatorPulsating && (
518+
519+
{enableIndicator && (
520+
<Group>
521+
{indicatorPulsating && (
522+
<Circle
523+
cx={indicatorX}
524+
cy={indicatorY}
525+
r={indicatorPulseRadius}
526+
opacity={indicatorPulseOpacity}
527+
color={indicatorPulseColor}
528+
style="fill"
529+
/>
530+
)}
531+
532+
<Circle
533+
cx={indicatorX}
534+
cy={indicatorY}
535+
r={indicatorBorderRadius}
536+
color={'#ffffff'}
537+
>
538+
<Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
539+
</Circle>
520540
<Circle
521541
cx={indicatorX}
522542
cy={indicatorY}
523-
r={indicatorPulseRadius}
524-
opacity={indicatorPulseOpacity}
525-
color={indicatorPulseColor}
526-
style="fill"
543+
r={indicatorRadius}
544+
color={color}
527545
/>
528-
)}
529-
530-
<Circle
531-
cx={indicatorX}
532-
cy={indicatorY}
533-
r={indicatorBorderRadius}
534-
color={'#ffffff'}
535-
>
536-
<Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
537-
</Circle>
538-
<Circle
539-
cx={indicatorX}
540-
cy={indicatorY}
541-
r={indicatorRadius}
542-
color={color}
543-
/>
544-
</Group>
545-
)}
546-
</Canvas>
547-
</View>
548-
549-
{/* Bottom Label (min price) */}
550-
{BottomAxisLabel != null && (
551-
<View style={styles.axisRow}>
552-
<BottomAxisLabel />
546+
</Group>
547+
)}
548+
</Canvas>
553549
</View>
554-
)}
555-
</ReanimatedView>
556-
</GestureDetector>
557-
</View>
550+
551+
{/* Bottom Label (min price) */}
552+
{BottomAxisLabel != null && (
553+
<View style={styles.axisRow}>
554+
<BottomAxisLabel />
555+
</View>
556+
)}
557+
</ReanimatedView>
558+
</GestureDetector>
559+
</View>
560+
</GestureHandlerRootView>
558561
)
559562
}
560563

‎src/LineGraphProps.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ interface BaseLineGraphProps extends ViewProps {
3737
* Smoothing value of the graph (Radius of the edge points)
3838
*/
3939
smoothing: number
40+
/**
41+
* Hold duration in "ms" for gesture activation
42+
*/
43+
holdDuration: number
4044
/**
4145
* (Optional) Colors for the fill gradient below the graph line
4246
*/

0 commit comments

Comments
 (0)