Alert

Alert provides contextual feedback messages for user actions. Use for important information that requires attention but doesn’t interrupt the user’s flow.

Preview

InformationYour session will expire in 5 minutes.

Variants

Info

General informational messages.

TipTap and hold on a hexagram to see more details.

<Alert variant="info" title="Tip">
  Tap and hold on a hexagram to see more details.
</Alert>

Success

Confirms successful actions.

SuccessYour reading has been saved to your journal.

<Alert variant="success" title="Success">
  Your reading has been saved to your journal.
</Alert>

Warning

Alerts to potential issues.

WarningYou’re offline. Changes will sync when connected.

<Alert variant="warning" title="Warning">
  You're offline. Changes will sync when connected.
</Alert>

Error

Indicates errors or failures.

ErrorFailed to load reading. Please try again.

<Alert variant="error" title="Error">
  Failed to load reading. Please try again.
</Alert>

Without Title

New features are available. Update the app to access them.

<Alert variant="info">
  New features are available. Update the app to access them.
</Alert>

With Action

Subscription ExpiringYour premium subscription expires in 3 days.Renew Now

<Alert
  variant="warning"
  title="Subscription Expiring"
  action={{
    label: 'Renew Now',
    onPress: () => navigation.navigate('Subscription')
  }}
>
  Your premium subscription expires in 3 days.
</Alert>

Dismissible

Welcome Back!You have 3 saved readings to review.

<Alert
  variant="info"
  title="Welcome Back!"
  onClose={() => setShowAlert(false)}
>
  You have 3 saved readings to review.
</Alert>

API Reference

Props

Prop	Type	Default	Description
`children`	`string`	Required	Alert message
`title`	`string`	-	Optional title
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Visual variant
`onClose`	`() => void`	-	Close handler (shows X button)
`action`	`{ label: string; onPress: () => void }`	-	Action button
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Alert, Card, Button } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ReadingScreen() {
  const [showOfflineAlert, setShowOfflineAlert] = useState(true);
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);

  const handleSave = async () => {
    try {
      await saveReading();
      setShowSuccessAlert(true);
    } catch (error) {
      // Error handled by Alert
    }
  };

  return (
    <View style={styles.container}>
      {showOfflineAlert && (
        <Alert
          variant="warning"
          title="Offline Mode"
          onClose={() => setShowOfflineAlert(false)}
        >
          Your reading will be saved locally and synced when online.
        </Alert>
      )}

      {showSuccessAlert && (
        <Alert
          variant="success"
          title="Saved!"
          action={{
            label: 'View Journal',
            onPress: () => navigation.navigate('Journal')
          }}
        >
          Reading saved to your journal.
        </Alert>
      )}

      <Card style={styles.readingCard}>
        {/* Reading content */}
      </Card>

      <Button onPress={handleSave}>
        Save Reading
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    gap: 16,
  },
  readingCard: {
    flex: 1,
  },
});