How to use the @shoutem/ui.dimensionRelativeToIphone function in @shoutem/ui

};

  return _.merge({}, getTheme(variables), {

    // Html
    'shoutem.ui.Html': {
      a: {
        text: {
          fontWeight: '700',
          color: variables.title.color,
        },
      },
      'se-attachment': {
        gallery: {
          container: {
            height: dimensionRelativeToIphone(130),
          },
        },
        video: {
          container: {
            width: 300,
          },
        },
      },
    },

    // SimpleHtml
    'shoutem.ui.SimpleHtml': {
      container: {
        padding: variables.mediumGutter,
      },
      prefix: {

},
        '.large-gutter': {
          paddingTop: 8,
          paddingHorizontal: 8,
        },
        '.no-gutter': {
          padding: 0,
          margin: 0,
        },
      },
      item: {
        [INCLUDE]: ['alignmentVariants'],
        // Related with page gutter
        '.small-gutter': {
          margin: 2,
          height: dimensionRelativeToIphone(179),
        },
        '.medium-gutter': {
          margin: 4,
          height: dimensionRelativeToIphone(173),
        },
        '.large-gutter': {
          margin: 8,
          height: dimensionRelativeToIphone(161),
        },
        '.no-gutter': {
          margin: 0,
          height: dimensionRelativeToIphone(188),
        },
        width: dimensionRelativeToIphone(188),
        backgroundColor: variables.subNavItemBackground,
      },

// Related with page gutter
        '.small-gutter': {
          margin: 2,
          height: dimensionRelativeToIphone(179),
        },
        '.medium-gutter': {
          margin: 4,
          height: dimensionRelativeToIphone(173),
        },
        '.large-gutter': {
          margin: 8,
          height: dimensionRelativeToIphone(161),
        },
        '.no-gutter': {
          margin: 0,
          height: dimensionRelativeToIphone(188),
        },
        width: dimensionRelativeToIphone(188),
        backgroundColor: variables.subNavItemBackground,
      },
      text: {
        flex: 0,
        width: null,
        fontSize: 15,
        marginLeft: variables.smallGutter,
        color: variables.subNavItemColor,
      },
      backgroundImage: {
        resizeMode: 'cover',
      }
    },
    'shoutem.navigation.CardList': {

},
        '.no-gutter': {
          padding: 0,
          margin: 0,
        },
      },
      item: {
        [INCLUDE]: ['alignmentVariants'],
        // Related with page gutter
        '.small-gutter': {
          margin: 2,
          height: dimensionRelativeToIphone(179),
        },
        '.medium-gutter': {
          margin: 4,
          height: dimensionRelativeToIphone(173),
        },
        '.large-gutter': {
          margin: 8,
          height: dimensionRelativeToIphone(161),
        },
        '.no-gutter': {
          margin: 0,
          height: dimensionRelativeToIphone(188),
        },
        width: dimensionRelativeToIphone(188),
        backgroundColor: variables.subNavItemBackground,
      },
      text: {
        flex: 0,
        width: null,
        fontSize: 15,

margin: 2,
          height: dimensionRelativeToIphone(179),
        },
        '.medium-gutter': {
          margin: 4,
          height: dimensionRelativeToIphone(173),
        },
        '.large-gutter': {
          margin: 8,
          height: dimensionRelativeToIphone(161),
        },
        '.no-gutter': {
          margin: 0,
          height: dimensionRelativeToIphone(188),
        },
        width: dimensionRelativeToIphone(188),
        backgroundColor: variables.subNavItemBackground,
      },
      text: {
        flex: 0,
        width: null,
        fontSize: 15,
        marginLeft: variables.smallGutter,
        color: variables.subNavItemColor,
      },
      backgroundImage: {
        resizeMode: 'cover',
      }
    },
    'shoutem.navigation.CardList': {
      page: {
        // Page padding bottom is defined by item marginBottom

resolvePageProps() {
    const { topOffset, listAlignment } = this.getLayoutSettings();
    const { dimensions: { height } } = this.state;
    const { style, isTabBar } = this.props;

    const homeBarHeight = Device.select({
      iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
      iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
      default: 0,
    });

    return {
      style: {
        paddingTop: dimensionRelativeToIphone(topOffset),
        minHeight: isTabBar ? height : height - homeBarHeight,
        ...style.page,
      },
      styleName: listAlignment,
    };
  }

renderStatusAttachments() {
    const { comment } = this.props;

    const { shoutem_attachments: attachments } = comment;
    const hasPicture = _.get(attachments, [0, 'type']) === 'picture';

    if (!hasPicture) {
      return null;
    }

    return (
      
        <img style="{{">
      
    );
  }

const ProfileImage = ({ isEditable, onPress, uri }) => (
  
);