misc(feedback): Improve Feedback Sheet interactions #4571

krystofwoldrich · 2025-02-19T19:38:05Z

📢 Type of change

Enhancement
Refactoring

📜 Description

This PR improves the interactions with the auto-injected widget.

This PR removes safe-area, keyboard-avoiding, and scroll-view wrappers from the FeedbackWidget. Although it initially seemed like a good idea, the wrappers caused issues when using the widget in the auto-injected bottom sheet.

List of changes:

The BottomSheet doesn't jump when the keyboard shows/hides
Buttons keep active with an active keyboard
The pull-down doesn't interfere with the scroll, the pull-down is only active when scrolled to the top

Future improvements/Issues

Avoid hardcoded spacer
Scroll to the top doesn't smoothly transition to pull-down
Pull down can't be activate from under the cancel button

💚 Large screen

sample app

Screen.Recording.2025-02-19.at.20.32.34.mov

Small screen auto-scroll

Screen.Recording.2025-02-19.at.20.34.37.mov

📝 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

#skip-changelog

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

…-screenshot # Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

…-simplify-onaddscreenshot # Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

…-screenshot

…-simplify-onaddscreenshot

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>

…-screenshot

…-simplify-onaddscreenshot

…/feedback-webfixes

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

github-actions · 2025-02-19T19:58:48Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	435.12 ms	423.71 ms	-11.41 ms
Size	17.75 MiB	20.12 MiB	2.38 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`d1a10a1`	418.11 ms	475.98 ms	57.87 ms
`df05370`	477.62 ms	491.63 ms	14.00 ms
`3e4cdf5`	462.35 ms	474.96 ms	12.61 ms
`894ebb0`	497.45 ms	545.04 ms	47.60 ms
`0325426`	477.32 ms	457.43 ms	-19.89 ms
`0459aee`	491.48 ms	486.13 ms	-5.35 ms
`269c976`	448.08 ms	428.86 ms	-19.22 ms
`2646c98`	429.98 ms	421.63 ms	-8.35 ms
`e5d5735`	452.70 ms	453.04 ms	0.34 ms
`8cb898b`	438.83 ms	420.58 ms	-18.25 ms

App size

Revision	Plain	With Sentry	Diff
`d1a10a1`	17.75 MiB	20.12 MiB	2.38 MiB
`df05370`	17.75 MiB	20.12 MiB	2.37 MiB
`3e4cdf5`	17.75 MiB	20.12 MiB	2.37 MiB
`894ebb0`	17.75 MiB	20.12 MiB	2.37 MiB
`0325426`	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
`2646c98`	17.75 MiB	20.12 MiB	2.37 MiB
`e5d5735`	17.75 MiB	20.12 MiB	2.37 MiB
`8cb898b`	17.75 MiB	20.12 MiB	2.37 MiB

Previous results on branch: kw-improve-feedback-interactions

Startup times

Revision	Plain	With Sentry	Diff
`259ad4f`	475.65 ms	491.24 ms	15.60 ms

App size

Revision	Plain	With Sentry	Diff
`259ad4f`	17.75 MiB	20.12 MiB	2.38 MiB

github-actions · 2025-02-19T20:10:30Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1231.37 ms	1241.44 ms	10.07 ms
Size	2.63 MiB	3.76 MiB	1.12 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`df05370`+dirty	1209.92 ms	1216.55 ms	6.63 ms
`269c976`+dirty	1210.02 ms	1204.46 ms	-5.56 ms
`9402883`+dirty	1219.65 ms	1217.94 ms	-1.72 ms
`77e88fc`+dirty	1224.55 ms	1232.41 ms	7.86 ms
`894ebb0`+dirty	1224.33 ms	1214.45 ms	-9.89 ms
`e42816c`+dirty	1211.29 ms	1219.65 ms	8.37 ms
`0459aee`+dirty	1232.82 ms	1231.19 ms	-1.63 ms
`0325426`+dirty	1228.88 ms	1229.92 ms	1.04 ms
`6b1624f`+dirty	1224.65 ms	1225.65 ms	1.00 ms
`d1a10a1`+dirty	1223.68 ms	1230.31 ms	6.63 ms

App size

Revision	Plain	With Sentry	Diff
`df05370`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`269c976`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`9402883`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`77e88fc`+dirty	2.63 MiB	3.75 MiB	1.12 MiB
`894ebb0`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`e42816c`+dirty	2.63 MiB	3.75 MiB	1.12 MiB
`0459aee`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`0325426`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`6b1624f`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`d1a10a1`+dirty	2.63 MiB	3.75 MiB	1.12 MiB

