react-native#ActivityIndicator TypeScript Examples

LoadingPopup = ({ visible }: LoadingPopupProps) => {
  const opacity = useTimingTransition(visible, {
    duration: visible ? 100 : 50,
  })

  return (
    <Animated.View pointerEvents="none" style={[styles.backdrop, { opacity }]}>
      <View style={styles.card}>
        <ActivityIndicator size={44} animating={visible} />
        <Text style={styles.text}>Please wait...</Text>
      </View>
    </Animated.View>
  )
}

ButtonWorker: FC<ButtonWorkerProps> = (props) => {
  const { title, onPress, children } = props;
  const [working, setWorking] = useState<boolean>(false);

  function onButtonPress() {
    if (working) {
      return;
    }

    setWorking(true);
    onPress?.(() => setWorking(false));
  }

  return (
    <TouchableOpacity
      disabled={working}
      activeOpacity={0.6}
      onPress={onButtonPress}
      style={ButtonWorkerStyle.button}
    >
      {working ? (
        <ActivityIndicator color={ButtonWorkerStyle.text.color} />
      ) : title ? (
        <Text style={ButtonWorkerStyle.text}>{title}</Text>
      ) : (
        children
      )}
    </TouchableOpacity>
  );
}

withLoading = <P extends object>(
  Component: React.ComponentType<P>
): React.FC<P & WithLoadingProps> => ({
  loading,
  activityIndicatorSize,
  activityIndicatorColor,
  ...props
}: WithLoadingProps): ReactElement =>
  loading ? (
    <ActivityIndicator
      size={activityIndicatorSize || 'small'}
      color={
        (activityIndicatorColor && activityIndicatorColor.toString()) ||
        Colors.INACTIVE_ICON.toString()
      }
    />
  ) : (
    <Component {...(props as P)} />
  )

Loading: React.FC<ILoadingProps> = ({ isFullScreen }) => {
  return (
    <Box
      style={StyleSheet.absoluteFill}
      backgroundColor={isFullScreen ? 'overlay' : 'transparent'}
      justifyContent="center"
      alignItems="center"
    >
      <ActivityIndicator color="#347AF0" size="large" />
    </Box>
  );
}

Loading = (): JSX.Element => {
  const isLoading = useSelector(selectors.loading.getVisibility);
  const isRenderable = useSelector(selectors.app.getRenderableState);

  return (
    <Overlay isVisible={isLoading && !isRenderable}>
      <ActivityIndicator size="large" color="black"/>
    </Overlay>
  );
}

_FullScreenLoadingIndicator: React.FC<FullScreenLoadingIndicatorProps> = (
  props,
) => {
  return (
    <Modal visible={props.visible} animationType="fade" transparent>
      <View style={_styles.container}>
        <View style={_styles.box}>
          <ActivityIndicator color={'white'} size="large" />
        </View>
      </View>
    </Modal>
  );
}

Routes: React.FC = () => {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#999" />
      </View>
    );
  }

  return user ? <AppRoutes /> : <AuthRoutes />;
}

OnboardProgressing = () => {
  const STRING = {
    TITLE: I18n.t('in_progress'),
    SUB_TITLE: I18n.t('please_wait'),
  }
  const navigation = useNavigation()
  const resetTo = useResetTo()
  useEffect(() => {
    setTimeout(() => {
      applicationState.setData('isPassedOnboarding', true)
      // if (applicationState.getData('filledQuestionaireV2')) {
      //   navigation.navigate('OnboardComplete')
      // } else {
      //   resetTo({ routeName: 'Questionaire' })
      // }
      navigation.navigate('OnboardComplete')
    }, 1000)
  }, [])
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor={COLORS.WHITE} barStyle="dark-content" />
      <View style={{ height: 56 }} />
      <View style={styles.header}>
        <Text style={styles.title}>{STRING.TITLE}</Text>
        <Text style={styles.subtitle}>{STRING.SUB_TITLE}</Text>
      </View>
      <View style={styles.content}>
        <ActivityIndicator size="large" color={COLORS.BLACK_1} />
      </View>
    </SafeAreaView>
  )
}

Routes: React.FC = () => {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#999" />
      </View>
    );
  }

  return user ? <AppRoutes /> : <AuthRoutes />;
}

