ToggleButton

• The ToggleButton component is a versatile UI element designed for React Native applications that provides an interactive button experience, suitable for toggling selections such as settings options. This component supports visual feedback through color changes and icons to indicate its state, enhancing user interaction by clearly showing active states.

  The ToggleButton integrates smoothly with animations using the 'react-native-reanimated' library, enabling transitions such as a fade effect when changing states, thus providing a smooth and polished user experience. Additionally, it supports accessibility standards by using the appropriate accessibilityRole.

  Explore the ToggleButton functionality through the MultipleChoice component demo. Scan the QR code in the image to see the ToggleButton in action.

  Here is a straightforward example to integrate the ToggleButton component within your React Native projects:

• 
  

  <ToggleButton
    label="Enable Notifications"
    selected={true}
    onPress={() => console.log("Toggled")}
  />

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.

Integration

Step 1: Importing the Component

Import the ToggleButton component from the @shopify/shop-minis-platform-sdk:

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

Step 2: Using the ToggleButton

Deploy the ToggleButton in your application where a toggleable option is required, configuring it with necessary props:

<ToggleButton
  label="Dark Mode"
  selected={isDarkModeEnabled}
  onPress={toggleDarkMode}
  disabled={false}
  secondaryLabel="Optional right-side label"
/>

Examples

Basic Usage:

<ToggleButton
  label="Subscribe to Newsletter"
  onPress={handleSubscriptionChange}
/>

Advanced Usage with Secondary Label and Custom Styles:

<ToggleButton
  label="Bluetooth"
  secondaryLabel="Enabled"
  selected={isBluetoothOn}
  onPress={toggleBluetooth}
  style={{
    toggleButtonStyle: { backgroundColor: 'blue' },
    selectedTextStyle: { color: 'white' }
  }}
/>

Props

• label (string): The primary label for the button.
• secondaryLabel (string?): An optional label displayed on the right side of the button.
• selected (boolean): Indicates whether the button is in the selected state.
• onPress ((label: string) => void): Function called when the button is pressed.
• disabled (boolean): If true, the button is non-interactive.
• textDecoration (TextStyle['textDecorationLine']): Optional text decoration for the label.
• isListItem (boolean): Adds a delay to the onPress mechanism to support list scrolling interaction without unwanted triggers.

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