Feedback modal UI tweaks #4492

antonis · 2025-01-30T12:30:13Z

📢 Type of change

Bugfix
New feature
Enhancement
Refactoring

Based on #4435

📜 Description

Disables FeedbackForm bouncing
Adds sheet appearance for the modal

💡 Motivation and Context

Part of #4302

💚 How did you test it?

Manual

Screenshots

iPhone 16 Pro with notch	iPhone SE without notch

Pixel 8 Pro with camera notch	Pixel 2 with bottom buttons

📝 Checklist

I added tests to verify changes
No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
I updated the docs if needed.
I updated the wizard if needed.
All tests passing
No breaking changes

🔮 Next steps

#skip-changelog

github-actions · 2025-01-30T13:03:01Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	378.57 ms	423.94 ms	45.37 ms
Size	7.15 MiB	8.39 MiB	1.23 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`269c976`+dirty	395.13 ms	438.37 ms	43.24 ms
`e5d5735`+dirty	377.37 ms	430.04 ms	52.67 ms
`9402883`+dirty	436.49 ms	518.94 ms	82.45 ms
`0459aee`+dirty	424.10 ms	466.63 ms	42.53 ms
`8cb898b`+dirty	393.33 ms	416.20 ms	22.87 ms
`0325426`+dirty	418.89 ms	485.00 ms	66.11 ms
`6b1624f`+dirty	382.17 ms	441.00 ms	58.83 ms
`3e4cdf5`+dirty	642.13 ms	702.23 ms	60.10 ms
`2646c98`+dirty	415.13 ms	438.41 ms	23.28 ms

App size

Revision	Plain	With Sentry	Diff
`269c976`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`e5d5735`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`9402883`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`0459aee`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`8cb898b`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`0325426`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`6b1624f`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`3e4cdf5`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`2646c98`+dirty	7.15 MiB	8.38 MiB	1.23 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

Revision	Plain	With Sentry	Diff
`de197fe`+dirty	354.64 ms	397.88 ms	43.23 ms
`47b8d2f`+dirty	356.43 ms	403.11 ms	46.69 ms
`5bd21c5`+dirty	355.61 ms	403.40 ms	47.79 ms
`8216878`+dirty	347.88 ms	363.18 ms	15.30 ms
`bfcb8e8`+dirty	433.59 ms	508.79 ms	75.20 ms

App size

Revision	Plain	With Sentry	Diff
`de197fe`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`47b8d2f`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`5bd21c5`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`8216878`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`bfcb8e8`+dirty	7.15 MiB	8.39 MiB	1.23 MiB

github-actions · 2025-01-30T13:04:46Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1227.04 ms	1229.16 ms	2.12 ms
Size	2.63 MiB	3.71 MiB	1.07 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`6b1624f`+dirty	1224.65 ms	1225.65 ms	1.00 ms
`8cb898b`+dirty	1221.40 ms	1231.78 ms	10.37 ms
`269c976`+dirty	1210.02 ms	1204.46 ms	-5.56 ms
`0325426`+dirty	1228.88 ms	1229.92 ms	1.04 ms
`2646c98`+dirty	1218.51 ms	1218.92 ms	0.41 ms
`9402883`+dirty	1219.65 ms	1217.94 ms	-1.72 ms
`e5d5735`+dirty	1222.02 ms	1222.22 ms	0.20 ms
`3e4cdf5`+dirty	1222.53 ms	1224.42 ms	1.89 ms
`0459aee`+dirty	1232.82 ms	1231.19 ms	-1.63 ms

App size

Revision	Plain	With Sentry	Diff
`6b1624f`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`8cb898b`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`269c976`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`0325426`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`2646c98`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`9402883`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`e5d5735`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`3e4cdf5`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`0459aee`+dirty	2.63 MiB	3.69 MiB	1.06 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

Revision	Plain	With Sentry	Diff
`8216878`+dirty	1220.35 ms	1222.86 ms	2.51 ms
`47b8d2f`+dirty	1224.20 ms	1226.63 ms	2.42 ms
`bfcb8e8`+dirty	1218.14 ms	1223.16 ms	5.02 ms
`5bd21c5`+dirty	1232.90 ms	1229.58 ms	-3.31 ms
`de197fe`+dirty	1222.35 ms	1224.57 ms	2.22 ms

App size

Revision	Plain	With Sentry	Diff
`8216878`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`47b8d2f`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`bfcb8e8`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`5bd21c5`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`de197fe`+dirty	2.63 MiB	3.71 MiB	1.08 MiB

packages/core/src/js/feedback/FeedbackForm.styles.ts