useHUD = () => {
  const hud = useContext(HUDContext);
  return useMemo(() => {
    if (!hud) {
      return {};
    }
    return {
      showSpinner: hud.showCustomComponent.bind(
        hud,
        <ActivityIndicator size="large" color="white" />
      ),
      showSuccess: hud.showSuccess.bind(hud),
      hide: hud.hide.bind(hud),
      showError: hud.showError.bind(hud),
      showCustomIcon: hud.showCustomIcon.bind(hud),
      showCustomComponent: hud.showCustomComponent.bind(hud)
    };
  }, [hud]);
}

function SelectActionButton() {
    const state = usePlaybackState();
    const defaultStyles = useDefaultStyles();

    switch(state) {
        case State.Playing:
            return (
                <Pressable onPress={TrackPlayer.pause}>
                    <PauseIcon fill={defaultStyles.text.color} height={18} width={18} />
                </Pressable>
            );
        case State.Stopped:
        case State.Paused:
            return (
                <Pressable onPress={TrackPlayer.play}>
                    <PlayIcon fill={defaultStyles.text.color} height={18} width={18} />
                </Pressable>
            );
        // @ts-expect-error For some reason buffering isn't stated right in the types
        case 'buffering':
        case State.Buffering:
        case State.Connecting:
            return (
                <Pressable onPress={TrackPlayer.stop}>
                    <ActivityIndicator />
                </Pressable>
            );
        default:
            return null;
    }
}

LoadingButton: React.FC<
  TouchableOpacityProps & { isLoading: boolean }
> = ({ isLoading, children, disabled, ...props }) => {
  const { buttonForeground } = useTheme();
  return (
    <MyButton {...props} disabled={disabled || isLoading}>
      {isLoading ? <ActivityIndicator color={buttonForeground} /> : children}
    </MyButton>
  );
}

DataFetchingExample = () => {
  /**
   * Data fetching example
   */
  const { data, error } = useSwr<RepoReadme>(
    githubService.paths.getRepoReadme(),
    githubService.client.get
  )

  if (error) return <Text>failed to load</Text>
  if (!data) return <ActivityIndicator color="blue" size={30} />

  return (
    <>
      <Text style={styles.header}>Data Fetching Example</Text>
      <Space.V s={8} />
      <ScrollView style={styles.scrollView}>
        <Text>{base64Util.atob(data.content.trim())}</Text>
      </ScrollView>
    </>
  )
}

Spinner = ({
  size = 'large',
  color,
  style = {},
}: Props): React.ReactElement => {
  const { theme } = useContext(ThemeContext);
  return (
    <ActivityIndicator
      style={style}
      size={size}
      color={color ?? theme.colors?.primary}
    />
  );
}

PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({ onPress, loading, style, disabled, children }) => {
  return (
    <View style={style}>
      <TouchableOpacity style={[
                          styles.button,
                          disabled && {opacity: 0.5}
                        ]}
                        onPress={onPress}
                        disabled={disabled}
      >
        {loading ? (
          <ActivityIndicator color={colors.textInverted}/>
        ) : (
          <Text style={styles.text}>{children}</Text>
        )}
      </TouchableOpacity>
    </View>
  );
}

render() {

        const loading = this.props.loading === 'promise'
            ? (this.state.loading || false)
            : this.props.loading;

        const content = loading
            ? (React.isValidElement(this.props.activity)
                ? this.props.activity
                : <ActivityIndicator size="small" {...this.props.activity} />)
            : this.props.children;

        return (
            <Button
                {...this.props}
                onPress={this.onPress}
                title={loading ? null : this.props.title}
                disabled={loading || this.props.disabled}
            >
                {content}
            </Button>
        );
    }

export default function Button({
  title,
  variant = 'default',
  disabled,
  loading,
  onPress,
  ...props
}: Props) {
  const titleElement = React.isValidElement(title) ? (
    title
  ) : (
    <Text style={[styles.text, variant === 'primary' && styles.textPrimary]}>
      {title}
    </Text>
  );
  return (
    <View style={disabled && styles.disabled}>
      <TouchableOpacity
        disabled={disabled}
        style={[
          styles.container,
          variant === 'primary' && styles.primaryContainer,
        ]}
        onPress={onPress}
        {...props}
      >
        {loading ? (
          <ActivityIndicator color={colors.white} size="small" />
        ) : (
          titleElement
        )}
      </TouchableOpacity>
    </View>
  );
}

