Skip to Content
Customization

Customization Options

The SmartStack component automatically handles styling and animations based on device dimensions, but does offer some customization options:

Basic Props

<SmartStack
// Required
widgets={widgets}
 
// Optional
defaultExpanded={false} // Start expanded or collapsed
expanded={boolean} // Controlled expansion state
onExpandChange={(isExpanded: boolean) => void} // Expansion callback
onIndexChange={(index: number) => void} // Active widget callback
/>

Automatic Responsive Sizing

The component automatically adjusts its dimensions based on device size:

  • Large devices (width ≥ 430px or height ≥ 900px):

    • Width: 370px
    • Height: 176px

  • Small devices (height ≤ 700px):

    • Width: 335px
    • Height: 161px

  • Default size:

    • Width: 344px
    • Height: 164px

Built-in Styling

The component includes:

  • Blur effect with 80% intensity using expo-blur
  • Semi-transparent background (rgba(255, 255, 255, 0.25))
  • White navigation dots (5px diameter)
  • Smooth spring animations for expansion/collapse
  • Widget label text (12px, white)

NOTE: These built-in styles are currently not customizable through props, but provide a pixel-perfect match to the iOS 18 Smart Stack widget design. If you need custom styling, consider wrapping the SmartStack component or submitting a feature request.

All customization props are optional and come with sensible defaults that match the iOS design. For a complete list of available props and their default values, see the API Reference.

Last updated on
Widgets