Skip to content

Banner

Banner displays important messages inline with content. Use for announcements, status updates, or contextual information.

Preview

Variants

<Banner variant="info" message="This is an info message." />
<Banner variant="success" message="This is a success message." />
<Banner variant="warning" message="This is a warning message." />
<Banner variant="error" message="This is an error message." />

With Title

<Banner
  variant="success"
  title="Reading Saved"
  message="Your reading has been saved to your journal."
  onDismiss={() => setShowBanner(false)}
/>

With Action

<Banner
  variant="info"
  title="Update Available"
  message="A new version is available with new hexagrams."
  action={{ label: 'Update Now', onPress: handleUpdate }}
  onDismiss={() => setShowBanner(false)}
/>

Full-width announcement strip.

<AnnouncementBanner
  message="New: Daily hexagram readings are now available!"
  onPress={() => navigate('/daily')}
  onDismiss={() => setShowAnnouncement(false)}
/>

API Reference

Prop	Type	Default	Description
`message`	`string`	Required	Banner message
`title`	`string`	-	Banner title
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Banner variant
`icon`	`ReactNode`	-	Custom icon
`onDismiss`	`() => void`	-	Dismiss handler
`action`	`{ label: string; onPress: () => void }`	-	Action button
`style`	`ViewStyle`	-	Custom styles

AnnouncementBanner Props

Prop	Type	Default	Description
`message`	`string`	Required	Announcement text
`onPress`	`() => void`	-	Press handler
`onDismiss`	`() => void`	-	Dismiss handler
`style`	`ViewStyle`	-	Custom styles