1import * as React from 'react';
2import { ActivityIndicator, Platform, StyleSheet } from 'react-native';
3
4import { Page, Section } from '../components/Page';
5import Colors from '../constants/Colors';
6
7function ActivityIndicatorStopping({ hidesWhenStopped }: { hidesWhenStopped?: boolean }) {
8  const [animating, setAnimating] = React.useState(true);
9
10  React.useEffect(() => {
11    let _timer: any | undefined;
12    const setToggleTimeout = () => {
13      _timer = setTimeout(() => {
14        setAnimating((v) => !v);
15        setToggleTimeout();
16      }, 2000);
17    };
18    setToggleTimeout();
19    return () => clearTimeout(_timer);
20  }, []);
21
22  return (
23    <ActivityIndicator
24      style={styles.item}
25      size="large"
26      animating={animating}
27      hidesWhenStopped={hidesWhenStopped}
28    />
29  );
30}
31
32export default function ActivityIndicatorScreen() {
33  return (
34    <Page>
35      <Section title="Custom Color" row>
36        <ActivityIndicator style={styles.item} size="large" color={Colors.tintColor} />
37        <ActivityIndicator style={styles.item} size="large" color="red" />
38        <ActivityIndicator size="large" color="blue" />
39      </Section>
40      {Platform.OS === 'android' ? null : (
41        <>
42          <Section title="hidesWhenStopped" row>
43            <ActivityIndicatorStopping hidesWhenStopped={false} />
44            <ActivityIndicatorStopping hidesWhenStopped />
45          </Section>
46          <Section title="Larger" row>
47            <ActivityIndicator style={styles.item} size="small" />
48            <ActivityIndicator size="large" />
49          </Section>
50        </>
51      )}
52    </Page>
53  );
54}
55
56ActivityIndicatorScreen.navigationOptions = {
57  title: 'ActivityIndicator',
58};
59
60const styles = StyleSheet.create({
61  item: {
62    marginRight: 8,
63  },
64});
65