1import { LoadingIndicator, Host } from "@expo/ui/jetpack-compose";
2import { size as composeSize } from "@expo/ui/jetpack-compose/modifiers";
3import { StyleSheet, View, type ActivityIndicatorProps } from "react-native";
4import { useResolveClassNames, withUniwind } from "uniwind";
5
6function AndroidActivityIndicator({
7 animating = true,
8 color,
9 colorClassName: _colorClassName,
10 className: _className,
11 hidesWhenStopped: _hidesWhenStopped,
12 size = "small",
13 style,
14 ...viewProps
15}: ActivityIndicatorProps) {
16 const { color: primaryColor } = useResolveClassNames("text-primary");
17 const diameter = typeof size === "number" ? size : size === "large" ? 48 : 20;
18
19 return (
20 <View
21 accessible={animating}
22 accessibilityRole="progressbar"
23 accessibilityState={{ busy: animating }}
24 {...viewProps}
25 style={[styles.container, style]}
26 >
27 <View
28 pointerEvents="none"
29 importantForAccessibility="no-hide-descendants"
30 style={{ width: diameter, height: diameter }}
31 >
32 {animating ? (
33 <Host ignoreSafeAreaKeyboardInsets style={{ flex: 1 }}>
34 <LoadingIndicator
35 color={color ?? primaryColor}
36 modifiers={[composeSize(diameter, diameter)]}
37 />
38 </Host>
39 ) : null}
40 </View>
41 </View>
42 );
43}
44
45export const AppActivityIndicator = withUniwind(AndroidActivityIndicator);
46
47const styles = StyleSheet.create({
48 container: { alignItems: "center", justifyContent: "center" },
49});