react-native#ActivityIndicator JavaScript Examples

render() {
    const {isFirstLoading} = this.state;
    const {intl} = this.props;
    const {formatMessage} = intl;
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar hidden={true} />
        <View style={styles.modalFlash}>
          <IconBluezone width={LOGO_HEIGHT} height={LOGO_HEIGHT} />
          <View style={styles.body}>
            <ActivityIndicator size="large" color={blue_bluezone} />
            <Text
              text={formatMessage(
                isFirstLoading
                  ? message.titleFirstLoading
                  : message.titleLoading,
              )}
              style={styles.text}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }

function SyncButton ({group, game_id}) {
  const [pressed,setPressed] = React.useState(false);
  const theme = useSelector(i=>i.themes[i.theme]);
  const data = useAPIRequest(pressed?{
    cuppazee: true,
    endpoint: "clan/shadow/generate/v2",
    data: {
      game_id,
      group
    }
  }:null);
  if(pressed && !data) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64 }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if(pressed) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64}}>
      <MaterialCommunityIcons name="check-bold" size={32} color={theme.page_content.fg} />
    </View>
  }
  return <View style={{padding: 4}}>
    <Button color={(theme.clan_header||theme.navigation).bg} mode="contained" onPress={()=>setPressed(true)}>
      Sync Shadow Players in {group}
    </Button>
  </View>
}

render() {
        console.log( 'Images array is ', this.state.images );
        console.log( this.state.isLoading );
        return(
            this.state.isLoading ?
            (
                <View style = {styles.container}>
                    <ActivityIndicator size="large" color="white"/>
                </View>
            ):
            <HomeScreenView
                { ...this.props }
                images = { this.state.images }
                isLoading = { this.state.isLoading }
            />
        );
    }

FullscreenLoadingModal = memo(() => {
    const fullscreenLoadingModalVisible = useStore(useCallback(state => state.fullscreenLoadingModalVisible))
    const setFullscreenLoadingModalVisible = useStore(useCallback(state => state.setFullscreenLoadingModalVisible))
    const setFullscreenLoadingModalDismissable = useStore(useCallback(state => state.setFullscreenLoadingModalDismissable))
    const fullscreenLoadingModalDismissable = useStore(useCallback(state => state.fullscreenLoadingModalDismissable))

    if(!fullscreenLoadingModalVisible){
        return null
    }

    return (
        <Pressable style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.4)",
            justifyContent: "center",
            alignItems: "center"
        }} onPress={() => {
            if(fullscreenLoadingModalDismissable){
                setFullscreenLoadingModalVisible(false)
                setFullscreenLoadingModalDismissable(false)
            }
        }}>
            <ActivityIndicator size={"small"} color="white" />
        </Pressable>
    )
})

renderFullButton() {
    const { style } = this.props;
    const { isFollowing, isInFollowQueue, isInUnfollowQueue } = this.state;

    return (
      <TouchableWithoutFeedback
        onPress={this.handlePress}
      >
        <View
          style={[
            fullButtonStyles.button,
            {
              backgroundColor: isFollowing ? 'white' : brandColor,
              borderColor: brandColor,
            },
            style,
          ]}
        >
          {isFollowing ? (
            <View style={fullButtonStyles.wrapper}>
              <Ionicons name="ios-checkmark" size={28} style={fullButtonStyles.checkmark} />
              <Text style={fullButtonStyles.unfollowingButtonText}>Following</Text>
              {isInUnfollowQueue && (
                <ActivityIndicator style={fullButtonStyles.activityIndicator} size="small" color={brandColor} />
              )}
            </View>
          ) : (
            <View style={fullButtonStyles.wrapper}>
              <Ionicons size={16} color="#B7B7B7" name="md-person-add" style={fullButtonStyles.iconButton} />
              <Text style={fullButtonStyles.followingButtonText}>  Follow</Text>
              {isInFollowQueue && (
                <ActivityIndicator style={fullButtonStyles.activityIndicator} size="small" color="white" />
              )}
            </View>
          )}
        </View>
      </TouchableWithoutFeedback>
    );
  }

