Add back the current geofences button, and some style DRYness

Author: Evan Masseau

example/src/App.tsx

@@ -206,34 +206,40 @@ export default function App() {
 
   const handleGetCurrentGeofences = () => {
     // Note: this @internal method is intended only for demonstration and debugging purposes
-    Klaviyo.getCurrentGeofences((result: { geofences: Array<{
-      identifier: string;
-      latitude: number;
-      longitude: number;
-      radius: number;
-    }> }) => {
-      const { geofences } = result;
-      console.log('Current geofences:', JSON.stringify(geofences, null, 2));
-
-      if (geofences.length === 0) {
-        Alert.alert(
-          'Current Geofences',
-          'No geofences are currently being monitored.',
-          [{ text: 'OK' }]
-        );
-      } else {
-        const geofencesList = geofences
-          .map(
-            (g, index) =>
-              `${index + 1}. ${g.identifier}\n   Center: (${g.latitude.toFixed(6)}, ${g.longitude.toFixed(6)})\n   Radius: ${g.radius.toFixed(2)}m`
-          )
-          .join('\n\n');
-
-        Alert.alert(`Current Geofences (${geofences.length})`, geofencesList, [
-          { text: 'OK' },
-        ]);
+    Klaviyo.getCurrentGeofences(
+      (result: {
+        geofences: Array<{
+          identifier: string;
+          latitude: number;
+          longitude: number;
+          radius: number;
+        }>;
+      }) => {
+        const { geofences } = result;
+        console.log('Current geofences:', JSON.stringify(geofences, null, 2));
+
+        if (geofences.length === 0) {
+          Alert.alert(
+            'Current Geofences',
+            'No geofences are currently being monitored.',
+            [{ text: 'OK' }]
+          );
+        } else {
+          const geofencesList = geofences
+            .map(
+              (g, index) =>
+                `${index + 1}. ${g.identifier}\n   Center: (${g.latitude.toFixed(6)}, ${g.longitude.toFixed(6)})\n   Radius: ${g.radius.toFixed(2)}m`
+            )
+            .join('\n\n');
+
+          Alert.alert(
+            `Current Geofences (${geofences.length})`,
+            geofencesList,
+            [{ text: 'OK' }]
+          );
+        }
       }
-    });
+    );
   };
 
   const handleRequestLocationPermission = async () => {
@@ -377,6 +383,7 @@ export default function App() {
             <ActionButton
               title="Get Current Geofences"
               onPress={handleGetCurrentGeofences}
+              withTopSpacing
             />
           )}
         </View>

example/src/Styles.ts

@@ -1,6 +1,24 @@
 import { StyleSheet, Platform } from 'react-native';
 import { colors, spacing, typography, borderRadius } from './theme';
 
+// Shared base styles for DRY
+const buttonBase = {
+  paddingVertical: spacing.md - 2, // 14px
+  paddingHorizontal: spacing.md,
+  borderRadius: borderRadius.sm,
+  alignItems: 'center' as const,
+  justifyContent: 'center' as const,
+  minHeight: 48,
+  borderWidth: 1,
+  borderColor: colors.primary,
+  backgroundColor: colors.cardBackground,
+};
+
+const rowContainerBase = {
+  flexDirection: 'row' as const,
+  marginHorizontal: -spacing.xs / 2, // Negative margin for spacing trick
+};
+
 export const styles = StyleSheet.create({
   // Container styles
   container: {
@@ -89,21 +107,12 @@ export const styles = StyleSheet.create({
 
   // Action button styles
   actionButtonRow: {
-    flexDirection: 'row',
-    marginHorizontal: -spacing.xs / 2, // Negative margin for spacing
+    ...rowContainerBase,
     marginBottom: spacing.sm,
   },
   actionButton: {
-    backgroundColor: colors.cardBackground,
-    paddingVertical: spacing.md - 2, // 14px
-    paddingHorizontal: spacing.md,
-    borderRadius: borderRadius.sm,
-    alignItems: 'center',
-    justifyContent: 'center',
+    ...buttonBase,
     marginBottom: spacing.sm,
-    minHeight: 48, // Larger touch target for standalone buttons
-    borderWidth: 1,
-    borderColor: colors.primary,
   },
   actionButtonInRow: {
     flex: 1,
@@ -127,27 +136,21 @@ export const styles = StyleSheet.create({
   actionButtonTextDisabled: {
     color: colors.secondaryText,
   },
+  actionButtonWithTopSpacing: {
+    marginTop: spacing.sm,
+  },
 
   // Toggle button styles
   toggleContainer: {
-    flexDirection: 'row',
-    marginHorizontal: -spacing.xs / 2, // Negative margin for spacing trick
+    ...rowContainerBase,
   },
   toggleButton: {
+    ...buttonBase,
     flex: 1,
-    paddingVertical: spacing.md - 2, // 14px
-    paddingHorizontal: spacing.md,
-    borderRadius: borderRadius.sm,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: colors.primary,
-    backgroundColor: colors.cardBackground,
-    minHeight: 48,
     marginHorizontal: spacing.xs / 2, // Half spacing on each side = full spacing between buttons
   },
   toggleButtonActive: {
-    backgroundColor: '#E8F4FF', // Light blue tint for active state
+    backgroundColor: colors.activeButtonTint,
   },
   toggleButtonText: {
     ...typography.button,

example/src/components/ActionButton.tsx

@@ -8,6 +8,7 @@ interface ActionButtonProps {
   disabled?: boolean;
   destructive?: boolean;
   inRow?: boolean;
+  withTopSpacing?: boolean;
 }
 
 /**
@@ -19,6 +20,7 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
   disabled = false,
   destructive = false,
   inRow = false,
+  withTopSpacing = false,
 }) => {
   return (
     <TouchableOpacity
@@ -27,6 +29,7 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
         inRow && styles.actionButtonInRow,
         destructive && styles.actionButtonDestructive,
         disabled && styles.actionButtonDisabled,
+        withTopSpacing && styles.actionButtonWithTopSpacing,
       ]}
       onPress={onPress}
       disabled={disabled}

example/src/theme.ts

@@ -27,6 +27,7 @@ export const colors = {
   // Button states
   buttonText: '#FFFFFF', // White text on buttons
   buttonBorder: '#007AFF', // Border for outlined buttons
+  activeButtonTint: '#E8F4FF', // Light blue tint for active toggle buttons
 };
 
 export const spacing = {