renderContent() {
        const {
            loading,
        } = this.viewModel;

        return (
            <MasloPage style={[this.baseStyles.page, { backgroundColor: Colors.home.bg }]}>
                <Animated.View style={[this.baseStyles.container, styles.container, { height: this._contentHeight, opacity: this.state.opacity }]}>
                    { this.getTitle() }
                    { loading
                        ? <ActivityIndicator size="large" />
                        : this.getCheckinsList()
                    }
                    <BottomBar screen={'home'} />
                </Animated.View>
            </MasloPage>
        );
    }

function Loader(props: PropTypes) {
  const [showText, setShowText] = useState(false);
  const timer = useRef<number | null>(null);

  useEffect(() => {
    if (timer.current) {
      clearTimeout(timer.current);
    }

    timer.current = setTimeout(() => {
      setShowText(true);
    }, 2200);
  });

  return (
    <View style={styles.container}>
      <ActivityIndicator size={props.size || 'large'} color="red" />
      {showText ? (
        <Text style={styles.text}>数据量大，请耐心等待❤️</Text>
      ) : null}
    </View>
  );
}

Loader = ({ isVisible }: Props) => {
  return (
    <Modal
      visible={isVisible}
      animationType="fade"
      transparent
      onRequestClose={() => {}}
    >
      <View style={styles.backdrop}>
        <ActivityIndicator size="large" />
      </View>
    </Modal>
  );
}

Spinner = ({ size = 32, color = '#fff', bgColor }: Props) => {
	const getSize = (): number | 'small' | 'large' => {
		if (Platform.OS === 'ios') {
			if (size > 32) {
				return 'large'
			}
			return 'small'
		}
		return size
	}

	if (bgColor) {
		return (
			<View style={[styles.spinner, { backgroundColor: bgColor }]}>
				<ActivityIndicator size={getSize()} color={color} />
			</View>
		)
	}

	return (
		<Background>
			<ActivityIndicator style={styles.spinner} size={getSize()} color={color} />
		</Background>
	)
}

function NewsScreen() {
  const { data, loading, fetchMore, refresh } = useContext(NewsDataContext);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);

    refresh();
    wait(2000).then(() => setRefreshing(false));
  }, [refreshing, refresh]);

  const news = uniqBy(data || [], 'sourceId');

  return (
    <StatusBarSafeLayout>
      <View style={styles.constainer}>
        <H1 title="新闻汇总" />
      </View>

      <ScrollView
        refreshControl={
          <RefreshControl
            tintColor="pink"
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
        onMomentumScrollEnd={fetchMore}>
        {news.map((entry: EntryPropsType) => (
          <Entry key={entry.sourceId} {...entry} />
        ))}
        {loading ? <ActivityIndicator size="large" color="red" /> : null}
      </ScrollView>
    </StatusBarSafeLayout>
  );
}