ProgressModal = ({text, isVisible, btnText, onBtnPress}) => {
    return (
        <Overlay isVisible={isVisible}>
            <>
                <View style={styles.progressModalContainer}>
                    <ActivityIndicator
                        size="large"
                        color={PRIMARY_COLOR}
                    />
                    <Text style={styles.progressModalText}>
                        {text}
                    </Text>
                </View>
                {btnText && (
                    <View style={styles.progressModalBtnView}>
                        <View style={styles.progressModalBtnSubView}>
                            <Text
                                onPress={onBtnPress}
                                style={styles.progressModalBtnText}
                            >
                                {btnText}
                            </Text>
                        </View>
                    </View>
                )}
            </>
        </Overlay>
    );
}

render() {
    if (this.props.status === "empty") {
      return <View />;
    }
    return (
      <View style={[styles.container, this.props.style]}>
        {this.props.status === "loading" ? (
          <ActivityIndicator size="small" color="#000000" />
        ) : (
          <Text style={styles.text}>{this.props.text}</Text>
        )}
      </View>
    );
  }

export function Loading({hasBackground}) {
  return (
    <ActivityIndicator
      style={[
        styles.loadingIndicator,
        {
          backgroundColor: hasBackground ? '#fafafa' : 'none',
        },
      ]}
    />
  );
}

export function Loading({loading}) {
  if (!loading) {
    return <View />;
  }

  return (
    <View style={styles.overlay}>
      <View style={styles.container}>
        <ActivityIndicator color={'black'} />
        <Text style={styles.text}>Loading...</Text>
      </View>
    </View>
  );
}

export default function ({ navigation }) {
  return (
    <Layout>
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {/* This text using ubuntu font */}
        <ActivityIndicator size="large" color={themeColor.primary} />
      </View>
    </Layout>
  );
}

App = (props) => {
  const linking = {
    prefixes: [Linking.makeUrl('/'), Constants.manifest.extra.firebaseUrlPrefix],
    config: {
      initialRouteName: 'HomePage',
      screens: {
        PlayImporterPage: 'customPlays/:uuid', // Legacy, keeping it because there are generated URL out there
        DrillImporterPage: 'custom/:source/:uuid', // source can be drill or play
        DrillPage: 'drills/:id',
      },
    },
  };

  return (
    <ReduxProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <PaperProvider>
          <NavigationContainer
            linking={linking}
            fallback={<ActivityIndicator animating color={theme.MAIN_COLOR} style={{ top: '45%' }} size="large" />}
          >
            <Navigation />
          </NavigationContainer>
          <FlashMessage position="bottom" />
        </PaperProvider>
      </PersistGate>
    </ReduxProvider>
  );
}

render() {
    return (
      <View>
        {
          this.state.chartReady ? 
          <LineChart
          data={this.state.DATA}
          width={Dimensions.get("screen").width * 0.92} // from react-native
          height={250}
          fromZero={true}
          chartConfig={myChartConfig}
          style={chartStyle}
          onDataPointClick={({ value, dataset, getColor }) => this.itemClicked(value, dataset)}
        />
        : 
        <ActivityIndicator size="large" color="#000" />
        }
        
        <SCLAlert
          theme="info"
          show={this.state.showPopup}
          title="Product Info"
          onRequestClose={this.handleClose}
          subtitle=""
          subtitleContainerStyle={{ height: 0 }}
          headerIconComponent={<Image source={blueImage} style={styles.popupHeaderIcon} />}
        >
          <Text style={styles.popupText}>
                    Product :  {this.state.selected_product}{'\n'}
                    Items Sold :  {this.state.selected_noOfItems}{'\n'}
          </Text>
          <SCLAlertButton theme="danger" onPress={this.handleClose} containerStyle={{ backgroundColor: '#4796BD' }}>OK</SCLAlertButton>
        </SCLAlert>
      </View>

      // #4796BD blue
    )
  }

StorePinCode = ({ navigation }) => (
  <Formik
    initialValues={{ pincode: '' }}
    onSubmit={(values, actions) => {
      storeData(values.pincode, 'pincode').then(() => {
        navigation.navigate('Root');
      });

      setTimeout(() => {
        actions.setSubmitting(false);
      }, 1000);
    }}
  >
    {(formikProps) => (
      <>
        <FormInput
          label={I18n.t('pinCode.storePinCode.enterPinCode')}
          formikProps={formikProps}
          formikKey="pincode"
          placeholder="123456"
          keyboardType="numeric"
        />
        {formikProps.isSubmitting ? (
          <ActivityIndicator />
        ) : (
          <Button onPress={formikProps.handleSubmit}>
            <Text>{I18n.t('global.submit')}</Text>
          </Button>
        )}
      </>
    )}
  </Formik>
)

