ScreenWidthContainer

• The ScreenWidthContainer component is a fundamental layout tool in Minis, designed to extend its child components to the full width of the screen, negating any horizontal padding or margins that might be set by default or inherited styles. This customization is particularly useful in scenarios where edge-to-edge content presentation is necessary, such as in banners, sliders, or full-width images. As can be seen in the example by side wrapping the Shelf.

  This component operates as a simple but powerful wrapper that uses a negative horizontal margin to offset the usual padding or margins applied within parent components, enabling content to utilize the maximum available screen width.

  Here's a succinct guide to implementing the ScreenWidthContainer component in your project:

• 
  

  <ScreenWidthContainer>
    <Banner content="Welcome to our application!" />
  </ScreenWidthMenu>

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 ScreenWidthContainer from your project's component library:

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

Step 2: Using the ScreenWidthContainer

In your application, wrap any content that needs to extend to the screen edges with the ScreenWidthContainer. Configure it with any additional props as necessary, except for marginHorizontal, which is preset to ensure full-width utilization:

<ScreenWidthContainer>
  <FullWidthImage src="path/to/image.jpg" />
</ScreenWidthContainer>

Examples

Basic Full Width Content:

<ScreenWidthContainer>
  <Text style={{ textAlign: 'center' }}>Enjoy our new collection!</Text>
</ScreenWidthContainer>

Advanced View with Multiple Elements:

<SafeAreaView
  style={{flex: 1, backgroundColor: theme.colors['backgrounds-regular']}}
>
  <ScrollView>
    <Header />
    <Box paddingHorizontal="gutter">
      <Text variant="headerBold" marginBottom="xs">
        Shelf
      </Text>

      {shelves.map(shelf => (
        <Box key={`shelf-${shelf.join('-')}}`} marginBottom="s">
          <Text variant="bodyLarge" marginBottom="xs">
            Shelf with {shelf.length} item(s)
          </Text>

          <ScreenWidthContainer>
            <Shelf
              data={shelf}
              renderItem={renderShelfItem}
              keyExtractor={item => item}
            />
          </ScreenWidthContainer>
        </Box>
      ))}
    </Box>
  </ScrollView>
</SafeAreaView>

Props

• Inherits all properties from BoxProps except for marginHorizontal.
• children (React.ReactNode): Content components that will be displayed within the container.

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