Layout Component

The Layout component is a flexible container that can display its children or a loading indicator based on the loading prop.

Import

import { Layout } from "@appmaker-xyz/ui";

Props

Prop	Type	Default	Description
children	React.ReactNode	-	The content to be rendered inside the Layout.
loading	boolean	false	If true, displays a loading indicator instead of children.
loadingComponent	function	-	Custom function to render a loading component.
loadingLayout	string	-	Specifies the type of loading layout to use with ActivityIndicator. Using react-native-skeleton-placeholder
props	object	-	Any additional props are passed to the root View component.

Loading Behavior

The Layout component handles loading states in the following priority:

1. If loadingComponent is provided and is a function, it will be called to render the loading state.
2. If defaultLoadingStyle is set in the app-branding plugin settings, it will render a small ActivityIndicator from react-native.
3. Otherwise, it will render the custom ActivityIndicator component with the specified loadingLayout.

Loading Layout Types

The loadingLayout prop accepts the following values:

• "home"
• "product-detail"
• "product-grid"
• "product-scroller"
• "grid"

These types are used to customize the appearance of the ActivityIndicator component.

Usage Example

import React from "react";
import { Layout } from "@appmaker-xyz/ui";

const MyComponent = () => {
  const [isLoading, setIsLoading] = React.useState(true);

  return (
    <Layout loading={isLoading} loadingLayout="home">
      {/* Your content here */}
    </Layout>
  );
};

In this example, the Layout will display a loading indicator with the "home" layout while isLoading is true. Once isLoading becomes false, it will render its children.