Button = ({
  theme,
  children,
  style,
  loading,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <TouchableOpacity
      {...props}
      style={[
        styling.input,
        style,
        loading ? styling.loading : null,
      ]}
      disabled={loading}
    >
      {children}

      {loading ?
        <View style={styling.loading}>
          <ActivityIndicator size="small" />
        </View>
      : null}
    </TouchableOpacity>
  )
}

DataActivityIndicator = () => {
    return(
    <View style={[styles.container]}>
        <View style={[styles.horizontal]}>
            <Text>Loading Data...</Text>
            <ActivityIndicator size="large" color="#0000ff" />
        </View>
    </View>
    );
}

render() {
  return (
    <Modal
        animationType="fade"
        visible={this.props.visible}
        transparent={true}
        >
        <View style={styles.mainOuterComponent}>
          <ActivityIndicator size={50} color={'#FFFFFF'}/>
        </View>
     </Modal>
  );
}

export default function App() {
  const [assetsLoaded, setAssetLoaded] = useState(false);

  /* Loading custom fonts in async */
  const _loadAssetsAsync = async () => {
    await Font.loadAsync(customFonts);
    setAssetLoaded(true);
  };

  useEffect(() => {
    _loadAssetsAsync();
  });

  return assetsLoaded ? (
    <NavigationContainer>
      <StatusBar barStyle="light-content"></StatusBar>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="Featured"
      >
        <Stack.Screen name="Featured" component={Tabs} />
        <Stack.Screen name="EventDetail" component={EventDetail} />
      </Stack.Navigator>
    </NavigationContainer>
  ) : (
    <ActivityIndicator size="small"></ActivityIndicator>
  );
}

function Loading(props) {
  return (
    <View style={styles.container}>
      <ActivityIndicator
        size="large"
        color={Colors.primary}
      />
      <Text style={styles.titleText}>{props.title}</Text>
      <Text style={styles.subtitleText}>{props.subtitle}</Text>
    </View>
  );
}

export default function StatBox(props) {
  return (
    <View style={[styles.box, props.style, {backgroundColor: props.boxColor}]}>
      <View style={[styles.box, styles.innerBox]}>
        {props.mainText === ' ' && (
          <ActivityIndicator
            style={styles.spinner}
            size="small"
            color="white"
          />
        )}
        <Text style={styles.mainText}>
          {props.mainText}
          {props.mainTextSuffix !== '' ? (
            <Text style={styles.subText}>{props.mainTextSuffix}</Text>
          ) : (
            ''
          )}
        </Text>
        <Text style={styles.subText}>{props.subText}</Text>
        <Icon
          style={[styles.icon, props.iconStyle]}
          name={props.icon}
          size={props.iconSize}
        />
      </View>
    </View>
  );
}

StartupScreen = props => {

    const dispatch = useDispatch();

    useEffect(() => {
        const tryLogin = async () => {
            const userData = await AsyncStorage.getItem('userData');
            if (!userData) {
                // props.navigation.navigate('Auth');
                dispatch(authActions.setDidTryAutoLogin());
                return;
            }
            const transformedData = JSON.parse(userData);
            const { token, user } = transformedData;

            // props.navigation.navigate('Shop');
            dispatch(authActions.authenticate(user, token));
        };

        tryLogin();
}, [dispatch])


return (
    <View style={styles.screen}>
        <ActivityIndicator size="large" color={Colors.primary} />
    </View>
);
}

LoadingIndicator = ({ visible, message }) => {
    return (
        <Dialog visible={visible}>
            <DialogContent style={styles.dialogContentWrapper}>
                <View style={styles.dialogContent}>
                    <ActivityIndicator color={Colors.title} size="small" />
                    {message && <Text style={styles.message}>{message}</Text>}
                </View>
            </DialogContent>
        </Dialog>
    );
}

export default function Entrypoint() {
  return (
    <Provider store={store}>
      <PersistGate loading={<ActivityIndicator />} persistor={persistor}>
        <PaperProvider theme={theme}>
          <Navigator />
        </PaperProvider>
      </PersistGate>
    </Provider>
  );
}

