chore: update demo code from RN repo

Author: fadi-george

examples/build.md

@@ -106,7 +106,7 @@ Build the app with:
 - TypeScript with strict mode enabled
 - OneSignal brand colors and a consistent stylesheet-based theme
 - App name: "OneSignal Demo"
-- Top navigation header: centered title with OneSignal logo SVG + "Sample App" text
+- Top navigation header: centered title with OneSignal logo SVG + "Expo" text
 - Support for both Android and iOS
 - Android package name: com.onesignal.example
 - iOS bundle identifier: com.onesignal.example

examples/demo/App.tsx

@@ -24,7 +24,7 @@ import LogManager from './src/services/LogManager';
 import OneSignalApiService from './src/services/OneSignalApiService';
 import PreferencesService from './src/services/PreferencesService';
 import TooltipHelper from './src/services/TooltipHelper';
-import { Colors } from './src/theme';
+import { AppColors } from './src/theme';
 
 const Stack = createNativeStackNavigator();
 const log = LogManager.getInstance();
@@ -136,16 +136,17 @@ function App() {
   return (
     <SafeAreaProvider>
       <StatusBar
-        backgroundColor={Colors.oneSignalRed}
+        backgroundColor={AppColors.osPrimary}
         barStyle="light-content"
       />
       <AppContextProvider>
         <NavigationContainer>
           <Stack.Navigator
             screenOptions={{
-              headerStyle: { backgroundColor: Colors.oneSignalRed },
-              headerTintColor: Colors.white,
+              headerStyle: { backgroundColor: AppColors.osPrimary },
+              headerTintColor: AppColors.white,
               headerTitleAlign: 'center',
+              headerShadowVisible: false,
             }}
           >
             <Stack.Screen
@@ -159,7 +160,7 @@ function App() {
                       width={99}
                       style={headerStyles.logo}
                     />
-                    <Text style={headerStyles.subtitle}>Sample App</Text>
+                    <Text style={headerStyles.subtitle}>Expo</Text>
                   </View>
                 ),
               }}
@@ -188,8 +189,7 @@ const headerStyles = StyleSheet.create({
   subtitle: {
     fontSize: 14,
     fontWeight: '400',
-    color: Colors.white,
-    opacity: 0.9,
+    color: AppColors.white,
   },
 });
 

examples/demo/src/components/ActionButton.tsx

@@ -6,7 +6,7 @@ import {
   View,
   ActivityIndicator,
 } from 'react-native';
