From fe3dc15fc86f7fe9bee6d6e1601ff8dea5d57e7b Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 30 Jan 2025 14:28:26 +0200 Subject: [PATCH 1/9] Disable bouncing --- packages/core/src/js/feedback/FeedbackForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index d8a295fa9b..61cf757410 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -131,7 +131,7 @@ export class FeedbackForm extends React.Component - + From 72eef2dc432da8062ccad0a51c4b8e801533d2f8 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 30 Jan 2025 14:28:51 +0200 Subject: [PATCH 2/9] Add modal ui appearance --- .../core/src/js/feedback/FeedbackForm.styles.ts | 16 +++++++++++++++- .../core/src/js/feedback/FeedbackForm.types.ts | 1 + .../core/src/js/feedback/FeedbackFormManager.tsx | 16 +++++++++------- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index 57d407adf3..5c742c037b 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -79,7 +79,21 @@ const defaultStyles: FeedbackFormStyles = { }, modalBackground: { flex: 1, - justifyContent: 'center', + justifyContent: 'flex-end', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + }, + modalSheetContainer: { + backgroundColor: BACKROUND_COLOR, + borderTopLeftRadius: 16, + borderTopRightRadius: 16, + padding: 16, + alignSelf: 'stretch', + height: '98%', + shadowColor: '#000', + shadowOffset: { width: 0, height: -3 }, + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 5, }, }; diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts index fbeee76896..c77bf2c6f7 100644 --- a/packages/core/src/js/feedback/FeedbackForm.types.ts +++ b/packages/core/src/js/feedback/FeedbackForm.types.ts @@ -205,6 +205,7 @@ export interface FeedbackFormStyles { titleContainer?: ViewStyle; sentryLogo?: ImageStyle; modalBackground?: ViewStyle; + modalSheetContainer?: ViewStyle; } /** diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx index 4676f90258..db412e0acf 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx @@ -1,6 +1,6 @@ import { logger } from '@sentry/core'; import * as React from 'react'; -import { Modal, View } from 'react-native'; +import { Modal, SafeAreaView, View } from 'react-native'; import { FeedbackForm } from './FeedbackForm'; import defaultStyles from './FeedbackForm.styles'; @@ -70,12 +70,14 @@ class FeedbackFormProvider extends React.Component { {isVisible && ( - - - + + + + + )} From ccc808b5d2a8651d0950caacfafdc90929d1a952 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 30 Jan 2025 14:29:03 +0200 Subject: [PATCH 3/9] Update snapshot tests --- .../__snapshots__/FeedbackForm.test.tsx.snap | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap index a642bd88da..a3c2857ac9 100644 --- a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap +++ b/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap @@ -31,7 +31,9 @@ exports[`FeedbackForm matches the snapshot with custom styles 1`] = ` ] } > - + - + - + - + - + - + Date: Thu, 30 Jan 2025 16:17:09 +0200 Subject: [PATCH 4/9] Fix bottom margin --- packages/core/src/js/feedback/FeedbackForm.styles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index 5c742c037b..cff6092d7b 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -87,8 +87,9 @@ const defaultStyles: FeedbackFormStyles = { borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, + marginBottom: -32, alignSelf: 'stretch', - height: '98%', + height: '100%', shadowColor: '#000', shadowOffset: { width: 0, height: -3 }, shadowOpacity: 0.1, From 9ecd8a20f2011b84f748694e7517611ff9e1b535 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 31 Jan 2025 14:01:25 +0200 Subject: [PATCH 5/9] Fix sheet height --- packages/core/src/js/feedback/FeedbackForm.styles.ts | 5 ++--- packages/core/src/js/feedback/FeedbackFormManager.tsx | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index cff6092d7b..97ffac4a20 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -80,16 +80,15 @@ const defaultStyles: FeedbackFormStyles = { modalBackground: { flex: 1, justifyContent: 'flex-end', - backgroundColor: 'rgba(0, 0, 0, 0.8)', + backgroundColor: 'rgba(0, 0, 0, 0.9)', }, modalSheetContainer: { backgroundColor: BACKROUND_COLOR, borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, - marginBottom: -32, alignSelf: 'stretch', - height: '100%', + height: '92%', shadowColor: '#000', shadowOffset: { width: 0, height: -3 }, shadowOpacity: 0.1, diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx index db412e0acf..caf26d5fce 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx @@ -1,6 +1,6 @@ import { logger } from '@sentry/core'; import * as React from 'react'; -import { Modal, SafeAreaView, View } from 'react-native'; +import { Modal, View } from 'react-native'; import { FeedbackForm } from './FeedbackForm'; import defaultStyles from './FeedbackForm.styles'; @@ -70,14 +70,14 @@ class FeedbackFormProvider extends React.Component { {isVisible && ( - + - + )} From 05f94f85ceaad44f88c199b3371098c3065f1842 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 31 Jan 2025 14:12:01 +0200 Subject: [PATCH 6/9] Remove extra modal border --- packages/core/src/js/feedback/FeedbackForm.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index 97ffac4a20..d0944c8fc1 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -86,7 +86,7 @@ const defaultStyles: FeedbackFormStyles = { backgroundColor: BACKROUND_COLOR, borderTopLeftRadius: 16, borderTopRightRadius: 16, - padding: 16, + overflow: 'hidden', alignSelf: 'stretch', height: '92%', shadowColor: '#000', From d88a59910d4e4b67b7a0d7621c7bdf2454688912 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 31 Jan 2025 16:29:40 +0200 Subject: [PATCH 7/9] Do not expose modal styles --- .../src/js/feedback/FeedbackForm.styles.ts | 18 ------------------ .../core/src/js/feedback/FeedbackForm.types.ts | 2 -- 2 files changed, 20 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index d0944c8fc1..9cbbfab7f7 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -77,24 +77,6 @@ const defaultStyles: FeedbackFormStyles = { width: 40, height: 40, }, - modalBackground: { - flex: 1, - justifyContent: 'flex-end', - backgroundColor: 'rgba(0, 0, 0, 0.9)', - }, - modalSheetContainer: { - backgroundColor: BACKROUND_COLOR, - borderTopLeftRadius: 16, - borderTopRightRadius: 16, - overflow: 'hidden', - alignSelf: 'stretch', - height: '92%', - shadowColor: '#000', - shadowOffset: { width: 0, height: -3 }, - shadowOpacity: 0.1, - shadowRadius: 4, - elevation: 5, - }, }; export default defaultStyles; diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackForm.types.ts index c77bf2c6f7..cffe54447a 100644 --- a/packages/core/src/js/feedback/FeedbackForm.types.ts +++ b/packages/core/src/js/feedback/FeedbackForm.types.ts @@ -204,8 +204,6 @@ export interface FeedbackFormStyles { screenshotText?: TextStyle; titleContainer?: ViewStyle; sentryLogo?: ImageStyle; - modalBackground?: ViewStyle; - modalSheetContainer?: ViewStyle; } /** From ce1de86607d31502c42f827010b4bc9a49105da0 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 31 Jan 2025 16:46:51 +0200 Subject: [PATCH 8/9] Animate background color --- .../src/js/feedback/FeedbackForm.styles.ts | 29 +++++++++++++ .../src/js/feedback/FeedbackFormManager.tsx | 43 +++++++++++++++---- 2 files changed, 63 insertions(+), 9 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackForm.styles.ts index 9cbbfab7f7..1e90af07c6 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackForm.styles.ts @@ -1,3 +1,5 @@ +import type { ViewStyle } from 'react-native'; + import type { FeedbackFormStyles } from './FeedbackForm.types'; const PURPLE = 'rgba(88, 74, 192, 1)'; @@ -79,4 +81,31 @@ const defaultStyles: FeedbackFormStyles = { }, }; +export const modalWrapper: ViewStyle = { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, +}; + +export const modalBackground: ViewStyle = { + flex: 1, + justifyContent: 'flex-end', +}; + +export const modalSheetContainer: ViewStyle = { + backgroundColor: '#ffffff', + borderTopLeftRadius: 16, + borderTopRightRadius: 16, + overflow: 'hidden', + alignSelf: 'stretch', + height: '92%', + shadowColor: '#000', + shadowOffset: { width: 0, height: -3 }, + shadowOpacity: 0.1, + shadowRadius: 4, + elevation: 5, +}; + export default defaultStyles; diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx index caf26d5fce..c6a31fcc70 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx @@ -1,9 +1,9 @@ import { logger } from '@sentry/core'; import * as React from 'react'; -import { Modal, View } from 'react-native'; +import { Animated, Modal, View } from 'react-native'; import { FeedbackForm } from './FeedbackForm'; -import defaultStyles from './FeedbackForm.styles'; +import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles'; import type { FeedbackFormStyles } from './FeedbackForm.types'; import { getFeedbackOptions } from './integration'; import { isModalSupported } from './utils'; @@ -40,9 +40,15 @@ interface FeedbackFormProviderProps { styles?: FeedbackFormStyles; } +interface FeedbackFormProviderState { + isVisible: boolean; + backgroundOpacity: Animated.Value; +} + class FeedbackFormProvider extends React.Component { - public state = { + public state: FeedbackFormProviderState = { isVisible: false, + backgroundOpacity: new Animated.Value(0), }; public constructor(props: FeedbackFormProviderProps) { @@ -50,6 +56,21 @@ class FeedbackFormProvider extends React.Component { FeedbackFormManager.initialize(this._setVisibilityFunction); } + /** + * Animates the background opacity when the modal is shown. + */ + public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void { + if (!prevState.isVisible && this.state.isVisible) { + Animated.timing(this.state.backgroundOpacity, { + toValue: 1, + duration: 300, + useNativeDriver: true, + }).start(); + } else if (prevState.isVisible && !this.state.isVisible) { + this.state.backgroundOpacity.setValue(0); + } + } + /** * Renders the feedback form modal. */ @@ -59,8 +80,12 @@ class FeedbackFormProvider extends React.Component { return <>{this.props.children}; } - const { isVisible } = this.state; - const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles }; + const { isVisible, backgroundOpacity } = this.state; + + const backgroundColor = backgroundOpacity.interpolate({ + inputRange: [0, 1], + outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.9)'], + }); // Wrapping the `Modal` component in a `View` component is necessary to avoid // issues like https://github.com/software-mansion/react-native-reanimated/issues/6035 @@ -68,10 +93,10 @@ class FeedbackFormProvider extends React.Component { <> {this.props.children} {isVisible && ( - + - - + + { - + )} ); From a7a4e56ddd257781b6905ae51e706b1343042049 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 31 Jan 2025 18:57:59 +0200 Subject: [PATCH 9/9] Avoid keyboard in modal --- packages/core/src/js/feedback/FeedbackForm.tsx | 6 +++++- packages/core/src/js/feedback/FeedbackFormManager.tsx | 9 ++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackForm.tsx index 61cf757410..5b8dc28b70 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackForm.tsx @@ -7,6 +7,7 @@ import { Image, Keyboard, KeyboardAvoidingView, + Platform, SafeAreaView, ScrollView, Text, @@ -130,7 +131,10 @@ export class FeedbackForm extends React.Component - + diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackFormManager.tsx index c6a31fcc70..b7b9f9fe55 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/packages/core/src/js/feedback/FeedbackFormManager.tsx @@ -1,6 +1,6 @@ import { logger } from '@sentry/core'; import * as React from 'react'; -import { Animated, Modal, View } from 'react-native'; +import { Animated, KeyboardAvoidingView, Modal, Platform, View } from 'react-native'; import { FeedbackForm } from './FeedbackForm'; import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles'; @@ -95,14 +95,17 @@ class FeedbackFormProvider extends React.Component { {isVisible && ( - + - + )}