react-native-flex-grid
Version:
🎨 A react-native flexbox grid similar to bootstap's web grid.
43 lines (42 loc) • 1.64 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { StyleSheet, View, useWindowDimensions } from 'react-native';
import { getConfig } from '../../../utils/grid';
import { getGridBreakpoint } from '../../../utils/responsive';
const styles = StyleSheet.create({
container: {
width: '100%',
justifySelf: 'center'
},
fluid: {
maxWidth: '100%'
}
});
/** Container [Bootstrap Docs](https://getbootstrap.com/docs/5.0/layout/containers) */
const Container = _ref => {
let {
style,
fluid,
Element = View,
noPadding,
...rest
} = _ref;
/** Grid config */
const gridConfig = getConfig();
/** screen width */
const SCREEN_WIDTH = useWindowDimensions().width;
/** current grid breakpoint */
const gridBreakpoint = getGridBreakpoint(SCREEN_WIDTH);
/** container maxWidth */
const maxWidth = gridConfig.containerMaxWidths[gridBreakpoint];
return /*#__PURE__*/React.createElement(Element, _extends({
style: [styles.container, noPadding ? null : {
paddingHorizontal: gridConfig.containerPaddingsHorizontal[gridBreakpoint]
}, fluid ? styles.fluid : {
maxWidth,
marginHorizontal: typeof maxWidth === 'number' ? (SCREEN_WIDTH - maxWidth) / 2 : undefined
}, style]
}, rest));
};
export default Container;
//# sourceMappingURL=Container.js.map