Spinner Component

• The Spinner component is a crucial visual element in user interface design, primarily used in React Native applications to indicate loading states or asynchronous processes. This component leverages the native `ActivityIndicator` from React Native and enhances it by incorporating theme-aware color schemes that adapt based on the application's theme settings and specific prop directives for light or dark mode displays.

  The Spinner offers flexibility with the size prop, allowing it to be either 'large' or 'small' based on the need. Additionally, it provides options to enforce light or dark theme colors explicitly, overriding the default behavior that adheres to the current theme. This functionality is particularly useful in scenarios where a fixed style is required, regardless of the operating theme.

  Here is a simple example of how to implement and utilize the Spinner component:

• 
  

  <Spinner size="large" dark />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Start by importing the Spinner component from Minis component library:

import { Spinner } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the Spinner

Incorporate the Spinner into parts of your application where asynchronous actions occur, specifying the desired size and theme behavior:

<Spinner size="small" light />

Examples

Basic Usage:

<Spinner />

Props

• size ('large' | 'small', optional): Determines the size of the spinner, defaults to 'small'.
• light (boolean, optional): Forces the spinner to use the light mode color, regardless of the current theme.
• dark (boolean, optional): Forces the spinner to use the dark mode color, irrespective of the current theme.

For more details on the props, please refer to the Spinner Props.