Previous results on branch: kw-improve-feedback-interactions

Startup times

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	1219.75 ms	1229.41 ms	9.66 ms

App size

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	2.63 MiB	3.76 MiB	1.12 MiB

github-actions · 2025-02-19T20:10:44Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1213.02 ms	1218.90 ms	5.88 ms
Size	3.19 MiB	4.32 MiB	1.14 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`bc11245`+dirty	1229.67 ms	1224.77 ms	-4.90 ms
`2646c98`+dirty	1239.94 ms	1246.90 ms	6.96 ms
`3e4cdf5`+dirty	1213.36 ms	1221.31 ms	7.95 ms
`df05370`+dirty	1221.14 ms	1216.60 ms	-4.55 ms
`8cb898b`+dirty	1209.39 ms	1207.57 ms	-1.82 ms
`d1a10a1`+dirty	1228.56 ms	1229.79 ms	1.23 ms
`b74349e`+dirty	1214.22 ms	1225.07 ms	10.84 ms
`e5d5735`+dirty	1217.78 ms	1221.80 ms	4.02 ms
`77e88fc`+dirty	1218.79 ms	1220.00 ms	1.21 ms
`894ebb0`+dirty	1210.94 ms	1202.08 ms	-8.85 ms

App size

Revision	Plain	With Sentry	Diff
`bc11245`+dirty	3.19 MiB	4.32 MiB	1.14 MiB
`2646c98`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`3e4cdf5`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`df05370`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`8cb898b`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`d1a10a1`+dirty	3.19 MiB	4.32 MiB	1.14 MiB
`b74349e`+dirty	3.19 MiB	4.32 MiB	1.14 MiB
`e5d5735`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`77e88fc`+dirty	3.19 MiB	4.32 MiB	1.13 MiB
`894ebb0`+dirty	3.19 MiB	4.27 MiB	1.09 MiB

Previous results on branch: kw-improve-feedback-interactions

Startup times

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	1224.00 ms	1226.24 ms	2.24 ms

App size

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	3.19 MiB	4.32 MiB	1.14 MiB

github-actions · 2025-02-19T20:11:23Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	393.22 ms	399.47 ms	6.24 ms
Size	7.15 MiB	8.39 MiB	1.24 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`9402883`+dirty	436.49 ms	518.94 ms	82.45 ms
`8cb898b`+dirty	393.33 ms	416.20 ms	22.87 ms
`6b1624f`+dirty	382.17 ms	441.00 ms	58.83 ms
`2646c98`+dirty	415.13 ms	438.41 ms	23.28 ms
`3e4cdf5`+dirty	642.13 ms	702.23 ms	60.10 ms
`0459aee`+dirty	424.10 ms	466.63 ms	42.53 ms
`b74349e`+dirty	349.96 ms	375.00 ms	25.04 ms
`e42816c`+dirty	347.06 ms	348.18 ms	1.12 ms
`df05370`+dirty	395.08 ms	430.38 ms	35.30 ms
`d1a10a1`+dirty	364.43 ms	362.98 ms	-1.45 ms

App size

Revision	Plain	With Sentry	Diff
`9402883`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`8cb898b`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`6b1624f`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`2646c98`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`3e4cdf5`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`0459aee`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`b74349e`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`e42816c`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`df05370`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`d1a10a1`+dirty	7.15 MiB	8.39 MiB	1.24 MiB

Previous results on branch: kw-improve-feedback-interactions

Startup times

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	464.38 ms	557.30 ms	92.92 ms

App size

Revision	Plain	With Sentry	Diff
`259ad4f`+dirty	7.15 MiB	8.39 MiB	1.24 MiB

antonis · 2025-02-20T07:06:46Z

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

-const FORGROUND_COLOR = '#2b2233';
-const BACKROUND_COLOR = '#ffffff';
+const FOREGROUND_COLOR = '#2b2233';
+const BACKGROUND_COLOR = '#ffffff';


For some reason I was blind to this typos 😓
Thank you for fixing this Krystof 🙇

antonis

Awesome work @krystofwoldrich 🚀

This PR removes safe-area, keyboard-avoiding, and scroll-view wrappers from the FeedbackWidget.

This makes a lot of sense! The code is simpler and more predictable 👍
I've tested on small and big Android and iOS screens and the widget works great.

I've noticed a minor issue on iPhone SE with the description field hiding behind the keyboard for the modal view. I would advocate on leaving this as is to avoid complexity since the user is still able to scroll up manually. The modal worked as expected for me on small Android screens.

