How to use the @times-components/styleguide.spacing function in @times-components/styleguide

import { StyleSheet } from "react-native";
import { spacing } from "@times-components/styleguide";
import sharedStyles from "./shared";

const iosStyles = StyleSheet.create({
  ...sharedStyles,
  container: {
    ...sharedStyles.container,
    paddingTop: spacing(1),
    paddingLeft: spacing(2),
    paddingRight: spacing(2),
    paddingBottom: spacing(5),
    marginBottom: 0
  },
  // iOS Font hack
  caption: {
    ...sharedStyles.caption,
    paddingTop: 4
  },
  link: {
    ...sharedStyles.link,
    paddingTop: 4
  }
});

import { spacing } from "@times-components/styleguide";

const sharedStyles = {
  container: {
    flex: 1,
    flexDirection: "row"
  }
};

const mediumBreakpointStyles = {
  container: {
    ...sharedStyles.container,
    marginHorizontal: spacing(4)
  },
  column: {
    width: "50%"
  },
  colSeparatorStyle: {
    marginVertical: spacing(3)
  }
};

const wideBreakpointStyles = {
  container: {
    ...sharedStyles.container,
    marginHorizontal: spacing(2)
  },
  column: {
    width: "42%"

import { fonts, spacing } from "@times-components/styleguide";

const styles = {
  container: {
    flex: 1,
    padding: spacing(2)
  },
  headline: {
    fontFamily: fonts.headline,
    fontSize: 35,
    lineHeight: 35,
    paddingBottom: spacing(1)
  },
  imageContainer: {
    marginBottom: spacing(2),
    width: "100%"
  }
};

export default styles;

font-family: "${fonts.headline}";
  font-size: ${fontSizes.pageHeadline}px;
  color: ${colours.functional.brandColour};
  padding-bottom: ${spacing(4)};
  text-align: center;

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.pageHeadlineLarge}px;
  }
`;

export const ResponsiveDivider = styled(View)`
  border-top-color: ${colours.functional.keyline};
  border-top-style: solid;
  border-top-width: 1px;
  margin: 0 auto ${spacing(5)} auto;
  width: 200px;

  @media (min-width: ${breakpoints.medium}px) {
    width: 290px;
  }
`;

top: 0
  },
  resetButton: {
    backgroundColor: colours.functional.action,
    borderRadius: 2,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  resetText: {
    color: "white",
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    letterSpacing: 1,
    lineHeight: 15,
    paddingLeft: spacing(1),
    position: "relative",
    top: 3
  }
});

const VideoError = ({ poster, width, height, onReset }) => (

} from "@times-components/styleguide";

const styles = {
  bylineOpinion: {
    color: colours.section.comment,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMetaMobile,
    letterSpacing: 0.6,
    lineHeight: 12,
    marginTop: spacing(3),
    textTransform: "uppercase"
  },
  container: {
    alignItems: "center",
    paddingTop: spacing(4),
    paddingBottom: spacing(2)
  },
  headline: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.tileLeadHeadline,
    lineHeight: 35,
    paddingHorizontal: spacing(2),
    textAlign: "center"
  },
  imageContainer: {
    overflow: "hidden",
    width: "30%"
  },
  strapline: {
    fontFamily: fonts.bodyRegular,
    color: colours.functional.secondary,

marginHorizontal: spacing(2)
  },
  columnistContainer: {
    width: "66.7%"
  },
  secondaryContainer: {
    ...sharedStyles.secondaryContainer,
    width: "33.3%"
  }
};

const hugeBreakpointStyles = {
  ...sharedStyles,
  container: {
    ...sharedStyles.container,
    marginHorizontal: spacing(2)
  },
  columnistContainer: {
    width: "58%"
  },
  secondaryContainer: {
    ...sharedStyles.secondaryContainer,
    width: "42%"
  }
};

const stylesResolver = {
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: hugeBreakpointStyles
};

import {
  colours,
  fonts,
  spacing,
  editionBreakpoints
} from "@times-components/styleguide";

const smallBreakpointStyles = {
  container: {
    flex: 1,
    paddingBottom: spacing(2)
  },
  headline: {
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: spacing(1),
    marginTop: spacing(4),
    textAlign: "center"
  },
  summaryContainer: {
    flex: 1
  },
  strapline: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: 14,

ArticleKeylineItem
} from "@times-components/article-skeleton";
import {
  ArticleBylineWithLinks,
  hasBylineData
} from "@times-components/article-byline";
import DatePublication from "@times-components/date-publication";
import { defaultProps, propTypes } from "./article-meta-prop-types";

import styles from "../styles/article-meta";

const MetaTextElement = styled(Text)`
  padding-top: ${spacing(2)};

  &:last-child {
    padding-bottom: ${spacing(2)};
  }

  @media (min-width: ${breakpoints.wide}px) {
    line-height: 18px;
    padding-bottom: ${spacing(2)};
  }
`;

function ArticleMeta({
  bylines,
  publicationName,
  publishedTime,
  onAuthorPress,
  inline = false,
  className = ""
}) {

{
      padding: 12
    },
    container
  ),
  nextText: Object.assign(
    {
      textAlign: "right",
      marginRight: spacing(2)
    },
    textStyle
  ),
  previousText: Object.assign(
    {
      textAlign: "left",
      marginLeft: spacing(2)
    },
    textStyle
  )
});

export const NextPageIcon = () => (