github-actions · 2025-01-30T15:46:10Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	431.23 ms	465.60 ms	34.37 ms
Size	17.75 MiB	20.12 MiB	2.37 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`6b1624f`	462.78 ms	465.13 ms	2.35 ms
`9402883`	448.53 ms	468.73 ms	20.20 ms
`0459aee`	491.48 ms	486.13 ms	-5.35 ms
`269c976`	448.08 ms	428.86 ms	-19.22 ms
`8cb898b`	438.83 ms	420.58 ms	-18.25 ms
`e5d5735`	452.70 ms	453.04 ms	0.34 ms
`0325426`	477.32 ms	457.43 ms	-19.89 ms
`3e4cdf5`	462.35 ms	474.96 ms	12.61 ms
`2646c98`	429.98 ms	421.63 ms	-8.35 ms

App size

Revision	Plain	With Sentry	Diff
`6b1624f`	17.75 MiB	20.12 MiB	2.37 MiB
`9402883`	17.75 MiB	20.12 MiB	2.37 MiB
`0459aee`	17.75 MiB	20.12 MiB	2.37 MiB
`269c976`	17.75 MiB	20.12 MiB	2.37 MiB
`8cb898b`	17.75 MiB	20.12 MiB	2.37 MiB
`e5d5735`	17.75 MiB	20.12 MiB	2.37 MiB
`0325426`	17.75 MiB	20.12 MiB	2.37 MiB
`3e4cdf5`	17.75 MiB	20.12 MiB	2.37 MiB
`2646c98`	17.75 MiB	20.12 MiB	2.37 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

Revision	Plain	With Sentry	Diff
`5bd21c5`	422.60 ms	437.37 ms	14.76 ms
`47b8d2f`	465.92 ms	481.88 ms	15.96 ms
`bfcb8e8`	437.53 ms	465.48 ms	27.95 ms
`8216878`	434.78 ms	431.30 ms	-3.48 ms
`de197fe`	471.60 ms	457.30 ms	-14.30 ms

App size

Revision	Plain	With Sentry	Diff
`5bd21c5`	17.75 MiB	20.12 MiB	2.37 MiB
`47b8d2f`	17.75 MiB	20.12 MiB	2.37 MiB
`bfcb8e8`	17.75 MiB	20.12 MiB	2.37 MiB
`8216878`	17.75 MiB	20.12 MiB	2.37 MiB
`de197fe`	17.75 MiB	20.12 MiB	2.37 MiB

packages/core/src/js/feedback/FeedbackForm.styles.ts

krystofwoldrich · 2025-01-31T00:46:15Z

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

krystofwoldrich · 2025-01-31T00:48:05Z

I would like to iterate over the possible implementations of this.

I think the shadow should not slide up with the modal, it doesn't look natural.

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

krystofwoldrich · 2025-01-31T00:48:46Z

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

github-actions · 2025-01-31T11:59:39Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1224.04 ms	1227.31 ms	3.27 ms
Size	3.19 MiB	4.27 MiB	1.09 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`9402883`+dirty	1217.71 ms	1213.02 ms	-4.69 ms
`894ebb0`+dirty	1210.94 ms	1202.08 ms	-8.85 ms
`3e4cdf5`+dirty	1213.36 ms	1221.31 ms	7.95 ms
`8cb898b`+dirty	1209.39 ms	1207.57 ms	-1.82 ms
`2646c98`+dirty	1239.94 ms	1246.90 ms	6.96 ms
`6b1624f`+dirty	1224.12 ms	1220.73 ms	-3.39 ms
`0459aee`+dirty	1233.67 ms	1239.80 ms	6.12 ms
`0325426`+dirty	1210.17 ms	1216.37 ms	6.20 ms
`e5d5735`+dirty	1217.78 ms	1221.80 ms	4.02 ms
`269c976`+dirty	1223.29 ms	1222.90 ms	-0.39 ms

App size

Revision	Plain	With Sentry	Diff
`9402883`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`894ebb0`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`3e4cdf5`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`8cb898b`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`2646c98`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`6b1624f`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`0459aee`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`0325426`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`e5d5735`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`269c976`+dirty	3.19 MiB	4.26 MiB	1.07 MiB

Previous results on branch: antonis/feedback-modal-ui

Startup times

Revision	Plain	With Sentry	Diff
`8216878`+dirty	1215.94 ms	1208.36 ms	-7.57 ms
`47b8d2f`+dirty	1228.90 ms	1228.57 ms	-0.33 ms
`bfcb8e8`+dirty	1235.14 ms	1225.31 ms	-9.83 ms
`5bd21c5`+dirty	1228.94 ms	1220.00 ms	-8.94 ms
`de197fe`+dirty	1207.69 ms	1200.61 ms	-7.09 ms

App size

Revision	Plain	With Sentry	Diff
`8216878`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`47b8d2f`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`bfcb8e8`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`5bd21c5`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`de197fe`+dirty	3.19 MiB	4.28 MiB	1.09 MiB

