Loading

A Loading component displays a spinner indicator while content is being loaded. Built on top of heroui-native Spinner.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Loading running in the Nayan UI example app

Usage

Source
Loading.tsx
import { View } from 'react-native';
import { NLoading, NText } from '@nayan-ui/native';


export default function LoadingScreen() {
  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Sizes</NText>
      <View className="flex-row gap-6 items-center">
        <NLoading size="sm" />
        <NLoading size="md" />
        <NLoading size="lg" />
      </View>


      <NText className="text-lg font-bold">Not loading</NText>
      <NLoading isLoading={false} />
      <NText className="text-muted">Nothing shows when isLoading=false</NText>


      <NText className="text-lg font-bold">In container</NText>
      <View className="h-32 bg-surface rounded-lg">
        <NLoading size="lg" containerClassName="flex-1 justify-center items-center" />
      </View>
    </View>
  );
}

Attributes

2 props
NameTypeDefaultDetails
containerClassNamestring' 'You can customise container by passing tailwind classes.
...SpinnerPropsSpinnerPropsAll heroui-native Spinner props are supported (size, color, etc.).

Tags

Other components solving nearby problems.