Activity Indicator

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

Installation

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

~/components/nativewindui/ActivityIndicator.tsx
import * as React from 'react';
import { ActivityIndicator as RNActivityIndicator } from 'react-native';

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

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

Usage

index.tsx
import { View } from 'react-native';

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

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