"React Native Skia Compatibility Issue: Working on Galaxy A5, Failing on Galaxy S22 Ultra"

[hussainabuhajjaj]

"I am using React Native Skia with Expo for an Android app invitation designer, and I've encountered an issue where it works perfectly fine on a Samsung Galaxy A5, but fails to work on the Samsung Galaxy S22 Ultra. The app functions as expected on the Galaxy A5, but when running on the Galaxy S22 Ultra, it doesn’t render as intended, possibly due to device-specific compatibility issues or performance constraints. I need help identifying the cause of this discrepancy and how to resolve it so that it works seamlessly across different Samsung devices, especially the Galaxy S22 Ultra."

This version highlights the comparison between the two devices and points out the need for help in resolving device-specific issues.
App apk
In this video it shows the app am trying to use edit elements feature to change color of text or even shape but its not working on my s22 ultra phone.
Main while it's working fine on A5s Galaxy

VID_20250115_045329_124.mp4

https://sendgb.com/OP7sNUzT825

Originally posted by @hussainabuhajjaj in #2899

[wcandillon]

I'm closing it for it as we fixed this issue in 1.7.7 but please let me know if you are still experiencing this issue on 1.7.7 and onwards.

[hussainabuhajjaj]

I am facing an issue with state management, specifically when adding an element. Its position is not accurate, indicating that something is wrong. In general, we need to mention that we aim to improve state management.

[hussainabuhajjaj]

I am facing an issue with state management, specifically when adding an element. Its position is not accurate, indicating that something is wrong. In general, we need to mention that we aim to improve state management.
` const GestureHandler = ({
element,
onGestureEnd,
onTransformUpdate,
onShowMore,
onEdit,
onDelete,
}) => {
const [isSelected, setIsSelected] = useState(false);
const centerX = useSharedValue(element.position.x);
const centerY = useSharedValue(element.position.y);
const scale = useSharedValue(1);
const rotation = useSharedValue(0);
const savedScale = useSharedValue(1);
const lastRotation = useSharedValue(0);

// Get element dimensions based on type
const dimensions = getElementDimensions(element);

useEffect(() => {
centerX.value = element.position.x;
centerY.value = element.position.y;
}, [element.position.x, element.position.y]);

const tapGesture = Gesture.Tap().onStart(() => {
runOnJS(setIsSelected)(!isSelected);
});

const panGesture = Gesture.Pan()
.averageTouches(true)
.onChange((event) => {
centerX.value += event.changeX;
centerY.value += event.changeY;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
})
.onEnd(() => {
runOnJS(onGestureEnd)({
x: centerX.value,
y: centerY.value,
});
});

const pinchGesture = Gesture.Pinch()
.onStart(() => {
savedScale.value = scale.value;
})
.onChange((event) => {
scale.value = savedScale.value * event.scale;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
});

const rotationGesture = Gesture.Rotation()
.onStart(() => {
lastRotation.value = rotation.value;
})
.onChange((event) => {
rotation.value = lastRotation.value + event.rotation;
runOnJS(onTransformUpdate)({
translateX: centerX.value,
translateY: centerY.value,
scale: scale.value,
rotate: rotation.value,
});
});

const gesture = Gesture.Simultaneous(
tapGesture,
panGesture,
pinchGesture,
rotationGesture,
);

const animatedStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: centerX.value },
{ translateY: centerY.value },
{ scale: scale.value },
{ rotate: ${rotation.value}rad },
],
width: dimensions.width,
height: dimensions.height,
}));

return (

<Animated.View
style={[
styles.hitArea,
animatedStyle,
isSelected && styles.selectedHitArea,
]}
>
{isSelected && (
<ControlButtons
scale={scale.value}
onShowMore={() => {
onShowMore?.(element.id);
setIsSelected(false);
}}
onEdit={() => {
onEdit?.(element.id);
setIsSelected(false);
}}
onDelete={() => {
onDelete?.(element.id);
setIsSelected(false);
}}
/>
)}
</Animated.View>

);
};

`
https://github.com/user-attachments/assets/ea6f84e5-24cf-4db8-8e61-a6cdcba4f591

https://github.com/mahm0udsaad/Hala-qr.git