-import { Colors, Spacing } from '../theme';
+import { AppColors, AppSpacing } from '../theme';
 
 interface Props {
   label: string;
@@ -31,19 +31,17 @@ export default function ActionButton({
   iconPosition = 'left',
   leftAligned,
 }: Props) {
-  const bgColor =
-    variant === 'primary'
-      ? Colors.oneSignalRed
-      : variant === 'destructive'
-      ? Colors.destructiveRed
-      : 'transparent';
+  const bgColor = variant === 'primary' ? AppColors.osPrimary : 'transparent';
 
   const borderStyle =
-    variant === 'outlined'
-      ? { borderWidth: 1, borderColor: Colors.oneSignalRed }
+    variant === 'outlined' || variant === 'destructive'
+      ? { borderWidth: 1, borderColor: AppColors.osPrimary }
       : {};
 
-  const textColor = variant === 'outlined' ? Colors.oneSignalRed : Colors.white;
+  const textColor =
+    variant === 'outlined' || variant === 'destructive'
+      ? AppColors.osPrimary
+      : AppColors.white;
 
   return (
     <TouchableOpacity
@@ -78,10 +76,11 @@ export default function ActionButton({
 const styles = StyleSheet.create({
   button: {
     borderRadius: 8,
-    paddingVertical: 14,
+    height: 48,
+    justifyContent: 'center',
     paddingHorizontal: 16,
     width: '100%',
-    marginBottom: Spacing.cardGap,
+    marginBottom: AppSpacing.gap,
   },
   inner: {
     flexDirection: 'row',
@@ -94,8 +93,6 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 14,
     fontWeight: '600',
-    letterSpacing: 0.5,
-    textTransform: 'uppercase',
   },
   iconLeft: {
     marginRight: 8,

examples/demo/src/components/ListWidgets.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialIcons as Icon } from '@expo/vector-icons';
-import { Colors, AppTheme } from '../theme';
+import { AppColors, AppTextStyles, AppTheme } from '../theme';
 
 // PairItem
 interface PairItemProps {
@@ -46,7 +46,7 @@ export function PairItem({
           onPress={onDelete}
           hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         >
-          <Icon name="close" size={18} color={Colors.textSecondary} />
+          <Icon name="close" size={18} color={AppColors.osPrimary} />
         </TouchableOpacity>
       )}
     </View>
@@ -71,7 +71,7 @@ export function SingleItem({ value, onDelete, testID }: SingleItemProps) {
           onPress={onDelete}
           hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         >
-          <Icon name="close" size={18} color={Colors.textSecondary} />
+          <Icon name="close" size={18} color={AppColors.osPrimary} />
         </TouchableOpacity>
       )}
     </View>
@@ -187,69 +187,68 @@ const styles = StyleSheet.create({
   pairRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   pairStackedContent: {
     flex: 1,
     marginRight: 8,
   },
   pairStackedKey: {
-    fontSize: 15,
-    color: Colors.textPrimary,
-    fontWeight: '500',
+    ...AppTextStyles.bodyMedium,
     marginBottom: 2,
   },
   pairStackedValue: {
-    fontSize: 14,
-    color: Colors.textSecondary,
+    ...AppTextStyles.bodySmall,
+    color: AppColors.osGrey600,
   },
   pairKey: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
-    color: Colors.textSecondary,
+    color: AppColors.osGrey600,
   },
   pairSeparator: {
     fontSize: 14,
-    color: Colors.dividerColor,
+    color: AppColors.osDivider,
     marginHorizontal: 8,
   },
   pairValue: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
-    color: Colors.textPrimary,
+    color: AppColors.osGrey700,
     textAlign: 'right',
     marginRight: 8,
   },
   singleRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   singleValue: {
+    ...AppTextStyles.bodyMedium,
     flex: 1,
-    fontSize: 14,
-    color: Colors.textPrimary,
+    color: AppColors.osGrey700,
   },
   emptyContainer: {
-    paddingVertical: 8,
+    paddingVertical: 12,
     alignItems: 'center',
   },
   emptyText: {
-    fontSize: 14,
-    color: Colors.textSecondary,
-    fontStyle: 'italic',
+    ...AppTextStyles.bodyMedium,
+    color: AppColors.osGrey600,
   },
   divider: {
     height: 1,
-    backgroundColor: Colors.dividerColor,
+    backgroundColor: AppColors.osDivider,
   },
   moreButton: {
-    paddingVertical: 8,
+    paddingVertical: 4,
     alignItems: 'center',
   },
   moreText: {
-    fontSize: 13,
-    color: Colors.oneSignalRed,
+    fontSize: 14,
+    color: AppColors.osPrimary,
     fontWeight: '500',
   },
 });

examples/demo/src/components/LoadingOverlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, ActivityIndicator, StyleSheet } from 'react-native';
-import { Colors } from '../theme';
+import { AppColors } from '../theme';
 
 interface Props {
   visible: boolean;
@@ -12,15 +12,15 @@ export default function LoadingOverlay({ visible }: Props) {
   }
   return (
     <View style={styles.overlay}>
-      <ActivityIndicator size="large" color={Colors.oneSignalRed} />
+      <ActivityIndicator size="large" color={AppColors.osPrimary} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.3)',
+    backgroundColor: AppColors.osBackdrop,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 999,