ActivityIndicator

An extension of the React Native ActivityIndicator component with extension of visible and label props. This shows the native loader for both android & iOS and also web platform.

Usage Playground

Visible

Size

small

medium

large

Label

Code Snippet

import { ActivityIndicator } from "@react-native-blossom-ui/components";

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

Usage

function ActivityIndicatorUsage() {
  return (
    <View>
      <ActivityIndicator />
    </View>
  )
}

Status

function ActivityIndicatorStatuses() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <ActivityIndicator status="primary" />
      <ActivityIndicator status="accent" />
      <ActivityIndicator status="success" />
      <ActivityIndicator status="info" />
      <ActivityIndicator status="warning" />
      <ActivityIndicator status="error" />
    </View>
  )
}

Size

small

medium

large

function ActivityIndicatorSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <ActivityIndicator size="small" label="small" />
      <ActivityIndicator size="medium" label="medium" />
      <ActivityIndicator size="large" label="large" />
    </View>
  )
}

Custom

Loading...

Fetching your data...

function ActivityIndicatorCustom() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <ActivityIndicator color="green" size={40} label="Loading..." />
      <ActivityIndicator
        color="cyan"
        size={80}
        label="Fetching your data..."
        labelStyle={{fontSize: 18}}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNActivityIndicatorProps	--	Inherits properties from RNActivityIndicatorProps
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