Recording

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-02-20.at.09.16.45.mp4

krystofwoldrich · 2025-02-20T07:49:12Z

Thank you for the testing with different devices.

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx # packages/core/src/js/feedback/FeedbackWidgetManager.tsx

antonis and others added 27 commits February 14, 2025 13:47

Save form state for unsubmitted data

38a6085

Show selected screenshot

56a113e

Use image uri instead of UInt8Array in onAddScreenshot callback

d2dd1f3

Merge branch 'feedback-ui' into antonis/feedback-save-state

9212cb8

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

Omit isVisible from state

1efb23e

Save/clear form state on unmount

59f2f57

Pass the missing attachment parameter in the onSubmitSuccess

797611f

Merge branch 'antonis/feedback-save-state' into antonis/feedback-show…

dbf8c90

…-screenshot # Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

Merge branch 'antonis/feedback-show-screenshot' into antonis/feedback…

91117e3

…-simplify-onaddscreenshot # Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

Use only the uri parameter for the onAddScreenshot callback

f14197d

Merge branch 'feedback-ui' into antonis/feedback-save-state

e63ee11

Merge branch 'antonis/feedback-save-state' into antonis/feedback-show…

f220540

…-screenshot

Merge branch 'antonis/feedback-show-screenshot' into antonis/feedback…

aae3a98

…-simplify-onaddscreenshot

Handle attachments on the web

41cb1ca

Use window for showing alerts on the web

f5c306f

Disable keyboard handling on the web

42ab16c

Use instance variable for _didSubmitForm

f17106e

Fixed callback function parameter name for clarity

f95ed97

Co-authored-by: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com>

Merge branch 'antonis/feedback-save-state' into antonis/feedback-show…

869f22b

…-screenshot

Fixes lint issue

6e2d6ec

Merge branch 'antonis/feedback-save-state' into antonis/feedback-show…

082ef57

…-screenshot

Merge branch 'antonis/feedback-show-screenshot' into antonis/feedback…

e5a9bcc

…-simplify-onaddscreenshot

Merge branch 'antonis/feedback-simplify-onaddscreenshot' into antonis…

4336622

…/feedback-webfixes

Use RN_GLOBAL_OBJ for web alert

28738bf

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

01cb31d

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx

misc(feedback): Improve Feedback Sheet interactions

5713417

small fixes

a74f36f

krystofwoldrich requested review from lucas-zimerman and antonis as code owners February 19, 2025 19:38

update snapshots

2eeaa46

antonis reviewed Feb 20, 2025

View reviewed changes

antonis approved these changes Feb 20, 2025

View reviewed changes

Base automatically changed from antonis/feedback-webfixes to feedback-ui February 20, 2025 07:59

Merge branch 'feedback-ui' into kw-improve-feedback-interactions

040fd4a

# Conflicts: # packages/core/src/js/feedback/FeedbackWidget.tsx # packages/core/src/js/feedback/FeedbackWidgetManager.tsx

antonis mentioned this pull request Feb 20, 2025

feat: Feedback Widget Beta for React Native #4435

Merged

10 tasks

krystofwoldrich merged commit ee3aa70 into feedback-ui Feb 20, 2025
66 checks passed

krystofwoldrich deleted the kw-improve-feedback-interactions branch February 20, 2025 08:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

misc(feedback): Improve Feedback Sheet interactions #4571

misc(feedback): Improve Feedback Sheet interactions #4571

krystofwoldrich commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 •

edited

Loading

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 •

edited

Loading

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 •

edited

Loading

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

antonis Feb 20, 2025

antonis left a comment •

edited

Loading

krystofwoldrich commented Feb 20, 2025

misc(feedback): Improve Feedback Sheet interactions #4571

misc(feedback): Improve Feedback Sheet interactions #4571

Conversation

krystofwoldrich commented Feb 19, 2025 • edited Loading

📢 Type of change

📜 Description

Future improvements/Issues

💚 Large screen

Small screen auto-scroll

📝 Checklist

github-actions bot commented Feb 19, 2025 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 • edited Loading

iOS (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 • edited Loading

iOS (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

github-actions bot commented Feb 19, 2025 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: kw-improve-feedback-interactions

Startup times

App size

antonis Feb 20, 2025

Choose a reason for hiding this comment

antonis left a comment • edited Loading

Choose a reason for hiding this comment

krystofwoldrich commented Feb 20, 2025

krystofwoldrich commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

github-actions bot commented Feb 19, 2025 •

edited

Loading

antonis left a comment •

edited

Loading