fix: notification preference options are not visible

.maestro/tests/assorted/user-preferences.yaml

@@ -29,18 +29,85 @@ tags:
       id: 'preferences-view-enable-message-parser'
     timeout: 60000
 
-# should have also send to channel select
-- extendedWaitUntil:
-    visible:
-      id: 'preferences-view-enable-message-parser'
-    timeout: 60000
-
 # should have convert ascii to emoji switch
 - extendedWaitUntil:
     visible:
       id: 'preferences-view-convert-ascii-to-emoji'
     timeout: 60000
 
+# Test Notification Preference
+- tapOn:
+    id: preferences-view-notifications
+
+# should have alert for In-App notification
+- assertVisible:
+    id: user-notification-preference-view-alert
+- tapOn:
+    id: user-notification-preference-view-alert
+
+# check options in in-app-notification alert
+- assertVisible:
+    id: notification-preferences-desktopNotifications-default
+- assertVisible:
+    id: notification-preferences-desktopNotifications-all
+- assertVisible:
+    id: notification-preferences-desktopNotifications-mentions
+- assertVisible:
+    id: notification-preferences-desktopNotifications-nothing
+- tapOn:
+    id: action-sheet-handle
+# should have "Vibrate for new messages"
+- assertVisible:
+    id: user-notification-preference-view-in-app-vibration
+
+# should have alert for push notification
+- assertVisible:
+    id: user-notification-preference-view-push-notification
+- tapOn:
+    id: user-notification-preference-view-push-notification
+
+# check options in push-notification alert
+- assertVisible:
+    id: notification-preferences-pushNotifications-default
+- assertVisible:
+    id: notification-preferences-pushNotifications-all
+- assertVisible:
+    id: notification-preferences-pushNotifications-mentions
+- assertVisible:
+    id: notification-preferences-pushNotifications-nothing
+- tapOn:
+    id: action-sheet-handle
+
+# should have troubleshooting
+- assertVisible:
+    id: user-notification-preference-view-troubleshooting
+- tapOn:
+    id: user-notification-preference-view-troubleshooting
+- assertVisible:
+    id: push-troubleshoot-view-allow-push-notifications
+- assertVisible:
+    id: push-troubleshoot-view-push-gateway-connection
+- assertVisible:
+    id: push-troubleshoot-view-notification-delay
+- tapOn:
+    id: custom-header-back
+
+# should have alert in Email
+- assertVisible:
+    id: user-notification-preference-view-email-alert
+- tapOn:
+    id: user-notification-preference-view-email-alert
+
+# check options in email alert
+- assertVisible:
+    id: notification-preferences-emailNotificationMode-mentions
+- assertVisible:
+    id: notification-preferences-emailNotificationMode-nothing
+- tapOn:
+    id: action-sheet-handle
+- tapOn:
+    id: custom-header-back
+
 # ASCII should not be converted to emoji (Android only)
 - runFlow:
     label: 'ASCII should not be converted to emoji'

app/containers/List/ListItem.tsx

@@ -215,6 +215,7 @@ const Content = React.memo(
 
 interface IListButtonPress extends IListItemButton {
 	onPress: Function;
+	style?: ViewStyle;
 }
 
 interface IListItemButton {
@@ -225,7 +226,7 @@ interface IListItemButton {
 	underlayColor?: string;
 }
 
-const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => {
+const Button = React.memo(({ onPress, backgroundColor, underlayColor, style, ...props }: IListButtonPress) => {
 	'use memo';
 
 	const { colors } = useTheme();
@@ -241,7 +242,7 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }
 	return (
 		<Touch
 			onPress={handlePress}
-			style={{ backgroundColor: backgroundColor || colors.surfaceRoom }}
+			style={[{ backgroundColor: backgroundColor || colors.surfaceRoom }, style]}
 			underlayColor={underlayColor}
 			enabled={!props.disabled || !!props.disabledReason}>
 			<Content {...props} />
@@ -252,6 +253,7 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }
 export interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListItemButton, 'theme'> {
 	backgroundColor?: string;
 	onPress?: Function;
+	style?: ViewStyle;
 }
 
 const ListItem = React.memo(({ ...props }: IListItem) => {

app/containers/List/ListRadio.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ViewStyle } from 'react-native';
 
 import i18n from '../../i18n';
 import ListItem, { type IListItem } from './ListItem';
@@ -8,6 +9,7 @@ import { useTheme } from '../../theme';
 interface IListRadio extends IListItem {
 	value: any;
 	isSelected: boolean;
+	style?: ViewStyle;
 }
 
 const ListRadio = ({ value: _, isSelected, ...rest }: IListRadio) => {

app/views/UserNotificationPreferencesView/ListPicker.tsx

@@ -13,6 +13,9 @@ const styles = StyleSheet.create({
 	pickerText: {
 		...sharedStyles.textRegular,
 		fontSize: 16
+	},
+	pickerItem: {
+		height: 48
 	}
 });
 
@@ -52,6 +55,8 @@ const ListPicker = ({
 							hideActionSheet();
 							onChangeValue({ [preference]: i.value.toString() });
 						}}
+						style={styles.pickerItem}
+						testID={`notification-preferences-${preference}-${i.value}`}
 					/>
 					<List.Separator />
 				</React.Fragment>