How to use the react-native-bpk-theming.getThemeAttributes function in react-native-bpk-theming

const BpkSpinner = props => {
  const { small, type, ...rest } = props;
  const { theme } = props;
  let themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);

  // Validate type.
  if (!Object.keys(SPINNER_TYPES).includes(type)) {
    throw new Error(
      `"${type}" is not a valid spinner type. Valid types are ${Object.keys(
        SPINNER_TYPES,
      ).join(', ')}`,
    );
  }

  // Validate that spinner is themeable and correct theming attribute has been
  // supplied. If not, disable theming.
  if (themeAttributes && type !== 'primary') {
    themeAttributes = null;
  }

constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      ANDROID_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

const BpkSwitch = props => {
  const { value, theme, ...rest } = props;
  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);

  return (

constructor(props) {
    super(props);
    this.theme = getThemeAttributes(
      IOS_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

const BpkButtonLink = (props: Props) => {
  const {
    accessibilityLabel,
    disabled,
    icon,
    iconAlignment,
    onPress,
    style,
    title,
    borderlessBackground,
    theme,
    textProps,
    ...rest
  } = props;

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  const themeStyle = themeAttributes
    ? { color: themeAttributes.buttonLinkTextColor }
    : null;

  const textStyle = [styles.text];
  const viewStyle = [styles.view];
  const iconStyle = [styles.icon];

  const accessibilityTraits = ['button'];

  if (iconAlignment === ICON_ALIGNMENTS.leading) {
    viewStyle.push(styles.viewLeading);
    iconStyle.push(styles.iconLeading);
  }

  if (themeStyle) {

const BpkHorizontalNavSelectedIndicator = props => {
  const { theme, xOffset, width } = props;
  const style = [styles.selectedIndicator];

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  if (themeAttributes) {
    style.push({
      backgroundColor: themeAttributes.horizontalNavSelectedTextColor,
    });
  }

  const animationStyles = {
    transform: [
      {
        translateX: xOffset,
      },
    ],
    width,
  };
  return ;
};

small,
    title,
    ...rest
  } = props;

  const accessibilityTraits = ['button'];
  const textSize = small ? 'sm' : 'base';
  const viewStyles = [styles.view];
  const textStyles = [styles.text];

  if (disabled) {
    accessibilityTraits.push('disabled');
    textStyles.push(styles.textDisabled);
  } else if (selected) {
    textStyles.push(styles.textSelected);
    const themeAttributes = getThemeAttributes(
      REQUIRED_THEME_ATTRIBUTES,
      theme,
    );

    if (themeAttributes) {
      textStyles.push({
        color: themeAttributes.horizontalNavSelectedTextColor,
      });
    }
  }

  if (small) {
    viewStyles.push(styles.viewSmall);
  }

  if (style) {

componentDidUpdate() {
    this.theme = getThemeAttributes(
      IOS_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }

const BpkButtonLink = (props: Props) => {
  const {
    accessibilityLabel,
    disabled,
    icon,
    iconAlignment,
    large,
    onPress,
    title,
    theme,
    textProps,
    ...rest
  } = props;

  const themeAttributes = getThemeAttributes(REQUIRED_THEME_ATTRIBUTES, theme);
  const themeStyle = themeAttributes
    ? { color: themeAttributes.buttonLinkTextColor }
    : null;

  const viewStyle = [styles.view];
  const textStyle = [styles.text];
  const iconStyle = [styles.icon];

  const accessibilityTraits = ['button'];

  if (large) {
    viewStyle.push(styles.viewLarge);
  }

  if (iconAlignment === ICON_ALIGNMENTS.leading) {
    viewStyle.push(styles.viewLeading);

componentDidUpdate() {
    this.theme = getThemeAttributes(
      ANDROID_THEME_ATTRIBUTES,
      this.props.theme || {},
    );
  }