export default function LoadingComponent() {
  return (
    <TouchableOpacity
      disabled={true}
      style={{
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignSelf: 'center',
        position: 'absolute',
        backgroundColor: TINT_LOAD_GRAY,
        opacity: 0.7,
        position: 'absolute',
        zIndex: 3000,
      }}>
      <ActivityIndicator
        size={'large'}
        color={WHITE}
        style={{justifyContent: 'center', alignSelf: 'center'}}
      />
    </TouchableOpacity>
  );
}

renderModal() {
    const {
      isProcessing,
      isVisibleRegisterError,
      isVisibleWrongPhoneNumber,
      codeString,
    } = this.state;
    const {intl} = this.props;
    const {formatMessage} = intl;
    return (
      <>
        <Modal isVisible={isProcessing} style={styles.center}>
          <ActivityIndicator size="large" color={'#ffffff'} />
        </Modal>
        <ModalBase
          isVisibleModal={isVisibleRegisterError}
          title={`${formatMessage(message.error)}`}
          description={`${formatMessage(message.redo)}[${codeString}]`}>
          <View style={styles.modalFooter}>
            <ButtonClose
              text={formatMessage(message.skip)}
              onPress={this.onCloseModal}
            />
            <ButtonConfirm
              text={formatMessage(message.try)}
              onPress={this.onRegisterPress}
            />
          </View>
        </ModalBase>
        <ModalBase
          isVisibleModal={isVisibleWrongPhoneNumber}
          title={formatMessage(message.errorTitle)}
          description={`${formatMessage(
            message.phoneEnterNotValid,
          )}[${codeString}]`}>
          <View style={styles.modalFooter}>
            <ButtonConfirm
              text={formatMessage(message.btnTryAgain)}
              onPress={this.onCloseAlertWrongPhoneNumberPress}
            />
          </View>
        </ModalBase>
      </>
    );
  }

CategoryScreen = (props) => {
  const [refreshing, setRefreshing] = useState(false)
  const { products, navigation } = props

  const slug = navigation.getParam('slug', '')

  useEffect(() => {
    props.showCategory(slug)
  }, [])

  const pullRefresh = () => {
    props.showCategory(slug)
  }

  const renderItem = ({ item, index }) => (
    <CardProduct
      item={item}
      onPress={() => onPress(item)}
    />
  )

  const onPress = (item) => {
    props.getDetail('/' + item?.slug)
    navigation.navigate('ProductDetail', {title: item.title, stock: item.stock})
  }

  return (
    <SafeAreaView style={apply('flex bg-gray-100')}>
      <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
      {products?.fetching ? (
        <View style={styles.emptyState}>
          <ActivityIndicator size="large" color={apply('gray-900')} />
        </View>
      ) : (
        <FlatList
          data={products?.data[0]?.product}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          initialNumToRender={6}
          contentContainerStyle={apply('bg-gray-100 py-2')}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={() => pullRefresh()} />
          }
          horizontal={false}
          numColumns={2}
          key={2}
          onEndReachedThreshold={0.1}
          ListEmptyComponent={() =>
            <View style={styles.emptyState}>
              <Text>No data.</Text>
            </View>
          }
        />
      )}
    </SafeAreaView>
  )
}

