From 03f03f08c0998ed4029951a5814cbed8fe607d58 Mon Sep 17 00:00:00 2001 From: Nodonisko Date: Thu, 21 Mar 2024 20:33:08 +0100 Subject: [PATCH 1/6] fix(android): makeImageFromView works for ScrollView --- .../reactnative/skia/ViewScreenshotService.java | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java b/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java index 0bb35280dc..4e63277f26 100644 --- a/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java +++ b/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java @@ -14,6 +14,7 @@ import android.view.TextureView; import android.view.View; import android.view.ViewGroup; +import android.widget.ScrollView; import androidx.annotation.NonNull; import com.facebook.react.bridge.ReactContext; import com.facebook.react.uimanager.UIManagerModule; @@ -70,6 +71,17 @@ private static void renderViewToCanvas(Canvas canvas, View view, Paint paint, fl canvas.save(); applyTransformations(canvas, view); + // If the view is a ScrollView or similar, clip to its bounds + if (view instanceof ScrollView) { + ScrollView scrollView = (ScrollView) view; + int clipLeft = scrollView.getScrollX(); + int clipTop = scrollView.getScrollY(); + int clipRight = clipLeft + scrollView.getWidth(); + int clipBottom = clipTop + scrollView.getHeight(); + + canvas.clipRect(clipLeft, clipTop, clipRight, clipBottom); + } + if (view instanceof ViewGroup) { ViewGroup group = (ViewGroup) view; drawBackgroundIfPresent(canvas, view, combinedOpacity); @@ -166,7 +178,10 @@ private static void drawSurfaceView(Canvas canvas, SurfaceView sv, Paint paint, private static void applyTransformations(final Canvas c, @NonNull final View view) { final Matrix matrix = view.getMatrix(); final Matrix translateMatrix = new Matrix(); - translateMatrix.setTranslate(view.getLeft() + view.getPaddingLeft(), view.getTop() + view.getPaddingTop()); + + translateMatrix.setTranslate(view.getLeft() + view.getPaddingLeft() - view.getScrollX(), + view.getTop() + view.getPaddingTop() - view.getScrollY()); + c.concat(translateMatrix); c.concat(matrix); } From 463dfd5b530c84596d8770a367864cdfd2da4a02 Mon Sep 17 00:00:00 2001 From: Nodonisko Date: Thu, 21 Mar 2024 20:34:54 +0100 Subject: [PATCH 2/6] chore(e2e): add tests for makeImageFromView ScrollView --- example/src/Tests/Screens/Snapshot5.tsx | 72 +++++++++++++++++++ example/src/Tests/Screens/index.ts | 2 + fabricexample/src/Tests/Screens/Snapshot5.tsx | 72 +++++++++++++++++++ fabricexample/src/Tests/Screens/index.ts | 2 + package.json | 2 +- .../renderer/__tests__/e2e/Snapshot.spec.tsx | 3 + 6 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 example/src/Tests/Screens/Snapshot5.tsx create mode 100644 fabricexample/src/Tests/Screens/Snapshot5.tsx diff --git a/example/src/Tests/Screens/Snapshot5.tsx b/example/src/Tests/Screens/Snapshot5.tsx new file mode 100644 index 0000000000..efbe4a9289 --- /dev/null +++ b/example/src/Tests/Screens/Snapshot5.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { + ScrollView, + StyleSheet, + View +} from "react-native"; + +export const Snapshot5 = () => { + return ( + + + + + + ); +}; + +const Component = () => { + return ( + <> + { ref?.scrollTo({ y: 200 }) }}> + + + + + + { ref?.scrollTo({ x: 200 }) }}> + + + + + ); +}; + +const styles = StyleSheet.create({ + view: { + flex: 1, + backgroundColor: "yellow", + }, + scrollview: { + padding: 14, + paddingTop: 100, + maxHeight: 150, + }, + scrollViewHorizontal: { + padding: 14, + paddingTop: 100, + maxHeight: 150, + }, + verticalBox: { + flex: 1, + minHeight: 500, + borderWidth: 5, + }, + horizontalBox: { + width: 200, + height: '100%', + borderWidth: 5, + } +}); diff --git a/example/src/Tests/Screens/index.ts b/example/src/Tests/Screens/index.ts index 0ed8297004..e795b15cb1 100644 --- a/example/src/Tests/Screens/index.ts +++ b/example/src/Tests/Screens/index.ts @@ -4,10 +4,12 @@ import { Snapshot1 } from "./Snapshot1"; import { Snapshot2 } from "./Snapshot2"; import { Snapshot3 } from "./Snapshot3"; import { Snapshot4 } from "./Snapshot4"; +import { Snapshot5 } from "./Snapshot5"; export const Screens: Record = { Snapshot1, Snapshot2, Snapshot3, Snapshot4, + Snapshot5 }; diff --git a/fabricexample/src/Tests/Screens/Snapshot5.tsx b/fabricexample/src/Tests/Screens/Snapshot5.tsx new file mode 100644 index 0000000000..efbe4a9289 --- /dev/null +++ b/fabricexample/src/Tests/Screens/Snapshot5.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { + ScrollView, + StyleSheet, + View +} from "react-native"; + +export const Snapshot5 = () => { + return ( + + + + + + ); +}; + +const Component = () => { + return ( + <> + { ref?.scrollTo({ y: 200 }) }}> + + + + + + { ref?.scrollTo({ x: 200 }) }}> + + + + + ); +}; + +const styles = StyleSheet.create({ + view: { + flex: 1, + backgroundColor: "yellow", + }, + scrollview: { + padding: 14, + paddingTop: 100, + maxHeight: 150, + }, + scrollViewHorizontal: { + padding: 14, + paddingTop: 100, + maxHeight: 150, + }, + verticalBox: { + flex: 1, + minHeight: 500, + borderWidth: 5, + }, + horizontalBox: { + width: 200, + height: '100%', + borderWidth: 5, + } +}); diff --git a/fabricexample/src/Tests/Screens/index.ts b/fabricexample/src/Tests/Screens/index.ts index 0ed8297004..e795b15cb1 100644 --- a/fabricexample/src/Tests/Screens/index.ts +++ b/fabricexample/src/Tests/Screens/index.ts @@ -4,10 +4,12 @@ import { Snapshot1 } from "./Snapshot1"; import { Snapshot2 } from "./Snapshot2"; import { Snapshot3 } from "./Snapshot3"; import { Snapshot4 } from "./Snapshot4"; +import { Snapshot5 } from "./Snapshot5"; export const Screens: Record = { Snapshot1, Snapshot2, Snapshot3, Snapshot4, + Snapshot5 }; diff --git a/package.json b/package.json index f8bba20dd2..30ed06fc2f 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,5 @@ "email": "wcandillon@gmail.com" } ], - "dependencies": {} + "packageManager": "yarn@1.22.19" } diff --git a/package/src/renderer/__tests__/e2e/Snapshot.spec.tsx b/package/src/renderer/__tests__/e2e/Snapshot.spec.tsx index bc3d79daf9..9e29d27009 100644 --- a/package/src/renderer/__tests__/e2e/Snapshot.spec.tsx +++ b/package/src/renderer/__tests__/e2e/Snapshot.spec.tsx @@ -24,4 +24,7 @@ describe("Snapshot", () => { itRunsE2eOnly("should respect overflow: hidden", async () => { await testSnapshot("Snapshot4"); }); + itRunsE2eOnly("should respect ScrollView offset and padding", async () => { + await testSnapshot("Snapshot5"); + }); }); From b02e9e9f22e4e31386daef5310246ca227aadffd Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 26 Mar 2024 09:25:58 +0100 Subject: [PATCH 3/6] :green_heart: --- example/src/Tests/Screens/Snapshot5.tsx | 52 ++++++++++++------------- example/src/Tests/Screens/index.ts | 2 +- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/example/src/Tests/Screens/Snapshot5.tsx b/example/src/Tests/Screens/Snapshot5.tsx index efbe4a9289..1218a0dfa1 100644 --- a/example/src/Tests/Screens/Snapshot5.tsx +++ b/example/src/Tests/Screens/Snapshot5.tsx @@ -1,9 +1,5 @@ import React from "react"; -import { - ScrollView, - StyleSheet, - View -} from "react-native"; +import { ScrollView, StyleSheet, View } from "react-native"; export const Snapshot5 = () => { return ( @@ -18,29 +14,29 @@ export const Snapshot5 = () => { const Component = () => { return ( <> - { ref?.scrollTo({ y: 200 }) }}> - - - + { + ref?.scrollTo({ y: 200 }); + }} + > + + + - { ref?.scrollTo({ x: 200 }) }}> - - - - + { + ref?.scrollTo({ x: 200 }); + }} + > + + + + + ); }; @@ -66,7 +62,7 @@ const styles = StyleSheet.create({ }, horizontalBox: { width: 200, - height: '100%', + height: "100%", borderWidth: 5, - } + }, }); diff --git a/example/src/Tests/Screens/index.ts b/example/src/Tests/Screens/index.ts index e795b15cb1..0816422599 100644 --- a/example/src/Tests/Screens/index.ts +++ b/example/src/Tests/Screens/index.ts @@ -11,5 +11,5 @@ export const Screens: Record = { Snapshot2, Snapshot3, Snapshot4, - Snapshot5 + Snapshot5, }; From e17eec2c2a3a315ee40e2abada0c340b98ba0b65 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 26 Mar 2024 13:59:47 +0100 Subject: [PATCH 4/6] :green_heart: --- fabricexample/src/Tests/Screens/Snapshot5.tsx | 52 +++++++++---------- fabricexample/src/Tests/Screens/index.ts | 2 +- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/fabricexample/src/Tests/Screens/Snapshot5.tsx b/fabricexample/src/Tests/Screens/Snapshot5.tsx index efbe4a9289..1218a0dfa1 100644 --- a/fabricexample/src/Tests/Screens/Snapshot5.tsx +++ b/fabricexample/src/Tests/Screens/Snapshot5.tsx @@ -1,9 +1,5 @@ import React from "react"; -import { - ScrollView, - StyleSheet, - View -} from "react-native"; +import { ScrollView, StyleSheet, View } from "react-native"; export const Snapshot5 = () => { return ( @@ -18,29 +14,29 @@ export const Snapshot5 = () => { const Component = () => { return ( <> - { ref?.scrollTo({ y: 200 }) }}> - - - + { + ref?.scrollTo({ y: 200 }); + }} + > + + + - { ref?.scrollTo({ x: 200 }) }}> - - - - + { + ref?.scrollTo({ x: 200 }); + }} + > + + + + + ); }; @@ -66,7 +62,7 @@ const styles = StyleSheet.create({ }, horizontalBox: { width: 200, - height: '100%', + height: "100%", borderWidth: 5, - } + }, }); diff --git a/fabricexample/src/Tests/Screens/index.ts b/fabricexample/src/Tests/Screens/index.ts index e795b15cb1..0816422599 100644 --- a/fabricexample/src/Tests/Screens/index.ts +++ b/fabricexample/src/Tests/Screens/index.ts @@ -11,5 +11,5 @@ export const Screens: Record = { Snapshot2, Snapshot3, Snapshot4, - Snapshot5 + Snapshot5, }; From ba998598caae93440f68ba708eb35aeeb567561e Mon Sep 17 00:00:00 2001 From: William Candillon Date: Mon, 1 Apr 2024 13:02:08 +0200 Subject: [PATCH 5/6] Add reference screenshot --- .../snapshots/screens/snapshot5-android.png | Bin 0 -> 4121 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 package/src/__tests__/snapshots/screens/snapshot5-android.png diff --git a/package/src/__tests__/snapshots/screens/snapshot5-android.png b/package/src/__tests__/snapshots/screens/snapshot5-android.png new file mode 100644 index 0000000000000000000000000000000000000000..8b1a1d0b9512802cb3453e1f6a58fdb562448095 GIT binary patch literal 4121 zcmeAS@N?(olHy`uVBq!ia0y~yUN0uoLvK%#{MNN@-O2>~S_q2K}}9Dvp^ zGzg3;91Wh)L@}BbMoWs(@^Q3Q7_Bs0-pn*z?hZ@|-wS|EgVFZEX!B{b(Ky;v9_>lc zx&L(iCFA-xwN=0(_>Y)4ur#KuaWdicmxlfsmU|f(Dpu{y|7*QoXx=eapsAE~4xd=r zK2ZK<2Q)Qd?bd1Goc@nN$%L|AXVF}_52wz&1Ul|RbPUk6q1#pc$G9z4l==Rtgik Date: Tue, 2 Apr 2024 02:28:40 +0200 Subject: [PATCH 6/6] remove orthogonal change --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 30ed06fc2f..f8bba20dd2 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,5 @@ "email": "wcandillon@gmail.com" } ], - "packageManager": "yarn@1.22.19" + "dependencies": {} }