@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
46 lines (45 loc) • 1.87 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Loading = exports.Spinner = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Spinner = ({ variant = 'primary', size = 'small', style, }) => {
const { currentColors } = (0, ThemeProvider_1.useTheme)();
const color = currentColors[variant] || currentColors.primary;
return (<react_native_1.ActivityIndicator size={size} color={color} style={style}/>);
};
exports.Spinner = Spinner;
const Loading = ({ variant = 'primary', size = 'large', children, style, textStyle, overlay = false, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const containerStyles = {
justifyContent: 'center',
alignItems: 'center',
padding: theme.spacing[4],
};
if (overlay) {
containerStyles.position = 'absolute';
containerStyles.top = 0;
containerStyles.left = 0;
containerStyles.right = 0;
containerStyles.bottom = 0;
containerStyles.backgroundColor = 'rgba(255, 255, 255, 0.8)';
containerStyles.zIndex = 1000;
}
const textStyles = {
marginTop: theme.spacing[2],
fontSize: theme.typography.fontSizes.base,
color: currentColors.dark,
textAlign: 'center',
};
return (<react_native_1.View style={[containerStyles, style]}>
<exports.Spinner variant={variant} size={size}/>
{children && (<react_native_1.Text style={[textStyles, textStyle]}>
{children}
</react_native_1.Text>)}
</react_native_1.View>);
};
exports.Loading = Loading;