CalendarList = ({
  pastYearRange,
  futureYearRange,
  initialNumToRender,
  locale,
  handlePress,
  startDate,
  endDate,
  flatListProps,
  isMonthFirst,
  disabledBeforeToday,
  style,
}: Props) => {
  const months: Month_Type[] = useMemo(
    () => getMonths(pastYearRange, futureYearRange),
    [pastYearRange, futureYearRange]
  );

  const getInitialIndex = useCallback(() => {
    return months.findIndex((month: Month_Type) => {
      const targetDate = startDate ? moment(startDate) : moment();
      return month.id === targetDate.format("YYYY-MM");
    });
  }, []);

  const handleRenderItem = useCallback(
    ({ item }) => (
      <View
        style={{
          height: LAYOUT_HEIGHT,
          backgroundColor: "#fff",
        }}
      >
        <Month
          item={item}
          locale={locale}
          handlePress={handlePress}
          startDate={startDate}
          endDate={endDate}
          isMonthFirst={isMonthFirst}
          disabledBeforeToday={disabledBeforeToday}
          style={style}
        />
      </View>
    ),
    [locale.today, startDate, endDate]
  );

  return (
    <View style={[{ position: "relative" }, style?.container]}>
      <View
        style={{
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          position: "absolute",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <ActivityIndicator />
      </View>
      <FlatList
        keyExtractor={(item: Month_Type) => item.id}
        data={months}
        renderItem={handleRenderItem}
        getItemLayout={(_, index) => ({
          length: LAYOUT_HEIGHT,
          offset: LAYOUT_HEIGHT * index,
          index,
        })}
        initialScrollIndex={getInitialIndex()}
        initialNumToRender={initialNumToRender}
        {...flatListProps}
      />
    </View>
  );
}

StyledButton: React.FC<IStyledButtonProps> = ({
  label,
  variant,
  icon,
  loading,
  disabled,
  onPress,
}) => {
  const theme = useTheme<Theme>();
  const getBgColor = () => {
    switch (variant) {
      case 'primary':
        return 'primaryBlue';
      case 'secondary':
        return 'white';
      case 'ghost':
        return 'transparent';
      case 'positive':
        return 'success';
      case 'negative':
        return 'error';
      default:
        return 'primaryBlue';
    }
  };

  const getColor = () => {
    switch (variant) {
      case 'primary':
        return 'white';
      case 'positive':
        return 'white';
      case 'negative':
        return 'white';
      case 'secondary':
        return 'primaryBlue';
      case 'ghost':
        return 'primaryBlue';
      default:
        return 'white';
    }
  };

  return (
    <ButtonContainer
      {...{ onPress }}
      justifyContent="center"
      minWidth={200}
      backgroundColor={getBgColor()}
      borderWidth={variant === 'ghost' ? 1 : 0}
      borderColor="primaryBlue"
      opacity={disabled ? 0.5 : 1}
    >
      <View style={ButtonContainerStyle.container}>
        {loading ? (
          <ActivityIndicator color={theme.colors[getColor()]} size="small" />
        ) : (
          <>
            {icon && (
              <Box marginRight="s">
                <Icon name={icon} color={getColor()} />
              </Box>
            )}
            <StyledText variant="sublimeSemiBold" color={getColor()}>
              {label}
            </StyledText>
          </>
        )}
      </View>
    </ButtonContainer>
  );
}

function Entry(props: EntryPropsType) {
  const [visible, setVisible] = useState(false);
  const [loadingWebview, setLoading] = useState(true);
  return (
    <View>
      <ListItem
        onPress={() => setVisible(true)}
        Component={TouchableOpacity}
        title={
          <Text style={{ fontWeight: '800' }}>
            {props.content.slice(0, 50)}
          </Text>
        }
        subtitle={
          <View
            style={{
              paddingTop: 4,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}>
            <Text style={{ fontSize: 12 }}>时间： {props.sendTime}</Text>
            <Text style={{ fontSize: 12 }}>来源： {props.fromName}</Text>
          </View>
        }
        rightIcon={{ name: 'unfold-more' }}
      />
      <Modal
        animationType="fade"
        presentationStyle="pageSheet"
        visible={visible}
        onDismiss={() => {
          setVisible(false);
        }}
        onRequestClose={() => {
          setVisible(false);
        }}>
        <View style={{ padding: 16, justifyContent: 'space-between' }}>
          <View style={{ height: height - 150 }}>
            {loadingWebview ? (
              <ActivityIndicator size="large" color="red" />
            ) : null}
            <WebView
              onLoad={() => setLoading(true)}
              onLoadEnd={() => setLoading(false)}
              source={{ uri: props.url }}
            />
          </View>
          <View>
            <Button
              buttonStyle={styles.button}
              title="关闭预览"
              onPress={() => {
                setVisible(false);
              }}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
}

export default function SubmitButton({
  label,
  labelTextStyle = {
    color: 'white',
    fontSize: Buttons.FONT_SIZE,
  },
  backgroundColor = Colors.BLUE,
  activityIndicatorColor = 'white',
  progress,
  disabled,
  onPress,
}: Props) {
  const isSubmitDisabled = !progress.isNil() || disabled;

  const activityScaleRef = React.useRef(new Animated.Value(isSubmitDisabled ? 0 : 1));
  const isLoading = progress.isRequesting();

  React.useEffect(() => {
    Animated.timing(activityScaleRef.current, {
      toValue: isSubmitDisabled ? 0 : 1,
      duration: 250,
      useNativeDriver: false,
    }).start();
  }, [isSubmitDisabled]);

  const bgColor = backgroundColor.toString();
  const bgColorSaturated = backgroundColor.saturate(20, true);

  return (
    <View
      style={[styles.container, { shadowColor: isSubmitDisabled ? bgColorSaturated : bgColor }]}>
      <TouchableOpacityAnimated
        style={[
          styles.rectButton,
          {
            backgroundColor: activityScaleRef.current.interpolate({
              inputRange: [0, 1],
              outputRange: [bgColorSaturated, bgColor],
            }),
          },
        ]}
        activeOpacity={1}
        underlayColor={backgroundColor.shade(-20)}
        disabled={isSubmitDisabled}
        onPress={onPress}>
        {isLoading ? (
          <ActivityIndicator size="small" color={activityIndicatorColor} />
        ) : (
          <View>
            <Text style={labelTextStyle}>{label}</Text>
          </View>
        )}
      </TouchableOpacityAnimated>
    </View>
  );
}

function Entry(props: EntryPropsType) {
  const [visible, setVisible] = useState(false);
  const [loadingWebview, setLoading] = useState(true);

  return (
    <View>
      <ListItem
        onPress={() => setVisible(true)}
        Component={TouchableOpacity}
        title={<Text style={{ fontWeight: '800' }}>{props.title}</Text>}
        subtitle={
          <Text style={{ fontSize: 12, paddingTop: 3 }}>
            修改时间：
            {formatDate(props.modifyTime)} from {props.operator}
          </Text>
        }
        leftAvatar={{ source: { uri: props.imgUrl } }}
        rightIcon={{ name: 'unfold-more' }}
      />
      <Modal
        animationType="fade"
        presentationStyle="pageSheet"
        visible={visible}
        onDismiss={() => {
          setVisible(false);
        }}
        onRequestClose={() => {
          setVisible(false);
        }}>
        <View style={{ padding: 16, justifyContent: 'space-between' }}>
          {loadingWebview ? (
            <ActivityIndicator size="large" color="red" />
          ) : null}
          <View style={{ height: height - 150 }}>
            <WebView
              onLoad={() => setLoading(true)}
              onLoadEnd={() => setLoading(false)}
              source={{ uri: props.linkUrl }}
            />
          </View>
          <View>
            <Button
              buttonStyle={styles.button}
              title="关闭预览"
              onPress={() => {
                setVisible(false);
              }}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
}

Spinner = (props: ISpinner) => {
    return(
        <View style={props.style} >
            <ActivityIndicator color={props.color || PRIMARY_COLOR} size={props.size || 'large'} />
        </View>
    );
}

APIClientFastImageScreen = ({ route }: APIClientFastImageScreenProps) => {
    const {
        item: { client },
    } = route.params;
    const [imageUrl, setImageUrl] = useState(
        `${client.baseUrl}/api/v4/files/xjiid3qaa38kjxxwr9mxbfxyco`
    );
    const [loading, setLoading] = useState(false);
    const [errored, setErrored] = useState(false);

    const onLoadStart = () => setLoading(true);
    const onLoadEnd = () => setLoading(false);
    const onLoad = () => setErrored(false);
    const onError = () => setErrored(true);

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Input
                label="Image URL"
                placeholder={`${client.baseUrl}/image.png`}
                value={imageUrl}
                onChangeText={setImageUrl}
                autoCapitalize="none"
                testID="api_client_fast_image.image_url.input"
            />
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                }}
            >
                {loading && <ActivityIndicator />}
                {errored && (
                    <Icon
                        name="image-not-supported"
                        size={100}
                        testID="api_client_fast_image.image_not_supported.icon"
                    />
                )}
                <View style={{ flex: 1 }}>
                    <FastImage
                        source={{ uri: imageUrl }}
                        onLoadStart={onLoadStart}
                        onLoadEnd={onLoadEnd}
                        onLoad={onLoad}
                        onError={onError}
                        resizeMode={FastImage.resizeMode.contain}
                        style={{ height: 400, width: 400 }}
                        testID="api_client_fast_image.fast_image"
                    />
                </View>
            </View>
        </SafeAreaView>
    );
}