chore(demo): add clear all notifications button

fadi-george · fadi-george · commit f4e7763f1f2f · 2026-03-13T11:54:55.000-07:00
diff --git a/examples/build.md b/examples/build.md
@@ -1,6 +1,11 @@
 # OneSignal Expo Sample App - Build Guide
 
-This document covers Expo-specific setup and adaptations. For the full feature spec, UI sections, architecture, and shared implementation details, see the [generic build guide](https://github.com/OneSignal/sdk-shared/blob/main/demo/build.md).
+This document extends the shared build guide with Expo-specific details.
+
+**Read the shared guide first:**
+https://raw.githubusercontent.com/OneSignal/sdk-shared/refs/heads/main/demo/build.md
+
+Replace `{{PLATFORM}}` with `Expo` everywhere in that guide. Everything below either overrides or supplements sections from the shared guide.
 
 ---
 
diff --git a/examples/demo/bun.lock b/examples/demo/bun.lock
diff --git a/examples/demo/src/components/modals/CustomNotificationModal.tsx b/examples/demo/src/components/modals/CustomNotificationModal.tsx
@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -61,6 +61,7 @@ export default function CustomNotificationModal({
             value={title}
             onChangeText={setTitle}
             autoFocus
+            {...AppInputProps}
             testID="custom_notification_title_input"
           />
           <TextInput
@@ -69,6 +70,7 @@ export default function CustomNotificationModal({
             placeholderTextColor={AppColors.osGrey600}
             value={body}
             onChangeText={setBody}
+            {...AppInputProps}
             testID="custom_notification_body_input"
           />
           <View style={AppDialogStyles.actions}>
diff --git a/examples/demo/src/components/modals/LoginModal.tsx b/examples/demo/src/components/modals/LoginModal.tsx
@@ -9,7 +9,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -55,6 +55,7 @@ export default function LoginModal({ visible, onConfirm, onClose }: Props) {
             value={userId}
             onChangeText={setUserId}
             autoFocus
+            {...AppInputProps}
             testID="login_user_id_input"
           />
           <View style={AppDialogStyles.actions}>
diff --git a/examples/demo/src/components/modals/MultiPairInputModal.tsx b/examples/demo/src/components/modals/MultiPairInputModal.tsx
@@ -11,7 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import { MaterialIcons as Icon } from '@expo/vector-icons';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Row {
   id: number;
@@ -107,6 +107,7 @@ export default function MultiPairInputModal({
                     value={row.key}
                     onChangeText={(t) => updateRow(row.id, 'key', t)}
                     autoFocus={idx === 0}
+                    {...AppInputProps}
                     testID={idx === 0 ? 'multi_pair_key_0' : undefined}
                   />
                   <TextInput
@@ -115,6 +116,7 @@ export default function MultiPairInputModal({
                     placeholderTextColor={AppColors.osGrey600}
                     value={row.value}
                     onChangeText={(t) => updateRow(row.id, 'value', t)}
+                    {...AppInputProps}
                     testID={idx === 0 ? 'multi_pair_value_0' : undefined}
                   />
                   {rows.length > 1 && (
diff --git a/examples/demo/src/components/modals/OutcomeModal.tsx b/examples/demo/src/components/modals/OutcomeModal.tsx
@@ -9,7 +9,12 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppTextStyles, AppDialogStyles } from '../../theme';
+import {
+  AppColors,
+  AppTextStyles,
+  AppDialogStyles,
+  AppInputProps,
+} from '../../theme';
 
 type OutcomeType = 'normal' | 'unique' | 'withValue';
 
@@ -103,6 +108,7 @@ export default function OutcomeModal({
             value={name}
             onChangeText={setName}
             autoFocus
+            {...AppInputProps}
             testID="outcome_name_input"
           />
           {outcomeType === 'withValue' && (
@@ -113,6 +119,7 @@ export default function OutcomeModal({
               value={value}
               onChangeText={setValue}
               keyboardType="numeric"
+              {...AppInputProps}
               testID="outcome_value_input"
             />
           )}
diff --git a/examples/demo/src/components/modals/PairInputModal.tsx b/examples/demo/src/components/modals/PairInputModal.tsx
@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -78,6 +78,7 @@ export default function PairInputModal({
               value={keyValue}
               onChangeText={setKeyValue}
               autoFocus
+              {...AppInputProps}
               testID={keyTestID}
             />
             <TextInput
@@ -90,6 +91,7 @@ export default function PairInputModal({
               placeholderTextColor={AppColors.osGrey600}
               value={val}
               onChangeText={setVal}
+              {...AppInputProps}
               testID={valueTestID}
             />
           </View>
diff --git a/examples/demo/src/components/modals/SingleInputModal.tsx b/examples/demo/src/components/modals/SingleInputModal.tsx
@@ -9,7 +9,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { AppColors, AppDialogStyles } from '../../theme';
+import { AppColors, AppDialogStyles, AppInputProps } from '../../theme';
 
 interface Props {
   visible: boolean;
@@ -67,6 +67,7 @@ export default function SingleInputModal({
             onChangeText={setValue}
             keyboardType={keyboardType}
             autoFocus
+            {...AppInputProps}
             testID={testID}
           />
           <View style={AppDialogStyles.actions}>
diff --git a/examples/demo/src/components/modals/TrackEventModal.tsx b/examples/demo/src/components/modals/TrackEventModal.tsx
@@ -14,6 +14,7 @@ import {
   AppTextStyles,
   AppSpacing,
   AppDialogStyles,
+  AppInputProps,
 } from '../../theme';
 
 interface Props {
@@ -103,6 +104,7 @@ export default function TrackEventModal({
             value={name}
             onChangeText={setName}
             autoFocus
+            {...AppInputProps}
             testID="track_event_name_input"
           />
           <Text style={styles.label}>Properties (optional, JSON)</Text>
@@ -117,6 +119,7 @@ export default function TrackEventModal({
             value={propertiesText}
             onChangeText={handlePropertiesChange}
             multiline
+            {...AppInputProps}
             testID="track_event_properties_input"
           />
           {!!jsonError && <Text style={styles.errorText}>{jsonError}</Text>}
diff --git a/examples/demo/src/components/sections/SendPushSection.tsx b/examples/demo/src/components/sections/SendPushSection.tsx
@@ -7,12 +7,14 @@ import { NotificationType } from '../../models/NotificationType';
 interface Props {
   onSendNotification: (type: NotificationType) => void;
   onSendCustomNotification: (title: string, body: string) => void;
+  onClearAll: () => void;
   onInfoTap?: () => void;
 }
 
 export default function SendPushSection({
   onSendNotification,
   onSendCustomNotification,
+  onClearAll,
   onInfoTap,
 }: Props) {
   const [customVisible, setCustomVisible] = useState(false);
@@ -34,6 +36,12 @@ export default function SendPushSection({
         onPress={() => setCustomVisible(true)}
         testID="send_custom_push_button"
       />
+      <ActionButton
+        label="CLEAR ALL"
+        variant="outlined"
+        onPress={onClearAll}
+        testID="clear_all_notifications_button"
+      />
       <CustomNotificationModal
         visible={customVisible}
         onConfirm={(title, body) => {
diff --git a/examples/demo/src/context/AppContext.tsx b/examples/demo/src/context/AppContext.tsx
@@ -257,6 +257,7 @@ type AppContextValue = {
   setPushEnabled: (enabled: boolean) => void;
   sendNotification: (type: NotificationType) => Promise<void>;
   sendCustomNotification: (title: string, body: string) => Promise<void>;
+  clearAllNotifications: () => void;
   setIamPaused: (paused: boolean) => Promise<void>;
   sendIamTrigger: (iamType: string) => void;
   addAlias: (label: string, id: string) => void;
@@ -551,6 +552,12 @@ export function AppContextProvider({ children }: Props) {
     [],
   );
 
+  const clearAllNotifications = useCallback(() => {
+    repository.clearAllNotifications();
+    log.i(TAG, 'All notifications cleared');
+    Toast.show({ type: 'info', text1: 'All notifications cleared' });
+  }, []);
+
   const setIamPaused = useCallback(async (paused: boolean) => {
     dispatch({ type: 'SET_IAM_PAUSED', payload: paused });
     repository.setPaused(paused);
@@ -727,6 +734,7 @@ export function AppContextProvider({ children }: Props) {
       setPushEnabled,
       sendNotification,
       sendCustomNotification,
+      clearAllNotifications,
       setIamPaused,
       sendIamTrigger,
       addAlias,
@@ -759,6 +767,7 @@ export function AppContextProvider({ children }: Props) {
       setPushEnabled,
       sendNotification,
       sendCustomNotification,
+      clearAllNotifications,
       setIamPaused,
       sendIamTrigger,
       addAlias,
diff --git a/examples/demo/src/repositories/OneSignalRepository.ts b/examples/demo/src/repositories/OneSignalRepository.ts
@@ -130,6 +130,10 @@ class OneSignalRepository {
     return OneSignal.Notifications.requestPermission(fallbackToSettings);
   }
 
+  clearAllNotifications(): void {
+    OneSignal.Notifications.clearAll();
+  }
+
   // In-App Messages
   setPaused(paused: boolean): void {
     OneSignal.InAppMessages.setPaused(paused);
diff --git a/examples/demo/src/screens/HomeScreen.tsx b/examples/demo/src/screens/HomeScreen.tsx
@@ -84,6 +84,7 @@ export default function HomeScreen() {
         <SendPushSection
           onSendNotification={app.sendNotification}
           onSendCustomNotification={app.sendCustomNotification}
+          onClearAll={app.clearAllNotifications}
           onInfoTap={() => showTooltipModal('sendPushNotification')}
         />
 
diff --git a/examples/demo/src/theme.ts b/examples/demo/src/theme.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextInputProps } from 'react-native';
 
 export const AppColors = {
   osPrimary: '#E54B4D',
@@ -34,6 +34,12 @@ export const AppTextStyles = StyleSheet.create({
   labelSmall: { fontSize: 11, fontWeight: '500' },
 });
 
+export const AppInputProps: TextInputProps = {
+  autoCorrect: false,
+  autoCapitalize: 'none',
+  autoComplete: 'off',
+};
+
 export const AppTheme = StyleSheet.create({
   card: {
     borderRadius: 12,
