You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
870 B
40 lines
870 B
'use client';
|
|
import { ActivityIndicator } from 'react-native';
|
|
import React from 'react';
|
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
|
import { cssInterop } from 'nativewind';
|
|
|
|
cssInterop(ActivityIndicator, {
|
|
className: { target: 'style', nativeStyleToProp: { color: true } },
|
|
});
|
|
|
|
const spinnerStyle = tva({});
|
|
|
|
const Spinner = React.forwardRef<
|
|
React.ComponentRef<typeof ActivityIndicator>,
|
|
React.ComponentProps<typeof ActivityIndicator>
|
|
>(function Spinner(
|
|
{
|
|
className,
|
|
color,
|
|
focusable = false,
|
|
'aria-label': ariaLabel = 'loading',
|
|
...props
|
|
},
|
|
ref
|
|
) {
|
|
return (
|
|
<ActivityIndicator
|
|
ref={ref}
|
|
focusable={focusable}
|
|
aria-label={ariaLabel}
|
|
{...props}
|
|
color={color}
|
|
className={spinnerStyle({ class: className })}
|
|
/>
|
|
);
|
|
});
|
|
|
|
Spinner.displayName = 'Spinner';
|
|
|
|
export { Spinner };
|