How to use @shoutem/ui - 10 common examples

import { resizeImageSource } from './services/resizeImageSource';
import { loadLocalConfiguration, fetchConfiguration } from './redux';
import { CONFIGURATION_SCHEMA, ACTIVE_APP_STATE, ext } from './const';
import { SeAttachment } from './html';
import buildConfig from './buildConfig.json';

export const appActions = {};

let appStateChangeHandler; // Dynamically created handler;
let appState = ACTIVE_APP_STATE;

let application;
let unsubscribeFromConfigurationLoaded;

Html.registerElement('se-attachment', SeAttachment);
Html.registerElement('attachment', SeAttachment);

export const getAppId = () => {
  if (_.isEmpty(application)) {
    console.warn('You called getAppId before appWillMount has finished.');
  }

  return _.get(application, 'props.appId') || buildConfig.appId;
};

export const initializeApp = () => {
  Image.setPropsTransformer(resizeImageSource);
};

function loadConfiguration(app) {
  const store = app.getStore();
  const dispatch = store.dispatch;

import { isConfigurationLoaded } from './shared/isConfigurationLoaded';
import { resizeImageSource } from './services/resizeImageSource';
import { loadLocalConfiguration, fetchConfiguration } from './redux';
import { CONFIGURATION_SCHEMA, ACTIVE_APP_STATE, ext } from './const';
import { SeAttachment } from './html';
import buildConfig from './buildConfig.json';

export const appActions = {};

let appStateChangeHandler; // Dynamically created handler;
let appState = ACTIVE_APP_STATE;

let application;
let unsubscribeFromConfigurationLoaded;

Html.registerElement('se-attachment', SeAttachment);
Html.registerElement('attachment', SeAttachment);

export const getAppId = () => {
  if (_.isEmpty(application)) {
    console.warn('You called getAppId before appWillMount has finished.');
  }

  return _.get(application, 'props.appId') || buildConfig.appId;
};

export const initializeApp = () => {
  Image.setPropsTransformer(resizeImageSource);
};

function loadConfiguration(app) {
  const store = app.getStore();

renderData(articles) {
    const { hasFeaturedItem } = this.props;

    // Group the articles into rows with 2 columns
    // If the screen has a featured article, it is the first article
    let isFeaturedArticle = hasFeaturedItem;
    const groupedArticles = GridRow.groupByRows(articles, GRID_ITEMS_PER_ROW, () => {
      if (isFeaturedArticle) {
        // The first article is featured, and it
        // should take up the entire width of the grid
        isFeaturedArticle = false;
        return GRID_ITEMS_PER_ROW;
      }
      return 1;
    });

    // Transfer the loading status from the original collection
    cloneStatus(articles, groupedArticles);

    return super.renderData(groupedArticles);
  }
}

renderData(articles) {
    const { hasFeaturedItem } = this.props;
    // Group the articles into rows with 2 columns, except for the
    // first article. The first article is treated as a featured article
    let isFirstArticle = hasFeaturedItem;
    const groupedArticles = GridRow.groupByRows(articles, 2, () => {
      if (isFirstArticle) {
        isFirstArticle = false;
        return 2;
      }

      return 1;
    });

    // Transfer the loading status from the original collection
    cloneStatus(articles, groupedArticles);

    return super.renderData(groupedArticles);
  }
}

renderData(articles) {
    // Group the articles into rows with 2 columns, except for the
    // first article. The first article is treated as a featured article
    let isFirstArticle = true;
    const groupedArticles = GridRow.groupByRows(articles, 2, () => {
      if (isFirstArticle) {
        isFirstArticle = false;
        return 2;
      }

      return 1;
    });

    // Transfer the loading status from the original collection
    cloneStatus(articles, groupedArticles);

    return super.renderData(groupedArticles);
  }
}

renderData(articles) {
    const { hasFeaturedItem } = this.props;
    // Group the articles into rows with 2 columns, except for the
    // first article. The first article is treated as a featured article
    let isFirstArticle = hasFeaturedItem;
    const groupedArticles = GridRow.groupByRows(articles, 2, () => {
      if (isFirstArticle) {
        isFirstArticle = false;
        return 2;
      }

      return 1;
    });

    // Transfer the loading status from the original collection
    cloneStatus(articles, groupedArticles);

    return super.renderData(groupedArticles);
  }
}

};

  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,