Customization

You can personalize your widget using BlazeWidgetLayout interface

const blazeWidgetLayout: BlazeWidgetLayout = {
  horizontalItemsSpacing: 10,
  verticalItemsSpacing: 10,
  itemRatio: 9/16,
  columns: 4,
  widgetItemAppearance: {
    title: {
      isVisible: true,
      readStyle: {
        font: 'HelveticaNeue',
        textSize: 10,
        letterSpacing: 1,
        textColor: '#FFFF00',
        lineHeight: 20,
        maxLines: 2,
        textAlign: 'Start',
      },
      unreadStyle: {
        font: 'HelveticaNeue',
        textSize: 14,
        letterSpacing: 0,
        textColor: '#FF0000',
        lineHeight: 10,
        maxLines: 3,
        textAlign: 'End',
      },
    },
    image: {
      position: 'TopStart',
      border: {
        isVisible: true,
        liveReadBorder: {
          isVisible: true,
          color: '#0000FF',
          margin: 2,
          width: 1,
        },
        liveUnreadBorder: {
          isVisible: true,
          color: '#00FF00',
          margin: 2,
          width: 1,
        },
        readBorder: {
          isVisible: true,
          color: '#FFA500',
          margin: 2,
          width: 1,
        },
        unreadBorder: {
          isVisible: true,
          color: '#FF0000',
          margin: 0,
          width: 1,
        },
      },
      type: 'VerticalTwoByThree',
    },
  },
};

<BlazeStoriesGridView blazeWidgetLayout={blazeWidgetLayout} />