boxons/components/shared/Spacers.tsx

import React from 'react';

import styled from '@emotion/native';
import { View, ViewProps } from 'react-native';

const Spacer = (props: Omit<ViewProps, 'pointerEvents'>) => (
  <View pointerEvents="none" {...props} />
);

export const VerticalSpacer = styled(Spacer)<{ heightUnits: number }>(({ theme, heightUnits }) => ({
  height: theme.layout.gridUnit * heightUnits,
}));

export const HorizontalSpacer = styled(Spacer)<{ widthUnits: number }>(({ theme, widthUnits }) => ({
  width: theme.layout.gridUnit * widthUnits,
}));

export const ElasticSpacer = styled(Spacer)({
  flexGrow: 1,
});