@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
191 lines (190 loc) • 5.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlatformConstants = exports.PlatformUtils = void 0;
const react_native_1 = require("react-native");
/**
* Platform-specific utilities for React Native Bootstrap 5
* Provides helpers for cross-platform compatibility
*/
exports.PlatformUtils = {
/**
* Check if running on mobile platforms (iOS/Android)
*/
isMobile: react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android',
/**
* Check if running on desktop platforms (Windows/macOS/Web)
*/
isDesktop: react_native_1.Platform.OS === 'windows' || react_native_1.Platform.OS === 'macos' || react_native_1.Platform.OS === 'web',
/**
* Check if running on web
*/
isWeb: react_native_1.Platform.OS === 'web',
/**
* Check if running on Windows
*/
isWindows: react_native_1.Platform.OS === 'windows',
/**
* Check if running on macOS
*/
isMacOS: react_native_1.Platform.OS === 'macos',
/**
* Get platform-specific spacing
*/
getSpacing: (base) => (react_native_1.Platform.select({
ios: base,
android: base,
web: base * 0.8,
windows: base * 1.1,
macos: base * 1.05,
}) || base),
/**
* Get platform-specific font sizes
*/
getFontSize: (base) => (react_native_1.Platform.select({
ios: base,
android: base,
web: base,
windows: base * 1.1,
macos: base,
}) || base),
/**
* Get platform-specific border radius
*/
getBorderRadius: (base) => (react_native_1.Platform.select({
ios: base,
android: base,
web: base,
windows: Math.max(base - 2, 0), // More angular for Windows
macos: base,
}) || base),
/**
* Get platform-specific shadow/elevation
*/
getShadow: (elevation) => (Object.assign({}, react_native_1.Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: elevation,
},
shadowOpacity: 0.1,
shadowRadius: elevation,
},
android: {
elevation: elevation,
},
web: {
boxShadow: `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
},
windows: {
// Windows-specific shadow
elevation: elevation * 0.8,
},
macos: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: elevation,
},
shadowOpacity: 0.08,
shadowRadius: elevation * 0.8,
},
}))),
/**
* Get platform-specific pressable feedback
*/
getPressableFeedback: () => (react_native_1.Platform.select({
ios: {
activeOpacity: 0.7,
},
android: {
android_ripple: { color: 'rgba(0,0,0,0.1)' },
},
web: {
// CSS hover states handled via StyleSheet
},
windows: {
// Windows-specific feedback
activeOpacity: 0.8,
},
macos: {
activeOpacity: 0.75,
},
}) || { activeOpacity: 0.7 }),
/**
* Get platform-specific accessibility props
*/
getAccessibilityProps: (label, role = 'button') => (Object.assign({ accessible: true, accessibilityLabel: label, accessibilityRole: role }, (react_native_1.Platform.OS === 'web' ? {
// Web-specific ARIA attributes
'aria-label': label,
role: role,
} : {}))),
/**
* Check if hover states are supported
*/
supportsHover: react_native_1.Platform.OS === 'web' || react_native_1.Platform.OS === 'windows' || react_native_1.Platform.OS === 'macos',
/**
* Get platform-specific input styling
*/
getInputStyle: (baseStyle) => (Object.assign(Object.assign(Object.assign({}, baseStyle), (react_native_1.Platform.OS === 'web' ? {
outlineStyle: 'none',
} : {})), (react_native_1.Platform.OS === 'windows' ? {
borderWidth: 1,
} : {}))),
/**
* Get platform-specific modal presentation
*/
getModalProps: () => (react_native_1.Platform.select({
ios: {
presentationStyle: 'pageSheet',
},
android: {
animationType: 'slide',
},
macos: {
presentationStyle: 'formSheet',
},
}) || { animationType: 'slide' }),
};
/**
* Platform-specific constants
*/
exports.PlatformConstants = {
/**
* Default safe area insets for each platform
*/
safeAreaInsets: react_native_1.Platform.select({
ios: { top: 44, bottom: 34, left: 0, right: 0 },
android: { top: 24, bottom: 0, left: 0, right: 0 },
web: { top: 0, bottom: 0, left: 0, right: 0 },
windows: { top: 32, bottom: 0, left: 0, right: 0 },
macos: { top: 28, bottom: 0, left: 0, right: 0 },
}) || { top: 0, bottom: 0, left: 0, right: 0 },
/**
* Platform-specific breakpoints
*/
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
// Desktop-specific breakpoints
desktop: react_native_1.Platform.OS === 'windows' || react_native_1.Platform.OS === 'macos' ? 1024 : 1200,
},
/**
* Platform-specific z-index values
*/
zIndex: {
dropdown: 1000,
sticky: 1020,
fixed: 1030,
modalBackdrop: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
toast: 1080,
},
};
exports.default = exports.PlatformUtils;