antonis · 2025-01-31T15:03:13Z

The auto-injected form has double the border of the manually created one. That seems to me like a bug.

Good catch 👍
Removed the extra border 05f94f8 and adjusted the height 9ecd8a2 to match the manual

Manually created form	Modal
)

Could we make use of the fact we wrap the modal in view and make the wrapper view fade in out the shadow as the modal slides up?

Good idea 👍
Updated with ce1de86

iOS Animation

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-31.at.16.52.59.mp4

Android Animation

Screen_recording_20250131_165336.mp4

I've tried the code on iOS and the form does not avoid the on-screen keyboard.

Should be fixed with a7a4e56

Recording

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-31.at.19.00.05.mp4

lucas-zimerman · 2025-02-10T17:20:21Z

packages/core/src/js/feedback/FeedbackFormManager.tsx

+
+    const backgroundColor = backgroundOpacity.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'],


q: why 0.9?

Good question. I mainly tried to match the darker background of the manually created form and still keep the transparency.

lucas-zimerman

Looking good to me, and it worked fine for me on a real device
https://sentry-sdks.sentry.io/feedback/?feedbackSlug=sentry-react-native%3A6286398787&mailbox=ignored&project=5428561&referrer=feedback_list_page&statsPeriod=1h

krystofwoldrich · 2025-02-11T09:34:39Z

Looks perfect, thank you!

Also this comment is great, it makes it super easy to follow the development and changes in the PR. 👏 👏 👏

antonis added 3 commits January 30, 2025 14:28

Disable bouncing

fe3dc15

Add modal ui appearance

72eef2d

Update snapshot tests

ccc808b

antonis mentioned this pull request Jan 30, 2025

feat: Feedback Widget for React Native #4435

Draft

10 tasks

Fix bottom margin

fd47fd2

antonis marked this pull request as ready for review January 30, 2025 14:32

antonis requested review from krystofwoldrich and lucas-zimerman as code owners January 30, 2025 14:32

antonis commented Jan 30, 2025

View reviewed changes

packages/core/src/js/feedback/FeedbackForm.styles.ts Outdated Show resolved Hide resolved

antonis commented Jan 30, 2025

View reviewed changes

packages/core/src/js/feedback/FeedbackForm.styles.ts Outdated Show resolved Hide resolved

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

dcc5d3b

antonis added 4 commits January 31, 2025 14:01

Fix sheet height

9ecd8a2

Remove extra modal border

05f94f8

Do not expose modal styles

d88a599

Animate background color

ce1de86

antonis added 2 commits January 31, 2025 18:57

Avoid keyboard in modal

a7a4e56

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

8779886

antonis mentioned this pull request Feb 3, 2025

Implements Report a Bug button #4378

Draft

10 tasks

antonis added 2 commits February 7, 2025 10:15

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

ae80f7d

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

488658e

lucas-zimerman reviewed Feb 10, 2025

View reviewed changes

lucas-zimerman approved these changes Feb 10, 2025

View reviewed changes

krystofwoldrich approved these changes Feb 11, 2025

View reviewed changes

krystofwoldrich merged commit 7ec9441 into feedback-ui Feb 11, 2025
66 checks passed

krystofwoldrich deleted the antonis/feedback-modal-ui branch February 11, 2025 09:35

antonis mentioned this pull request Feb 11, 2025

Feedback UI: Use Image Picker libraries from integrations #4524

Open

10 tasks

Feedback modal UI tweaks #4492

Feedback modal UI tweaks #4492

Conversation

antonis commented Jan 30, 2025 • edited Loading

📢 Type of change

📜 Description

💡 Motivation and Context

💚 How did you test it?

📝 Checklist

🔮 Next steps

github-actions bot commented Jan 30, 2025 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-modal-ui

Startup times

App size

github-actions bot commented Jan 30, 2025 • edited Loading

iOS (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-modal-ui

Startup times

App size

github-actions bot commented Jan 30, 2025 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-modal-ui

Startup times

App size

krystofwoldrich commented Jan 31, 2025

krystofwoldrich commented Jan 31, 2025

krystofwoldrich commented Jan 31, 2025

github-actions bot commented Jan 31, 2025 • edited Loading

iOS (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-modal-ui

Startup times

App size

antonis commented Jan 31, 2025 • edited Loading

lucas-zimerman Feb 10, 2025

Choose a reason for hiding this comment

antonis Feb 11, 2025

Choose a reason for hiding this comment

lucas-zimerman left a comment

Choose a reason for hiding this comment

krystofwoldrich commented Feb 11, 2025

antonis commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading

github-actions bot commented Jan 31, 2025 •

edited

Loading

antonis commented Jan 31, 2025 •

edited

Loading