MinisDimensionsProvider and useMinisDimensions Hook

• The MinisDimensionsProvider and the useMinisDimensions hook form a powerful duo for managing and accessing the dimensions of the screen within React Native applications. By providing a context-based approach, these tools enable components to adapt to variable screen sizes dynamically, crucial for responsive design across different devices.

  The MinisDimensionsProvider component listens to layout changes and updates the dimensions in its state, which are then accessible via the useMinisDimensions hook anywhere within its context. This setup is particularly useful for applications that need to handle orientation changes or when dealing with multiple screen sizes and resolutions.

• 
  

  import { MinisDimensionsProvider, useMinisDimensions } from '@path/to/MinisDimensions';
  
  function App() {
    return (
      <MinisDimensionsProvider>
        <YourComponent />
      </MinisDimensionsProvider>
    );
  }
  
  function YourComponent() {
    const { width, height } = useMinisDimensions();
  
    return (
      <View style={{ width: width, height: height }}>
        {/* Content that adjusts based on the screen dimensions */}
      </View>
    );
  }

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 Components

Make sure to import both the context provider and the hook at the top of your root component file:

import { MinisDimensionsProvider, useMinisDimensions } from '@shopify/shop-minis-platform-sdk';

Step 2: Implementing the Provider

Wrap your application's root component with MinisDimensionsProvider to ensure that any component within the app can access the screen dimensions through the context:

function App() {
  return (
    <MinisDimensionsProvider>
      <YourMainComponent />
    </MinisDimensionsProvider>
  );
}

Step 3: Using the useMinisDimensions Hook

In any component within the provider, use useMinisDimensions to access and utilize the current screen dimensions:

function ResponsiveComponent() {
  const { width, height } = useMinisDimensions();

  return (
    <View style={{ width, height }}>
      {/* Component content that adapts to the screen size */}
    </View>
  );
}

Examples

Basic Usage in a Component:

const ResponsiveLayout = () => {
  const { width, height } = useMinisDimensions();

  return (
    <View style={{ flex: 1, width, height }}>
      {/* Responsive layout based on dimensions */}
    </View>
  );
}

The combination of MinisDimensionsProvider and useMinisDimensions allows for efficient and effective responsive design in React Native applications, enabling components to adapt based on the actual device screen dimensions, enhancing user experience and interface adaptability.

Additional Components

• View: Used to create the visual structure within which the dimensions are applied.
• LayoutChangeEvent: Utilized to capture changes in layout and update dimensions accordingly.

Props

• children (React.ReactNode): Content to be rendered within the component.

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