export default function AuthScreen({route}) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [status, setStatus] = React.useState(0);
  const navigation = useNavigation();
  const discovery = {
    authorizationEndpoint: 'https://api.munzee.com/oauth',
    tokenEndpoint: 'https://api.munzee.com/oauth/login',
  };
  const data = useAPIRequest({
    endpoint: 'competition/join/v1',
    cuppazee: true,
    data: {
      username: route.params.username
    }
  })
  const config = data?.team === "pear" ? config_pear : config_pine;

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: config.client_id,
      scopes: ['read'],
      redirectUri: config.redirect_uri,
      state: JSON.stringify({
        redirect: Oconfig.redirect_uri,
        platform: Platform.OS
      })
    },
    discovery
  );

  React.useEffect(() => {
    if (response) {
      (async function () {
        if (!response.params || !response.params.teaken) return setStatus("invalid_response");
        if(response.params.status) {
          setStatus(`success_${response.params.status}`);
        } else {
          setStatus("success");
        }
      })()
    }
  }, [response]);
  if (status === "loading") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if (status === "success" || status === "success_reopt" || status === "success_already") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      {status !== "success_already" && <>
        <Image source={data?.team === "pine" ? require('assets/pine.png') : require('assets/pear.png')} style={{ height: 128, width: 128, borderRadius: 8, marginBottom: 16 }} />
        <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{response.params.username} {status === "success" ? "has joined" : "is in"} Team {data?.team.toUpperCase() || '???¿??'}</Text>
      </>}
      <Button mode="contained" onPress={()=>navigation.replace('CompetitionHome')}>Return to Competition Dashboard</Button>
    </View>
  }
  return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
    {!!status && <>
      {statusIcons[status]==="loading"?<ActivityIndicator size="large" color={theme.page_content.fg} />:<MaterialCommunityIcons name={statusIcons[status]} color={theme.page.fg} size={48} />}
      <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{statusMessages[status]}</Text>
    </>}
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24 }}>Opt-in to Competition</Text>
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16 }}>{t('auth:tap')}</Text>
    <IconButton
      disabled={!data || (status && status !== "invalid_response")}
      size={32}
      onPress={() => {
        setStatus("waiting_for_login");
        promptAsync({
          useProxy: Oconfig.useProxy,
          redirectUri: config.redirect_uri
        });
      }}
      color={theme.page_content.fg}
      icon="login-variant"
    />
  </View>
}

GDPRScreen = memo(({ navigation, route }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const [lang, setLang] = useMMKVString("lang", storage)
    const [gdpr, setGdpr] = useState("")
    const [isLoading, setIsLoading] = useState(true)
    const isMounted = useMountedState()
    
    useEffect(() => {
        fetchGDPRInfo().then((info) => {
            if(isMounted()){
                setGdpr(JSON.stringify(info, null, 2))
                setIsLoading(false)
            }
        }).catch((err) => {
            console.log(err)

            showToast({ message: err.toString() })
        })
    }, [])

    return (
        <>
            <View style={{
                flexDirection: "row",
                justifyContent: "flex-start",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                <TouchableOpacity style={{
                    marginTop: Platform.OS == "ios" ? 17 : 4,
                    marginLeft: 15,
                }} onPress={() => navigation.goBack()}>
                    <Ionicon name="chevron-back" size={24} color={darkMode ? "white" : "black"}></Ionicon>
                </TouchableOpacity>
                <Text style={{
                    color: darkMode ? "white" : "black",
                    fontWeight: "bold",
                    fontSize: 24,
                    marginLeft: 10,
                    marginTop: Platform.OS == "ios" ? 15 : 0
                }}>
                    {i18n(lang, "showGDPR")}
                </Text>
            </View>
            <ScrollView style={{
                height: "100%",
                width: "100%",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                {
                    isLoading ? (
                        <ActivityIndicator size={"small"} color={darkMode ? "white" : "black"} style={{
                            marginTop: "70%"
                        }} />
                    ) : (
                        <Text style={{
                            color: darkMode ? "white" : "black",
                            padding: 22
                        }}>
                            {striptags(gdpr)}    
                        </Text>
                    )
                }
            </ScrollView>
        </>
    )
})

AnimatedIndicator = Animated.createAnimatedComponent(ActivityIndicator)

renderSmallWhite() {
    const {
      style, profile, peerID,
    } = this.props;
    const { isFollowing, isInFollowQueue, isInUnfollowQueue } = this.state;

    if (peerID === profile.peerID) {
      return null;
    }
    return (
      <TouchableWithoutFeedback
        onPress={this.handlePress}
      >
        <View
          style={[
            smallButtonStyles.button,
            {
              backgroundColor: isFollowing ? 'white' : brandColor,
              borderColor: brandColor,
            },
            style,
          ]}
        >
          {isFollowing ? (
            <View style={smallButtonStyles.wrapper}>
              {!isInUnfollowQueue && (
                <Ionicons name="md-checkmark" size={18} color={brandColor} />
              )}
              {isInUnfollowQueue && (
                <ActivityIndicator size="small" color={brandColor} />
              )}
            </View>
          ) : (
            <View style={smallButtonStyles.wrapper}>
              {!isInFollowQueue && (
                <Ionicons name="md-person-add" size={16} color="white" />
              )}
              {isInFollowQueue && (
                <ActivityIndicator size="small" color="white" />
              )}
            </View>
          )}
        </View>
      </TouchableWithoutFeedback>
    );
  }