LoadingOverlay

The LoadingOverlay component displays a full-screen loading indicator with an optional backdrop. It's perfect for showing loading states during asynchronous operations like API calls or data processing.

It provides:

• Full-screen loading indicator with transparent backdrop
• Customizable spinner size and status colors
• Backdrop styling options
• Auto-dismissible after operations complete

Usage Playground

Show Component

Visible

Size

small

medium

large

Label

Code Snippet

import { LoadingOverlay } from "@react-native-blossom-ui/overlays";

    function Usage() {
        return (
            <LoadingOverlay/>
        );
    }

Usage

The basic usage shows a loading spinner with a transparent backdrop. The overlay is typically displayed during asynchronous operations and dismissed when the operation completes.

Show Loading Overlay

function LoadingOverlayUsage() {
  const [visible, setVisible] = useState(false)

  const showLoading = () => {
    setVisible(true)
    setTimeout(() => setVisible(false), 2000)
  }

  return (
    <View>
      <Button onPress={showLoading}>Show Loading Overlay</Button>
      <LoadingOverlay visible={visible} />
    </View>
  )
}

Custom

Customize the loading overlay with different spinner sizes, status colors, and backdrop styles. You can adjust the backdrop opacity and color to match your app's design.

Custom Loading Overlay

function LoadingOverlayCustom() {
  const [visible, setVisible] = useState(false)

  const showLoading = () => {
    setVisible(true)
    setTimeout(() => setVisible(false), 3000)
  }

  return (
    <View>
      <Button onPress={showLoading}>Custom Loading Overlay</Button>
      <LoadingOverlay
        visible={visible}
        size={80}
        status="error"
        backdropStyle={{
          backgroundColor: 'rgba(100, 100, 100, 0.5)',
        }}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	ModalProps	--	Inherits properties from ModalProps
visible	boolean	true	Set to false to hide it
size	number | BlossomSize	medium	Control the size using pre-defined options
label	string	--	Label text below indicator
labelStyle	StyleProp<TextStyle>	--	Label text style
containerStyle	StyleProp<ViewStyle>	--	Container style wrapping both label and ActivityIndicator