App crashes on RNSkia::JsiDomDeclarationNode::invalidateContext() #2429
Labels
bug
Something isn't working
Comments
|
Thank you for poviding a nice reproducible example. However I was not able to reproduce the crash, do you have any additional information on how I could reproduce the crash based on this example? |
|
Description Crash Log SnippetsVersions
Steps to ReproduceUse the below Snack, code example, screenshot, or link to a repositorySimulator.Screen.Recording.-.iPhone.15.-.2024-07-31.at.10.15.23.mp4const AnimatedBorder = ({
glowSize,
blurRadius = SPACING.s4,
borderWidth = SPACING.s1,
borderRadius = SPACING.s4,
glowRadius,
extraWidth = 0,
extraGlowWidth = 0,
extraHeight = 0,
backgroundWidthAdjustment = 0,
horizontalCanvasOffset = 0,
gradientColors = SWEEP_GRADIENT_COLOURS,
style,
backgroundColor = COLORS_V2.primary.background,
backgroundOverrideColor,
showBlur = false,
contentLayout,
duration,
clockwise = false,
}: {
glowSize: number
blurRadius?: number
borderWidth?: number
borderRadius?: number
glowRadius?: number
extraWidth?: number
extraGlowWidth?: number
extraHeight?: number
backgroundWidthAdjustment?: number
horizontalCanvasOffset?: number
gradientColors?: string[]
style?: StyleProp<ViewStyle>
backgroundColor?: ColorsType
backgroundOverrideColor?: ColorsType
showBlur?: boolean
contentLayout: { x: number; y: number; width: number; height: number }
duration: number
clockwise?: boolean
}) => {
const rotation = useSharedValue(0)
const centerX = contentLayout.width / 2
const centerY = contentLayout.height / 2
const centerVec = vec(centerX, centerY)
useEffect(() => {
const rotateAnimation = withRepeat(
withTiming(2, {
duration: duration,
easing: Easing.linear,
}),
-1,
false, // If true, the animation will be reversed each cycle
)
rotation.value = rotateAnimation
// Cleanup function to cancel the animation when the component unmounts
return () => {
cancelAnimation(rotation)
}
}, [duration, rotation])
const animatedRotation = useDerivedValue(() => {
return [{ rotate: (clockwise ? 1 : -1) * Math.PI * rotation.value }]
}, [rotation, clockwise])
const GlowGradient = () => {
return (
<RoundedRect
r={glowRadius ?? borderRadius}
x={contentLayout.x}
y={contentLayout.y}
width={contentLayout.width + borderWidth + extraGlowWidth}
height={extraHeight + contentLayout.height + borderWidth}>
<SweepGradient
origin={centerVec}
c={centerVec}
colors={gradientColors}
start={0}
end={360 * glowSize}
transform={animatedRotation}
/>
</RoundedRect>
)
}
const BackgroundRect = ({ color }: { color: ColorsType }) => {
return (
<RoundedRect
r={borderRadius}
x={borderWidth + horizontalCanvasOffset}
y={borderWidth}
width={backgroundWidthAdjustment + contentLayout.width - borderWidth}
height={extraHeight + contentLayout.height - borderWidth}
color={color}
/>
)
}
return (
<Canvas
style={[
{
position: 'absolute',
width: ADDITIONAL_CANVAS_SPACE + extraWidth + contentLayout.width + borderWidth,
height: ADDITIONAL_CANVAS_SPACE + extraHeight + contentLayout.height + borderWidth,
},
style,
]}>
<Group>
{/* Blurred Glow */}
{showBlur && (
<Group>
<GlowGradient />
<Blur blur={blurRadius} />
</Group>
)}
{/* Outline */}
<GlowGradient />
{/* Background - used to hide majority of sweep gradient */}
<BackgroundRect color={backgroundColor} />
{/* Background Overlay - used to overlay over the background if provided */}
{backgroundOverrideColor && <BackgroundRect color={backgroundOverrideColor} />}
</Group>
</Canvas>
)
}
export default AnimatedBorderIt is used like this const [contentLayout, setContentLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
<View style={style}>
{ (
<AnimatedBorder
{...borderProps}
extraGlowWidth={...}
contentLayout={contentLayout}
backgroundColor={...}
backgroundOverrideColor={...}
horizontalCanvasOffset={...}
style={...}
/>
)}
{... ? (
<View style={[..., style]}>
<View style={styles.row} onLayout={e => setContentLayout(e.nativeEvent.layout)}>
...
</View>
</View>
) : (
... // Similar View component that makes use of onLayout={e => setContentLayout(e.nativeEvent.layout)}
)
</View> |
|
@wcandillon Is the linked PR still being worked on for this issue? 😃 |
|
yes correct :) We are actively working on this new scene graph which will fix this issue :) |
|
Thanks so much for the quick response! Is it possible to maybe get an ETA of when you think this scene graph will be added? If it'll take a longer period of time, what would you suggest I do in the meantime? Thanks again! |
|
yes of course, you can use this API instead: https://shopify.github.io/react-native-skia/docs/shapes/pictures/ or https://shopify.github.io/react-native-skia/docs/animations/textures/#under-the-hood or |
|
Hey thanks for sharing that, I tried making use of |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
Building a GlowGradient for a button. This button has dynamic size based on text size inside. It crashes after the button text change.
Crash log
Version
1.2.3
Steps to reproduce
Use the example below to create a component and change width of the component. Observe crash
Snack, code example, screenshot, or link to a repository
The text was updated successfully, but these errors were encountered: