Activity Indicator

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

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 * as React from 'react';
import { ActivityIndicator as RNActivityIndicator } from 'react-native';

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

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

export { ActivityIndicator }

🚢

Ship.

Usage

index.tsx

Download

import { View } from 'react-native';

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

function ActivityIndicatorExample() {
  return (
    <View className="items-center p-4">
      <ActivityIndicator />
    </View>
  );
}

Activity Indicator

Installation

Usage

NativeWindUI