Box

• The Box component is a foundational element for layout in React Native applications. It extends the basic View component to include additional style properties, enabling it to handle a variety of common layout needs, such as padding, margin, background color, and border radius. This documentation explains the Box component and the ReanimatedBox which adds animation capabilities.
• 
  

  <Box padding="medium" backgroundColor="primary">
    <Text>Inside Box</Text>
  </Box>

Integration

Box and ReanimatedBox can be foundational elements used across Minis, providing a consistent way to apply spacing, alignment, and other styling concerns, as it is a theme-compatible component that can utilize tokens from Shop theme styles specification like colors or spacing that Shop uses.

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

Firstly, ensure the Box component is accessible by importing it at the top of your file:

import { Box, ReanimatedBox } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the Box Component

Incorporate the Box into your component structure by using it in the return statement of your component, providing all necessary props as needed:

<Box padding="medium" backgroundColor="primary">
  <Text>Inside Box</Text>
</Box>

ReanimatedBox

• Purpose: A version of Box that supports animations via react-native-reanimated.
• Base: It wraps the Box component in a Reanimated.createAnimatedComponent to support animations on properties like transform or opacity.
• Usage: Suitable when the box needs to animate its properties in response to user interactions or other changes.

Integration

Step 1: Importing the Component

Firstly, ensure the ReanimatedBox component is accessible by importing it at the top of your file, as well as any animations you plan to use:

import { ReanimatedBox } from '@shopify/shop-minis-platform-sdk'
import { FadeIn, FadeOut } from 'react-native-reanimated'

Step 2: Using the ReanimatedBox Component

Incorporate the ReanimatedBox into your component structure by using it in the return statement of your component, providing animation props from react-native-reanimated:

<ReanimatedBox
  entering={FadeIn}
  exiting={FadeOut}
>
  <Box padding="medium" backgroundColor="primary">
    <Text>Inside ReanimatedBox</Text>
  </Box>
</ReanimatedBox>

ReanimatedBox Usage

import {ReanimatedBox, isSecureContext, Box, Text} from '@shopify/shop-minis-platform-sdk'
import { FadeIn, FadeOut } from 'react-native-reanimated';

<ReanimatedBox
  entering={FadeIn}
  exiting={FadeOut}
  flexDirection="row"
  position="absolute"
  width="100%"
  height="100%"
  justifyContent="center"
>
  <Box position="relative">
    <Icon size="m" name="check" color="foregrounds-contrasting" />
  </Box>
  <Text
    variant="bodyLarge"
    color="foregrounds-contrasting"
    marginLeft="xs"
  >
    Shared
  </Text>
</ReanimatedBox>

Additional Details

• Styling with Continuous Curve: By default, the continuous curve effect is applied to all Box components unless a borderRadius matching BorderRadii.max is specified, making it versatile for various design requirements.
• Theming: Easily integrates with a theme system provided by Shop theme, ensuring that all sizes, colors, and spacing are consistent across the application and easy to maintain.

Props

• style (ViewStyle): Styles to apply to the component, including borderRadius which influences the border curve condition.
• ref (React.Ref): Ref forwarding to access the DOM element or component instance.
• children (React.ReactNode): Content to be rendered within the component.
• animationType (string, optional on ReanimatedBox): Specifies the type of animation to apply, e.g., 'fade', 'spring'.

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