Activity Indicator

Lets people know that your app isn't stalled while it loads content or performs lengthy operations.

👀 See It Live!Scan the QR code to try this component on your device!

Try It Live

In the Companion App

👀 See It Live!Scan the QR code to try this component on your device!

Try It Live

In the Companion App

import { Stack } from 'expo-router';
import { View, Text, ScrollView } from 'react-native';

import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';

export default function ActivityIndicatorScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativewindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerTransparent: true,
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Activity Indicator
          </Text>
          <View className="p-4">
            <ActivityIndicator />
          </View>
        </View>
      </ScrollView>
    </>
  );
}

Installation

Run the following command:

npx nwui-cli@latest add activity-indicator

🚀

Ship.

Copy/paste the following code to the specified file path:

@/components/nativewindui/ActivityIndicator.tsx

Download

import { ActivityIndicator as RNActivityIndicator } from 'react-native';

import { useColorScheme } from '@/lib/useColorScheme';

function ActivityIndicator(props: React.ComponentProps<typeof RNActivityIndicator>) {
  const { colors } = useColorScheme();
  return <RNActivityIndicator color={colors.primary} {...props} />;
}

export { ActivityIndicator };

🛸

Ship.

Usage

import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';

<ActivityIndicator />

Props

Inherits all the props from React Native's Activity Indicator component.