@uiw/react-native/lib/Loader/index.js

UIW for React Native

import React from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
const styles = StyleSheet.create({
  defalut: {
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: 99,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  indicator: {
    marginRight: 5
  },
  stopActivity: {
    display: 'none'
  }
});
export default function Loader(props) {
  const {
    children,
    color: loaderColor = 'gray',
    maskColor = 'rgba(255, 255, 255, 0.85)',
    rounded,
    loading = true,
    tip,
    size = 'small',
    vertical,
    ...otherProps
  } = props;
  let styleProps = {};
  if (maskColor) {
    styleProps.backgroundColor = maskColor;
  }
  if (rounded) {
    styleProps.borderRadius = rounded;
  }
  if (vertical) {
    styleProps.flexDirection = 'column';
  }
  if (!children && !tip) {
    return <ActivityIndicator animating={loading} size={size} color={loaderColor} />;
  }
  const tips = tip || loading ? <View style={[styles[loading ? 'defalut' : 'stopActivity'], styleProps]}>
        <ActivityIndicator animating={loading} size={size} color={loaderColor} />
        {tip && (typeof tip === 'string' ? <Text style={{
      color: loaderColor
    }}>{tip}</Text> : <View>{tip}</View>)}
      </View> : null;
  if (!children && tip) {
    return tips;
  }
  return <View {...otherProps}>
      {tips}
      {children}
    </View>;
}