@shoutem/ui 5.0.1 → 5.2.1

package/theme.js

@@ -14,6 +14,7 @@ import {
   NAVIGATION_HEADER_HEIGHT,
 } from './const';
 import { Device } from './helpers';
+import { resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
@@ -252,2705 +253,2818 @@ export const defaultThemeVariables = {
   galleryDotSize: 8,
 };
 
-export default (variables = defaultThemeVariables) => ({
-  //
-  // Common
-  //
-  guttersPadding: {
-    ...createVariations(
-      '.sm-gutter',
-      sizeVariants,
-      'padding',
-      variables.smallGutter,
-    ),
-    ...createVariations(
-      '.md-gutter',
-      sizeVariants,
-      'padding',
-      variables.mediumGutter,
-    ),
-    ...createVariations(
-      '.lg-gutter',
-      sizeVariants,
-      'padding',
-      variables.largeGutter,
-    ),
-    ...createVariations(
-      '.xl-gutter',
-      sizeVariants,
-      'padding',
-      variables.extraLargeGutter,
-    ),
-  },
-
-  guttersMargin: {
-    ...createVariations(
-      '.sm-gutter',
-      sizeVariants,
-      'margin',
-      variables.smallGutter,
-    ),
-    ...createVariations(
-      '.md-gutter',
-      sizeVariants,
-      'margin',
-      variables.mediumGutter,
-    ),
-    ...createVariations(
-      '.lg-gutter',
-      sizeVariants,
-      'margin',
-      variables.largeGutter,
-    ),
-    ...createVariations(
-      '.xl-gutter',
-      sizeVariants,
-      'margin',
-      variables.extraLargeGutter,
-    ),
-  },
-
-  commonVariants: {
-    '.rounded-corners': {
-      borderRadius: 2,
-      borderWidth: 0,
-      borderColor: 'transparent',
-    },
-
-    '.flexible': {
-      flex: 1,
-    },
-
-    '.inflexible': {
-      flex: 0,
-    },
-
-    '.collapsible': {
-      flex: -1,
-    },
-
-    '.stretch': {
-      alignSelf: 'stretch',
-    },
-
-    '.space-between': {
-      justifyContent: 'space-between',
+export default () => {
+  return {
+    //
+    // Common
+    //
+    guttersPadding: {
+      ...createVariations(
+        '.sm-gutter',
+        sizeVariants,
+        'padding',
+        resolveVariable('smallGutter'),
+      ),
+      ...createVariations(
+        '.md-gutter',
+        sizeVariants,
+        'padding',
+        resolveVariable('mediumGutter'),
+      ),
+      ...createVariations(
+        '.lg-gutter',
+        sizeVariants,
+        'padding',
+        resolveVariable('largeGutter'),
+      ),
+      ...createVariations(
+        '.xl-gutter',
+        sizeVariants,
+        'padding',
+        resolveVariable('extraLargeGutter'),
+      ),
     },
 
-    '.space-around': {
-      justifyContent: 'space-around',
-    },
-  },
-  alignmentVariants: {
-    flexDirection: 'column',
-    '.topLeft': {
-      justifyContent: 'flex-start',
-      alignItems: 'flex-start',
-    },
-    '.topCenter': {
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-    },
-    '.topRight': {
-      justifyContent: 'flex-start',
-      alignItems: 'flex-end',
-    },
-    '.middleLeft': {
-      justifyContent: 'center',
-      alignItems: 'flex-start',
-    },
-    '.middleCenter': {
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    '.middleRight': {
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-    },
-    '.bottomLeft': {
-      justifyContent: 'flex-end',
-      alignItems: 'flex-start',
-    },
-    '.bottomCenter': {
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-    },
-    '.bottomRight': {
-      justifyContent: 'flex-end',
-      alignItems: 'flex-end',
-    },
-    '.top': {
-      justifyContent: 'flex-start',
-    },
-    '.middle': {
-      justifyContent: 'center',
-    },
-    '.bottom': {
-      justifyContent: 'flex-end',
+    guttersMargin: {
+      ...createVariations(
+        '.sm-gutter',
+        sizeVariants,
+        'margin',
+        resolveVariable('smallGutter'),
+      ),
+      ...createVariations(
+        '.md-gutter',
+        sizeVariants,
+        'margin',
+        resolveVariable('mediumGutter'),
+      ),
+      ...createVariations(
+        '.lg-gutter',
+        sizeVariants,
+        'margin',
+        resolveVariable('largeGutter'),
+      ),
+      ...createVariations(
+        '.xl-gutter',
+        sizeVariants,
+        'margin',
+        resolveVariable('extraLargeGutter'),
+      ),
     },
-  },
 
-  fillParent: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  'fill-parent': {
-    '.fill-parent': {
-      [INCLUDE]: ['fillParent'],
-    },
-  },
+    commonVariants: {
+      '.rounded-corners': {
+        borderRadius: 2,
+        borderWidth: 0,
+        borderColor: 'transparent',
+      },
 
-  dimmedFeaturedBackground: {
-    backgroundColor: inverseColorBrightnessForAmount(
-      variables.featuredColor,
-      5,
-    ),
-  },
+      '.flexible': {
+        flex: 1,
+      },
 
-  featuredBackground: {
-    backgroundColor: variables.featuredColor,
-  },
+      '.inflexible': {
+        flex: 0,
+      },
 
-  imageOverlayText: {
-    ...createSharedStyle(textComponents, {
-      color: variables.imageOverlayTextColor,
-    }),
+      '.collapsible': {
+        flex: -1,
+      },
 
-    'shoutem.ui.Icon': {
-      '.indicator': {
-        color: variables.imageOverlayTextColor,
+      '.stretch': {
+        alignSelf: 'stretch',
       },
 
-      '.scroll-indicator': {
-        color: variables.imageOverlayTextColor,
+      '.space-between': {
+        justifyContent: 'space-between',
       },
 
-      color: variables.imageOverlayTextColor,
+      '.space-around': {
+        justifyContent: 'space-around',
+      },
+    },
+    alignmentVariants: {
+      flexDirection: 'column',
+      '.topLeft': {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+      },
+      '.topCenter': {
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+      },
+      '.topRight': {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-end',
+      },
+      '.middleLeft': {
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+      },
+      '.middleCenter': {
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      '.middleRight': {
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+      },
+      '.bottomLeft': {
+        justifyContent: 'flex-end',
+        alignItems: 'flex-start',
+      },
+      '.bottomCenter': {
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      },
+      '.bottomRight': {
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+      },
+      '.top': {
+        justifyContent: 'flex-start',
+      },
+      '.middle': {
+        justifyContent: 'center',
+      },
+      '.bottom': {
+        justifyContent: 'flex-end',
+      },
     },
-  },
-
-  boldTextStyle: {
-    fontWeight: resolveFontWeight('500'),
-  },
-
-  italicTextStyle: {
-    fontStyle: resolveFontStyle('italic'),
-  },
 
-  codeTextStyle: {
-    fontFamily: 'Menlo',
-  },
+    fillParent: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    'fill-parent': {
+      '.fill-parent': {
+        [INCLUDE]: ['fillParent'],
+      },
+    },
 
-  multilineTextStyle: {
-    '.v-center': {
-      // Compensate for lineHeight, because
-      // textAlignVertical is not supported on iOS
-      marginTop: -4,
-      marginBottom: 4,
+    dimmedFeaturedBackground: {
+      backgroundColor: inverseColorBrightnessForAmount(
+        resolveVariable('featuredColor'),
+        5,
+      ),
     },
 
-    lineHeight: 26,
-  },
+    featuredBackground: {
+      backgroundColor: resolveVariable('featuredColor'),
+    },
 
-  text: {
-    [INCLUDE]: ['commonVariants', 'guttersMargin'],
+    imageOverlayText: {
+      ...createSharedStyle(textComponents, {
+        color: resolveVariable('imageOverlayTextColor'),
+      }),
 
-    '.line-through': {
-      textDecorationLine: 'line-through',
-    },
+      'shoutem.ui.Icon': {
+        '.indicator': {
+          color: resolveVariable('imageOverlayTextColor'),
+        },
 
-    '.h-left': {
-      textAlign: 'left',
-    },
+        '.scroll-indicator': {
+          color: resolveVariable('imageOverlayTextColor'),
+        },
 
-    '.h-right': {
-      textAlign: 'right',
+        color: resolveVariable('imageOverlayTextColor'),
+      },
     },
 
-    '.h-center': {
-      textAlign: 'center',
+    boldTextStyle: {
+      fontWeight: resolveFontWeight('500'),
     },
 
-    '.bold': {
-      [INCLUDE]: ['boldTextStyle'],
+    italicTextStyle: {
+      fontStyle: resolveFontStyle('italic'),
     },
 
-    '.multiline': {
-      [INCLUDE]: ['multilineTextStyle'],
+    codeTextStyle: {
+      fontFamily: 'Menlo',
     },
 
-    '.muted': {
-      opacity: 0.5,
-    },
+    multilineTextStyle: {
+      '.v-center': {
+        // Compensate for lineHeight, because
+        // textAlignVertical is not supported on iOS
+        marginTop: -4,
+        marginBottom: 4,
+      },
 
-    '.link': {
-      ...variables.links,
+      lineHeight: 26,
     },
 
-    backgroundColor: 'transparent',
-  },
-
-  'shoutem.ui.Heading': {
-    [INCLUDE]: ['text'],
-
-    lineHeight: calculateLineHeight(variables.heading.fontSize),
-    ...variables.heading,
-    fontFamily: resolveFontFamily(
-      variables.heading.fontFamily,
-      variables.heading.fontWeight,
-      variables.heading.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.heading.fontWeight),
-    fontStyle: resolveFontStyle(variables.heading.fontStyle),
-  },
+    text: {
+      [INCLUDE]: ['commonVariants', 'guttersMargin'],
 
-  'shoutem.ui.Title': {
-    [INCLUDE]: ['text'],
-
-    lineHeight: calculateLineHeight(variables.title.fontSize),
-    ...variables.title,
-    fontFamily: resolveFontFamily(
-      variables.title.fontFamily,
-      variables.title.fontWeight,
-      variables.title.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.title.fontWeight),
-    fontStyle: resolveFontStyle(variables.title.fontStyle),
-  },
+      '.line-through': {
+        textDecorationLine: 'line-through',
+      },
 
-  'shoutem.ui.Subtitle': {
-    [INCLUDE]: ['text'],
-
-    lineHeight: calculateLineHeight(variables.subtitle.fontSize),
-    ...variables.subtitle,
-    fontFamily: resolveFontFamily(
-      variables.subtitle.fontFamily,
-      variables.subtitle.fontWeight,
-      variables.subtitle.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.subtitle.fontWeight),
-    fontStyle: resolveFontStyle(variables.subtitle.fontStyle),
-  },
+      '.h-left': {
+        textAlign: 'left',
+      },
 
-  'shoutem.ui.Caption': {
-    [INCLUDE]: ['text'],
-
-    lineHeight: calculateLineHeight(variables.caption.fontSize),
-    letterSpacing: 0.5,
-    ...variables.caption,
-    fontFamily: resolveFontFamily(
-      variables.caption.fontFamily,
-      variables.caption.fontWeight,
-      variables.caption.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.caption.fontWeight),
-    fontStyle: resolveFontStyle(variables.caption.fontStyle),
-
-    '.form-error': {
-      color: variables.errorText.color,
-      fontFamily: resolveFontFamily(
-        variables.errorText.fontFamily,
-        variables.errorText.fontWeight,
-        variables.errorText.fontStyle,
-      ),
-      fontSize: variables.errorText.fontSize,
-      fontStyle: resolveFontStyle(variables.errorText.fontStyle),
-      fontWeight: resolveFontWeight(variables.errorText.fontWeight),
-      lineHeight: calculateLineHeight(variables.errorText.fontSize),
-    },
-  },
+      '.h-right': {
+        textAlign: 'right',
+      },
 
-  'shoutem.ui.Text': {
-    [INCLUDE]: ['text'],
-
-    ...variables.text,
-    fontFamily: resolveFontFamily(
-      variables.text.fontFamily,
-      variables.text.fontWeight,
-      variables.text.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.text.fontWeight),
-    fontStyle: resolveFontStyle(variables.text.fontStyle),
-  },
+      '.h-center': {
+        textAlign: 'center',
+      },
 
-  //
-  // Indicators
-  //
-  indicator: {
-    color: variables.text.color,
-  },
+      '.bold': {
+        [INCLUDE]: ['boldTextStyle'],
+      },
 
-  //
-  // Images
-  //
-  imageSizes: {
-    // NOTE: '-avatar' styles do not work with ImageBackground
-    '.small-avatar': {
-      width: dimensionRelativeToIphone(25),
-      height: dimensionRelativeToIphone(25),
-      borderRadius: 12.5,
-      borderWidth: 0,
-    },
+      '.multiline': {
+        [INCLUDE]: ['multilineTextStyle'],
+      },
 
-    '.small': {
-      width: dimensionRelativeToIphone(65),
-      height: dimensionRelativeToIphone(65),
-    },
+      '.muted': {
+        opacity: 0.5,
+      },
 
-    '.medium-avatar': {
-      width: dimensionRelativeToIphone(145),
-      height: dimensionRelativeToIphone(145),
-      borderRadius: dimensionRelativeToIphone(72.5),
-      borderWidth: 0,
-    },
+      '.link': {
+        ...resolveVariable('links'),
+      },
 
-    '.medium': {
-      width: dimensionRelativeToIphone(145),
-      height: dimensionRelativeToIphone(92),
+      backgroundColor: 'transparent',
     },
 
-    '.medium-wide': {
-      width: dimensionRelativeToIphone(180),
-      height: dimensionRelativeToIphone(85),
-    },
+    'shoutem.ui.Heading': {
+      [INCLUDE]: ['text'],
 
-    '.medium-portrait': {
-      width: dimensionRelativeToIphone(209),
-      height: dimensionRelativeToIphone(139),
+      lineHeight: calculateLineHeight(resolveVariable('heading.fontSize')),
+      ...resolveVariable('heading'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('heading.fontFamily'),
+        resolveVariable('heading.fontWeight'),
+        resolveVariable('heading.fontStyle'),
+      ),
+      fontWeight: resolveFontWeight(resolveVariable('heading.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('heading.fontStyle')),
     },
 
-    '.medium-square': {
-      width: dimensionRelativeToIphone(145),
-      height: dimensionRelativeToIphone(145),
-    },
+    'shoutem.ui.Title': {
+      [INCLUDE]: ['text'],
 
-    // NOTE: Image resizing doesn't work correctly if both
-    // dimensions are not explicitly defined, so we can't
-    // use flex: 1, or alignSelf: 'stretch' here...
-    '.featured': {
-      width: dimensionRelativeToIphone(365),
-      height: dimensionRelativeToIphone(345),
+      lineHeight: calculateLineHeight(resolveVariable('title.fontSize')),
+      ...resolveVariable('title'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('title.fontFamily'),
+        resolveVariable('title.fontWeight'),
+        resolveVariable('title.fontStyle'),
+      ),
+      fontWeight: resolveFontWeight(resolveVariable('title.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('title.fontStyle')),
     },
 
-    '.large': {
-      width: window.width,
-      height: dimensionRelativeToIphone(280),
-    },
+    'shoutem.ui.Subtitle': {
+      [INCLUDE]: ['text'],
 
-    '.large-portrait': {
-      width: window.width,
-      height: dimensionRelativeToIphone(518),
+      lineHeight: calculateLineHeight(resolveVariable('subtitle.fontSize')),
+      ...resolveVariable('subtitle'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('subtitle.fontFamily'),
+        resolveVariable('subtitle.fontWeight'),
+        resolveVariable('subtitle.fontStyle'),
+      ),
+      fontWeight: resolveFontWeight(resolveVariable('subtitle.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('subtitle.fontStyle')),
     },
 
-    '.large-banner': {
-      width: window.width,
-      height: dimensionRelativeToIphone(200),
-    },
+    'shoutem.ui.Caption': {
+      [INCLUDE]: ['text'],
 
-    '.large-square': {
-      width: window.width,
-      height: window.width,
-    },
+      lineHeight: calculateLineHeight(resolveVariable('caption.fontSize')),
+      letterSpacing: 0.5,
+      ...resolveVariable('caption'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('caption.fontFamily'),
+        resolveVariable('caption.fontWeight'),
+        resolveVariable('caption.fontStyle'),
+      ),
+      fontWeight: resolveFontWeight(resolveVariable('caption.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('caption.fontStyle')),
 
-    '.large-wide': {
-      width: window.width,
-      height: dimensionRelativeToIphone(238),
+      '.form-error': {
+        color: resolveVariable('errorText.color'),
+        fontFamily: resolveFontFamily(
+          resolveVariable('errorText.fontFamily'),
+          resolveVariable('errorText.fontWeight'),
+          resolveVariable('errorText.fontStyle'),
+        ),
+        fontSize: resolveVariable('errorText.fontSize'),
+        fontStyle: resolveFontStyle(resolveVariable('errorText.fontStyle')),
+        fontWeight: resolveFontWeight(resolveVariable('errorText.fontWeight')),
+        lineHeight: calculateLineHeight(resolveVariable('errorText.fontSize')),
+      },
     },
 
-    '.large-ultra-wide': {
-      width: window.width,
-      height: dimensionRelativeToIphone(130),
-    },
-  },
-  'shoutem.ui.Image': {
-    [INCLUDE]: ['commonVariants', 'imageSizes', 'fill-parent', 'guttersMargin'],
+    'shoutem.ui.Text': {
+      [INCLUDE]: ['text'],
 
-    '.placeholder': {
-      backgroundColor: inverseColorBrightnessForAmount(
-        variables.paperColor,
-        10,
+      ...resolveVariable('text'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('text.fontFamily'),
+        resolveVariable('text.fontWeight'),
+        resolveVariable('text.fontStyle'),
       ),
+      fontWeight: resolveFontWeight(resolveVariable('text.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('text.fontStyle')),
     },
 
-    heroAnimation(driver, { layout }) {
-      return {
-        transform: [
-          {
-            scale: driver.interpolate({
-              inputRange: [-0.9 * layout.height, 0],
-              outputRange: [3, 1],
-              extrapolateRight: 'clamp',
-              useNativeDriver: true,
-            }),
-          },
-          {
-            translateY: driver.interpolate({
-              inputRange: [-100, 100],
-              outputRange: [-50, 50],
-              extrapolateLeft: 'clamp',
-              useNativeDriver: true,
-            }),
-          },
-        ],
-      };
+    //
+    // Indicators
+    //
+    indicator: {
+      color: resolveVariable('text.color'),
     },
-  },
-  'shoutem.ui.ImageBackground': {
-    [INCLUDE]: ['commonVariants', 'imageSizes', 'fill-parent', 'guttersMargin'],
 
-    '.overflow-hidden': {
-      overflow: 'hidden',
-    },
+    //
+    // Images
+    //
+    imageSizes: {
+      // NOTE: '-avatar' styles do not work with ImageBackground
+      '.small-avatar': {
+        width: dimensionRelativeToIphone(25),
+        height: dimensionRelativeToIphone(25),
+        borderRadius: 12.5,
+        borderWidth: 0,
+      },
 
-    '.placeholder': {
-      backgroundColor: inverseColorBrightnessForAmount(
-        variables.paperColor,
-        10,
-      ),
+      '.small': {
+        width: dimensionRelativeToIphone(65),
+        height: dimensionRelativeToIphone(65),
+      },
 
-      'shoutem.ui.Icon': {
-        color: inverseColorBrightnessForAmount(variables.paperColor, 30),
+      '.medium-avatar': {
+        width: dimensionRelativeToIphone(145),
+        height: dimensionRelativeToIphone(145),
+        borderRadius: dimensionRelativeToIphone(72.5),
+        borderWidth: 0,
       },
-    },
 
-    'shoutem.ui.Tile': {
-      [INCLUDE]: ['textCentricTile', 'fillParent', 'imageOverlayText'],
+      '.medium': {
+        width: dimensionRelativeToIphone(145),
+        height: dimensionRelativeToIphone(92),
+      },
 
-      'shoutem.ui.Button': {
-        '.clear': {
-          [INCLUDE]: ['imageOverlayText'],
-        },
+      '.medium-wide': {
+        width: dimensionRelativeToIphone(180),
+        height: dimensionRelativeToIphone(85),
       },
 
-      backgroundColor: variables.imageOverlayColor,
-    },
+      '.medium-portrait': {
+        width: dimensionRelativeToIphone(209),
+        height: dimensionRelativeToIphone(139),
+      },
 
-    heroAnimation(driver, { layout }) {
-      return {
-        transform: [
-          {
-            scale: driver.interpolate({
-              inputRange: [-0.9 * layout.height, 0],
-              outputRange: [3, 1],
-              extrapolateRight: 'clamp',
-              useNativeDriver: true,
-            }),
-          },
-          {
-            translateY: driver.interpolate({
-              inputRange: [-100, 100],
-              outputRange: [-50, 50],
-              extrapolateLeft: 'clamp',
-              useNativeDriver: true,
-            }),
-          },
-        ],
-      };
-    },
+      '.medium-square': {
+        width: dimensionRelativeToIphone(145),
+        height: dimensionRelativeToIphone(145),
+      },
 
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+      // NOTE: Image resizing doesn't work correctly if both
+      // dimensions are not explicitly defined, so we can't
+      // use flex: 1, or alignSelf: 'stretch' here...
+      '.featured': {
+        width: dimensionRelativeToIphone(365),
+        height: dimensionRelativeToIphone(345),
+      },
 
-  //
-  // Containers
-  //
-  verticalFlexAlignment: {
-    '.h-center': {
-      alignItems: 'center',
-    },
+      '.large': {
+        width: window.width,
+        height: dimensionRelativeToIphone(280),
+      },
 
-    '.h-start': {
-      alignItems: 'flex-start',
-    },
+      '.large-portrait': {
+        width: window.width,
+        height: dimensionRelativeToIphone(518),
+      },
 
-    '.h-end': {
-      alignItems: 'flex-end',
-    },
+      '.large-banner': {
+        width: window.width,
+        height: dimensionRelativeToIphone(200),
+      },
 
-    '.v-center': {
-      justifyContent: 'center',
-    },
+      '.large-square': {
+        width: window.width,
+        height: window.width,
+      },
 
-    '.v-start': {
-      justifyContent: 'flex-start',
-    },
+      '.large-wide': {
+        width: window.width,
+        height: dimensionRelativeToIphone(238),
+      },
 
-    '.v-end': {
-      justifyContent: 'flex-end',
-    },
-  },
-  horizontalFlexAlignment: {
-    '.h-center': {
-      justifyContent: 'center',
+      '.large-ultra-wide': {
+        width: window.width,
+        height: dimensionRelativeToIphone(130),
+      },
     },
+    'shoutem.ui.Image': {
+      [INCLUDE]: [
+        'commonVariants',
+        'imageSizes',
+        'fill-parent',
+        'guttersMargin',
+      ],
+
+      '.placeholder': {
+        backgroundColor: inverseColorBrightnessForAmount(
+          resolveVariable('paperColor'),
+          10,
+        ),
+      },
 
-    '.h-start': {
-      justifyContent: 'flex-start',
+      heroAnimation(driver, { layout }) {
+        return {
+          transform: [
+            {
+              scale: driver.interpolate({
+                inputRange: [-0.9 * layout.height, 0],
+                outputRange: [3, 1],
+                extrapolateRight: 'clamp',
+                useNativeDriver: true,
+              }),
+            },
+            {
+              translateY: driver.interpolate({
+                inputRange: [-100, 100],
+                outputRange: [-50, 50],
+                extrapolateLeft: 'clamp',
+                useNativeDriver: true,
+              }),
+            },
+          ],
+        };
+      },
     },
+    'shoutem.ui.ImageBackground': {
+      [INCLUDE]: [
+        'commonVariants',
+        'imageSizes',
+        'fill-parent',
+        'guttersMargin',
+      ],
 
-    '.h-end': {
-      justifyContent: 'flex-end',
-    },
+      '.overflow-hidden': {
+        overflow: 'hidden',
+      },
 
-    '.v-center': {
-      alignItems: 'center',
-    },
+      '.placeholder': {
+        backgroundColor: inverseColorBrightnessForAmount(
+          resolveVariable('paperColor'),
+          10,
+        ),
 
-    '.v-start': {
-      alignItems: 'flex-start',
-    },
+        'shoutem.ui.Icon': {
+          color: inverseColorBrightnessForAmount(
+            resolveVariable('paperColor'),
+            30,
+          ),
+        },
+      },
 
-    '.v-end': {
-      alignItems: 'flex-end',
-    },
-  },
-  'shoutem.ui.View': {
-    [INCLUDE]: ['commonVariants', 'guttersPadding'],
+      'shoutem.ui.Tile': {
+        [INCLUDE]: ['textCentricTile', 'fillParent', 'imageOverlayText'],
 
-    '.horizontal': {
-      [INCLUDE]: ['horizontalFlexAlignment'],
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-    },
+        'shoutem.ui.Button': {
+          '.clear': {
+            [INCLUDE]: ['imageOverlayText'],
+          },
+        },
 
-    '.vertical': {
-      [INCLUDE]: ['verticalFlexAlignment'],
-      flexDirection: 'column',
-    },
+        backgroundColor: resolveVariable('imageOverlayColor'),
+      },
 
-    '.fill-parent': {
-      [INCLUDE]: ['fillParent'],
-    },
+      heroAnimation(driver, { layout }) {
+        return {
+          transform: [
+            {
+              scale: driver.interpolate({
+                inputRange: [-0.9 * layout.height, 0],
+                outputRange: [3, 1],
+                extrapolateRight: 'clamp',
+                useNativeDriver: true,
+              }),
+            },
+            {
+              translateY: driver.interpolate({
+                inputRange: [-100, 100],
+                outputRange: [-50, 50],
+                extrapolateLeft: 'clamp',
+                useNativeDriver: true,
+              }),
+            },
+          ],
+        };
+      },
 
-    '.overlay': {
-      backgroundColor: variables.imageOverlayColor,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
     },
 
-    '.overlay-bottom': {
-      height: 25,
-      bottom: 0,
-      left: 0,
-      position: 'absolute',
-      right: 0,
-    },
+    //
+    // Containers
+    //
+    verticalFlexAlignment: {
+      '.h-center': {
+        alignItems: 'center',
+      },
 
-    // Should deprecate in the future and use the paper
-    // styleName instead to keep it consistent
-    '.solid': {
-      backgroundColor: variables.paperColor,
-    },
+      '.h-start': {
+        alignItems: 'flex-start',
+      },
 
-    '.paper': {
-      backgroundColor: variables.paperColor,
-    },
+      '.h-end': {
+        alignItems: 'flex-end',
+      },
 
-    '.wrap': {
-      flexWrap: 'wrap',
-    },
+      '.v-center': {
+        justifyContent: 'center',
+      },
 
-    '.dimmed': {
-      '.featured': {
-        [INCLUDE]: ['dimmedFeaturedBackground'],
+      '.v-start': {
+        justifyContent: 'flex-start',
       },
-    },
 
-    '.muted': {
-      opacity: 0.3,
+      '.v-end': {
+        justifyContent: 'flex-end',
+      },
     },
+    horizontalFlexAlignment: {
+      '.h-center': {
+        justifyContent: 'center',
+      },
 
-    '.featured': {
-      [INCLUDE]: ['featuredBackground'],
-    },
+      '.h-start': {
+        justifyContent: 'flex-start',
+      },
 
-    '.center': {
-      alignSelf: 'center',
-    },
+      '.h-end': {
+        justifyContent: 'flex-end',
+      },
 
-    '.badge': {
-      alignItems: 'center',
-      backgroundColor: variables.navBarIconsColor,
-      borderColor: variables.navBarBackground,
-      borderRadius: 8,
-      borderWidth: 2,
-      height: 16,
-      justifyContent: 'center',
-      position: 'absolute',
-      width: 16,
+      '.v-center': {
+        alignItems: 'center',
+      },
 
-      'shoutem.ui.Text': {
-        color: variables.navBarBackground,
-        fontSize: 9,
-        fontWeight: 'bold',
-        textAlign: 'center',
+      '.v-start': {
+        alignItems: 'flex-start',
       },
-    },
 
-    '.oval-highlight': {
-      alignItems: 'center',
-      backgroundColor: changeColorAlpha('#030303', 0.1),
-      borderRadius: 31,
-      height: 62,
-      justifyContent: 'center',
-      width: 62,
+      '.v-end': {
+        alignItems: 'flex-end',
+      },
     },
-  },
+    'shoutem.ui.View': {
+      [INCLUDE]: ['commonVariants', 'guttersPadding'],
 
-  'shoutem.ui.Screen': {
-    [INCLUDE]: ['commonVariants', 'guttersPadding'],
+      '.horizontal': {
+        [INCLUDE]: ['horizontalFlexAlignment'],
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+      },
 
-    '.full-screen': {
-      marginTop: -(NAVIGATION_BAR_HEIGHT + StyleSheet.hairlineWidth),
-    },
+      '.vertical': {
+        [INCLUDE]: ['verticalFlexAlignment'],
+        flexDirection: 'column',
+      },
 
-    '.paper': {
-      backgroundColor: variables.paperColor,
-    },
+      '.fill-parent': {
+        [INCLUDE]: ['fillParent'],
+      },
 
-    '.with-notch-padding': {
-      paddingBottom: Device.select({
-        iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
-        iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
-        default: 0,
-      }),
-    },
+      '.overlay': {
+        backgroundColor: resolveVariable('imageOverlayColor'),
+      },
 
-    'shoutem.ui.ListView': {
-      listContent: {
-        paddingBottom: Device.select({
-          iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
-          iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
-          default: 0,
-        }),
+      '.overlay-bottom': {
+        height: 25,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
       },
-    },
 
-    backgroundColor: variables.backgroundColor,
-    flex: 1,
-  },
+      // Should deprecate in the future and use the paper
+      // styleName instead to keep it consistent
+      '.solid': {
+        backgroundColor: resolveVariable('paperColor'),
+      },
 
-  'shoutem.ui.Row': {
-    ...createSharedStyle(textComponents, { flex: 1 }),
+      '.paper': {
+        backgroundColor: resolveVariable('paperColor'),
+      },
 
-    'shoutem.ui.Image': {
-      marginRight: variables.mediumGutter,
-    },
+      '.wrap': {
+        flexWrap: 'wrap',
+      },
 
-    'shoutem.ui.Icon': {
-      '.disclosure': {
-        opacity: 0.5,
-        marginRight: -7,
-        marginLeft: 4,
+      '.dimmed': {
+        '.featured': {
+          [INCLUDE]: ['dimmedFeaturedBackground'],
+        },
       },
 
-      marginRight: variables.mediumGutter,
-    },
+      '.muted': {
+        opacity: 0.3,
+      },
 
-    'shoutem.ui.Button': {
-      '.right-icon': {
-        [INCLUDE]: ['tightButton', 'clearButton'],
-        marginLeft: variables.mediumGutter,
+      '.featured': {
+        [INCLUDE]: ['featuredBackground'],
       },
-    },
 
-    'shoutem.ui.View': {
-      '.notification-dot': {
+      '.center': {
         alignSelf: 'center',
-        flex: 0,
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        borderColor: variables.indicatorColor,
-        backgroundColor: variables.indicatorColor,
-        marginLeft: -10,
-        marginRight: 4,
       },
 
-      '.vertical': {
-        '*': {
-          // Add a small gutter below each view
-          marginBottom: variables.smallGutter,
+      '.badge': {
+        alignItems: 'center',
+        backgroundColor: resolveVariable('navBarIconsColor'),
+        borderColor: resolveVariable('navBarBackground'),
+        borderRadius: 8,
+        borderWidth: 2,
+        height: 16,
+        justifyContent: 'center',
+        position: 'absolute',
+        width: 16,
+
+        'shoutem.ui.Text': {
+          color: resolveVariable('navBarBackground'),
+          fontSize: 9,
+          fontWeight: 'bold',
+          textAlign: 'center',
         },
+      },
+
+      '.oval-highlight': {
+        alignItems: 'center',
+        backgroundColor: changeColorAlpha('#030303', 0.1),
+        borderRadius: 31,
+        height: 62,
+        justifyContent: 'center',
+        width: 62,
+      },
+    },
+
+    'shoutem.ui.Screen': {
+      [INCLUDE]: ['commonVariants', 'guttersPadding'],
+
+      '.full-screen': {
+        marginTop: -(NAVIGATION_BAR_HEIGHT + StyleSheet.hairlineWidth),
+      },
+
+      '.paper': {
+        backgroundColor: resolveVariable('paperColor'),
+      },
 
-        // Compensate for the last view
-        marginBottom: -variables.smallGutter,
+      '.with-notch-padding': {
+        paddingBottom: Device.select({
+          iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
+          iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
+          default: 0,
+        }),
+      },
+
+      'shoutem.ui.ListView': {
+        listContent: {
+          paddingBottom: Device.select({
+            iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
+            iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
+            default: 0,
+          }),
+        },
       },
 
+      backgroundColor: resolveVariable('backgroundColor'),
       flex: 1,
     },
 
-    '*.top': {
-      alignSelf: 'flex-start',
-    },
+    'shoutem.ui.Row': {
+      ...createSharedStyle(textComponents, { flex: 1 }),
 
-    '.small': {
-      height: 65,
-      paddingVertical: 0,
-    },
+      'shoutem.ui.Image': {
+        marginRight: resolveVariable('mediumGutter'),
+      },
 
-    flexGrow: 1,
-    flexShrink: 0,
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    backgroundColor: variables.paperColor,
-    paddingHorizontal: variables.mediumGutter,
-    paddingVertical: variables.mediumGutter,
-  },
+      'shoutem.ui.Icon': {
+        '.disclosure': {
+          opacity: 0.5,
+          marginRight: -7,
+          marginLeft: 4,
+        },
 
-  textCentricTile: {
-    'shoutem.ui.View': {
-      '.actions': {
-        position: 'absolute',
-        top: variables.mediumGutter,
-        right: variables.mediumGutter,
+        marginRight: resolveVariable('mediumGutter'),
       },
-    },
 
-    '*': {
-      marginBottom: variables.smallGutter,
-    },
+      'shoutem.ui.Button': {
+        '.right-icon': {
+          [INCLUDE]: ['tightButton', 'clearButton'],
+          marginLeft: resolveVariable('mediumGutter'),
+        },
+      },
 
-    ...createSharedStyle(textComponents, {
-      textAlign: 'center',
-      alignSelf: 'stretch',
-    }),
-
-    flex: 1,
-    alignSelf: 'stretch',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 25,
-    paddingTop: variables.extraLargeGutter,
-    paddingBottom: variables.extraLargeGutter - variables.smallGutter,
-  },
+      'shoutem.ui.View': {
+        '.notification-dot': {
+          alignSelf: 'center',
+          flex: 0,
+          width: 6,
+          height: 6,
+          borderRadius: 3,
+          borderColor: resolveVariable('indicatorColor'),
+          backgroundColor: resolveVariable('indicatorColor'),
+          marginLeft: -10,
+          marginRight: 4,
+        },
 
-  'shoutem.ui.Tile': {
-    [INCLUDE]: ['commonVariants', 'guttersPadding'],
+        '.vertical': {
+          '*': {
+            // Add a small gutter below each view
+            marginBottom: resolveVariable('smallGutter'),
+          },
 
-    'shoutem.ui.View': {
-      '.content': {
-        '*': {
-          marginBottom: variables.mediumGutter - variables.smallGutter,
+          // Compensate for the last view
+          marginBottom: -resolveVariable('smallGutter'),
         },
 
-        alignSelf: 'stretch',
-        paddingTop: variables.mediumGutter,
-        paddingBottom: variables.smallGutter,
-        paddingHorizontal: variables.mediumGutter,
+        flex: 1,
+      },
+
+      '*.top': {
+        alignSelf: 'flex-start',
+      },
+
+      '.small': {
+        height: 65,
+        paddingVertical: 0,
       },
+
+      flexGrow: 1,
+      flexShrink: 0,
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      backgroundColor: resolveVariable('paperColor'),
+      paddingHorizontal: resolveVariable('mediumGutter'),
+      paddingVertical: resolveVariable('mediumGutter'),
     },
 
-    '.clear': {
-      backgroundColor: 'transparent',
+    textCentricTile: {
+      'shoutem.ui.View': {
+        '.actions': {
+          position: 'absolute',
+          top: resolveVariable('mediumGutter'),
+          right: resolveVariable('mediumGutter'),
+        },
+      },
+
+      '*': {
+        marginBottom: resolveVariable('smallGutter'),
+      },
+
+      ...createSharedStyle(textComponents, {
+        textAlign: 'center',
+        alignSelf: 'stretch',
+      }),
+
+      flex: 1,
+      alignSelf: 'stretch',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 25,
+      paddingTop: resolveVariable('extraLargeGutter'),
+      paddingBottom:
+        resolveVariable('extraLargeGutter') - resolveVariable('smallGutter'),
     },
 
-    '.small': {
+    'shoutem.ui.Tile': {
+      [INCLUDE]: ['commonVariants', 'guttersPadding'],
+
       'shoutem.ui.View': {
         '.content': {
           '*': {
-            marginBottom: variables.smallGutter,
+            marginBottom:
+              resolveVariable('mediumGutter') - resolveVariable('smallGutter'),
           },
 
           alignSelf: 'stretch',
-          paddingTop: variables.mediumGutter,
-          paddingBottom: 0,
-          paddingHorizontal: 0,
-          marginBottom: -variables.smallGutter,
+          paddingTop: resolveVariable('mediumGutter'),
+          paddingBottom: resolveVariable('smallGutter'),
+          paddingHorizontal: resolveVariable('mediumGutter'),
         },
       },
 
-      width: 145,
-    },
+      '.clear': {
+        backgroundColor: 'transparent',
+      },
 
-    '.text-centric': {
-      [INCLUDE]: ['textCentricTile'],
-    },
+      '.small': {
+        'shoutem.ui.View': {
+          '.content': {
+            '*': {
+              marginBottom: resolveVariable('smallGutter'),
+            },
 
-    heroAnimation(driver, { layout }) {
-      return {
-        opacity: driver.interpolate({
-          inputRange: [-0.2 * layout.height, 0, layout.height],
-          outputRange: [0, 1, 0],
-          useNativeDriver: true,
-        }),
-        transform: [
-          {
-            translateY: driver.interpolate({
-              inputRange: [-100, 100],
-              outputRange: [20, -20],
-              useNativeDriver: true,
-            }),
+            alignSelf: 'stretch',
+            paddingTop: resolveVariable('mediumGutter'),
+            paddingBottom: 0,
+            paddingHorizontal: 0,
+            marginBottom: -resolveVariable('smallGutter'),
           },
-        ],
-      };
-    },
+        },
 
-    flex: -1,
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    backgroundColor: variables.paperColor,
-  },
+        width: 145,
+      },
 
-  'shoutem.ui.Card': {
-    [INCLUDE]: ['commonVariants'],
+      '.text-centric': {
+        [INCLUDE]: ['textCentricTile'],
+      },
 
-    'shoutem.ui.View': {
-      '.content': {
-        'shoutem.ui.Subtitle': {
-          marginBottom: 10,
-        },
+      heroAnimation(driver, { layout }) {
+        return {
+          opacity: driver.interpolate({
+            inputRange: [-0.2 * layout.height, 0, layout.height],
+            outputRange: [0, 1, 0],
+            useNativeDriver: true,
+          }),
+          transform: [
+            {
+              translateY: driver.interpolate({
+                inputRange: [-100, 100],
+                outputRange: [20, -20],
+                useNativeDriver: true,
+              }),
+            },
+          ],
+        };
       },
 
-      flex: 1,
-      alignSelf: 'stretch',
-      padding: 10,
-      backgroundColor: variables.paperColor,
+      flex: -1,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      backgroundColor: resolveVariable('paperColor'),
     },
 
-    width: dimensionRelativeToIphone(180),
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-    backgroundColor: variables.paperColor,
-    borderRadius: 2,
-    shadowColor: variables.shadowColor,
-    shadowOpacity: 0.1,
-    shadowOffset: { width: 1, height: 1 },
+    'shoutem.ui.Card': {
+      [INCLUDE]: ['commonVariants'],
 
-    '.horizontal': {
       'shoutem.ui.View': {
-        '.pull-left': {
-          marginVertical: variables.mediumGutter,
-          marginLeft: -dimensionRelativeToIphone(72),
+        '.content': {
+          'shoutem.ui.Subtitle': {
+            marginBottom: 10,
+          },
         },
+
+        flex: 1,
+        alignSelf: 'stretch',
+        padding: 10,
+        backgroundColor: resolveVariable('paperColor'),
       },
 
-      // width needs to be reset so alignSelf stretch could be applied
-      width: null,
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-      margin: 10,
-      marginTop: variables.smallGutter,
-      marginBottom: variables.smallGutter,
-    },
-  },
+      width: dimensionRelativeToIphone(180),
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      backgroundColor: resolveVariable('paperColor'),
+      borderRadius: 2,
+      shadowColor: resolveVariable('shadowColor'),
+      shadowOpacity: 0.1,
+      shadowOffset: { width: 1, height: 1 },
+
+      '.horizontal': {
+        'shoutem.ui.View': {
+          '.pull-left': {
+            marginVertical: resolveVariable('mediumGutter'),
+            marginLeft: -dimensionRelativeToIphone(72),
+          },
+        },
 
-  'shoutem.ui.Overlay': {
-    [INCLUDE]: ['guttersPadding'],
+        // width needs to be reset so alignSelf stretch could be applied
+        width: null,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        margin: 10,
+        marginTop: resolveVariable('smallGutter'),
+        marginBottom: resolveVariable('smallGutter'),
+      },
+    },
 
-    ...createSharedStyle([...textComponents, 'shoutem.ui.Icon'], {
-      textAlign: 'center',
-      color: variables.tagOverlayTextColor,
-    }),
+    'shoutem.ui.Overlay': {
+      [INCLUDE]: ['guttersPadding'],
 
-    ...createSharedStyle(viewComponents, {
       ...createSharedStyle([...textComponents, 'shoutem.ui.Icon'], {
         textAlign: 'center',
-        color: variables.tagOverlayTextColor,
+        color: resolveVariable('tagOverlayTextColor'),
       }),
-    }),
 
-    '.image-overlay': {
-      ...createSharedStyle([...textComponents, 'shoutem.ui.Icon'], {
-        color: variables.imageOverlayTextColor,
+      ...createSharedStyle(viewComponents, {
+        ...createSharedStyle([...textComponents, 'shoutem.ui.Icon'], {
+          textAlign: 'center',
+          color: resolveVariable('tagOverlayTextColor'),
+        }),
       }),
 
-      backgroundColor: changeColorAlpha(variables.imageOverlayColor, 0.5),
-    },
+      '.image-overlay': {
+        ...createSharedStyle([...textComponents, 'shoutem.ui.Icon'], {
+          color: resolveVariable('imageOverlayTextColor'),
+        }),
 
-    '.rounded-small': {
-      width: 38,
-      height: 38,
-      borderRadius: 19,
-      padding: 0,
-    },
-
-    '.fill-parent': {
-      [INCLUDE]: ['fillParent'],
-    },
+        backgroundColor: changeColorAlpha(
+          resolveVariable('imageOverlayColor'),
+          0.5,
+        ),
+      },
 
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 2 * variables.smallGutter,
-    paddingBottom: 2 * variables.smallGutter,
-    paddingHorizontal: variables.mediumGutter,
-    backgroundColor: variables.tagOverlayColor,
-  },
+      '.rounded-small': {
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        padding: 0,
+      },
 
-  //
-  // Buttons
-  //
-  'shoutem.ui.TouchableOpacity': {
-    [INCLUDE]: [
-      'commonVariants',
-      'guttersPadding',
-      'horizontalFlexAlignment',
-      'verticalFlexAlignment',
-    ],
-
-    activeOpacity: 0.8,
-  },
+      '.fill-parent': {
+        [INCLUDE]: ['fillParent'],
+      },
 
-  'shoutem.ui.TouchableNativeFeedback': {
-    [INCLUDE]: ['commonVariants'],
-  },
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: 2 * resolveVariable('smallGutter'),
+      paddingBottom: 2 * resolveVariable('smallGutter'),
+      paddingHorizontal: resolveVariable('mediumGutter'),
+      backgroundColor: resolveVariable('tagOverlayColor'),
+    },
 
-  'shoutem.ui.Touchable': {},
+    //
+    // Buttons
+    //
+    'shoutem.ui.TouchableOpacity': {
+      [INCLUDE]: [
+        'commonVariants',
+        'guttersPadding',
+        'horizontalFlexAlignment',
+        'verticalFlexAlignment',
+      ],
 
-  tightButton: {
-    'shoutem.ui.Icon': {
-      marginRight: 0,
+      activeOpacity: 0.8,
     },
 
-    'shoutem.ui.Text': {
-      marginRight: 0,
+    'shoutem.ui.TouchableNativeFeedback': {
+      [INCLUDE]: ['commonVariants'],
     },
 
-    'shoutem.ui.View': {
-      '.badge': {
-        top: -4,
-        right: -4,
+    'shoutem.ui.Touchable': {},
+
+    tightButton: {
+      'shoutem.ui.Icon': {
+        marginRight: 0,
       },
-    },
 
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
+      'shoutem.ui.Text': {
+        marginRight: 0,
+      },
 
-  clearButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    borderRadius: 0,
-  },
+      'shoutem.ui.View': {
+        '.badge': {
+          top: -4,
+          right: -4,
+        },
+      },
 
-  textualButton: {
-    'shoutem.ui.Text': {
-      // Inherit color
-      ...variables.text,
-      fontFamily: resolveFontFamily(
-        variables.text.fontFamily,
-        variables.text.fontWeight,
-        variables.text.fontStyle,
-      ),
-      fontWeight: resolveFontWeight(variables.text.fontWeight),
-      fontStyle: resolveFontStyle(variables.text.fontStyle),
+      paddingLeft: 0,
+      paddingRight: 0,
     },
 
-    'shoutem.ui.Icon': {
-      color: variables.text.color,
+    clearButton: {
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      borderRadius: 0,
     },
-  },
 
-  'shoutem.ui.Button': {
-    [INCLUDE]: ['commonVariants', 'guttersMargin'],
+    textualButton: {
+      'shoutem.ui.Text': {
+        // Inherit color
+        ...resolveVariable('text'),
+        fontFamily: resolveFontFamily(
+          resolveVariable('text.fontFamily'),
+          resolveVariable('text.fontWeight'),
+          resolveVariable('text.fontStyle'),
+        ),
+        fontWeight: resolveFontWeight(resolveVariable('text.fontWeight')),
+        fontStyle: resolveFontStyle(resolveVariable('text.fontStyle')),
+      },
 
-    '.tight': {
-      [INCLUDE]: ['tightButton'],
+      'shoutem.ui.Icon': {
+        color: resolveVariable('text.color'),
+      },
     },
 
-    '.clear': {
-      [INCLUDE]: ['clearButton'],
-    },
+    'shoutem.ui.Button': {
+      [INCLUDE]: ['commonVariants', 'guttersMargin'],
 
-    '.textual': {
-      // Use default text as button text style
-      // Text like button, without background color and margins
-      [INCLUDE]: ['textualButton', 'clearButton', 'tightButton'],
-    },
+      '.tight': {
+        [INCLUDE]: ['tightButton'],
+      },
 
-    '.secondary': {
-      'shoutem.ui.Icon': {
-        color: variables.secondaryButtonTextColor,
+      '.clear': {
+        [INCLUDE]: ['clearButton'],
       },
 
-      'shoutem.ui.Text': {
-        color: variables.secondaryButtonTextColor,
+      '.textual': {
+        // Use default text as button text style
+        // Text like button, without background color and margins
+        [INCLUDE]: ['textualButton', 'clearButton', 'tightButton'],
       },
 
-      backgroundColor: variables.secondaryButtonBackgroundColor,
-      borderColor: variables.secondaryButtonBorderColor,
-    },
+      '.secondary': {
+        'shoutem.ui.Icon': {
+          color: resolveVariable('secondaryButtonTextColor'),
+        },
 
-    '.muted': {
-      'shoutem.ui.Icon': {
-        opacity: 0.5,
+        'shoutem.ui.Text': {
+          color: resolveVariable('secondaryButtonTextColor'),
+        },
+
+        backgroundColor: resolveVariable('secondaryButtonBackgroundColor'),
+        borderColor: resolveVariable('secondaryButtonBorderColor'),
       },
 
-      'shoutem.ui.Text': {
-        opacity: 0.5,
+      '.muted': {
+        'shoutem.ui.Icon': {
+          opacity: 0.5,
+        },
+
+        'shoutem.ui.Text': {
+          opacity: 0.5,
+        },
       },
-    },
 
-    // Buttons at the bottom of dialogs, widgets, etc.,
-    // usually Cancel/Confirm, No/Yes, etc.
-    '.confirmation': {
-      'shoutem.ui.Text': {
-        [INCLUDE]: ['boldTextStyle'],
+      // Buttons at the bottom of dialogs, widgets, etc.,
+      // usually Cancel/Confirm, No/Yes, etc.
+      '.confirmation': {
+        'shoutem.ui.Text': {
+          [INCLUDE]: ['boldTextStyle'],
+        },
+
+        // Medium gutter on both sides, 25 between buttons
+        flex: 1,
+        marginHorizontal: resolveVariable('mediumGutter'),
       },
 
-      // Medium gutter on both sides, 25 between buttons
-      flex: 1,
-      marginHorizontal: variables.mediumGutter,
-    },
+      '.full-width': {
+        'shoutem.ui.Icon': {
+          width: 16,
+          height: 16,
+        },
 
-    '.full-width': {
-      'shoutem.ui.Icon': {
-        width: 16,
-        height: 16,
+        flex: 1,
+        alignSelf: 'stretch',
+        borderRadius: 0,
+        borderWidth: 0,
+        height: 55,
       },
 
-      flex: 1,
-      alignSelf: 'stretch',
-      borderRadius: 0,
-      borderWidth: 0,
-      height: 55,
-    },
+      // Vertically stacked icon and text
+      '.stacked': {
+        'shoutem.ui.Icon': {
+          marginVertical: resolveVariable('mediumGutter'),
+          marginRight: 0,
+        },
 
-    // Vertically stacked icon and text
-    '.stacked': {
-      'shoutem.ui.Icon': {
-        marginVertical: variables.mediumGutter,
-        marginRight: 0,
+        'shoutem.ui.Text': {
+          [INCLUDE]: ['boldTextStyle'],
+          textAlign: 'center',
+          marginVertical: 0,
+          marginRight: 0,
+          fontFamily: 'Rubik-Medium',
+        },
+
+        width: dimensionRelativeToIphone(120),
+        height: 82,
+        flexDirection: 'column',
       },
 
       'shoutem.ui.Text': {
-        [INCLUDE]: ['boldTextStyle'],
-        textAlign: 'center',
-        marginVertical: 0,
-        marginRight: 0,
-        fontFamily: 'Rubik-Medium',
+        ...resolveVariable('primaryButtonText'),
+        fontFamily: resolveFontFamily(
+          resolveVariable('primaryButtonText.fontFamily'),
+          resolveVariable('primaryButtonText.fontWeight'),
+          resolveVariable('primaryButtonText.fontStyle'),
+        ),
+        fontWeight: resolveFontWeight(
+          resolveVariable('primaryButtonText.fontWeight'),
+        ),
+        fontStyle: resolveFontStyle(
+          resolveVariable('primaryButtonText.fontStyle'),
+        ),
+        letterSpacing: 1,
+        marginVertical: 12,
+        marginRight: 10,
       },
 
-      width: dimensionRelativeToIphone(120),
-      height: 82,
-      flexDirection: 'column',
-    },
+      'shoutem.ui.Icon': {
+        color: resolveVariable('primaryButtonText.color'),
+        width: 24,
+        height: 24,
+        marginRight: 10,
+      },
 
-    'shoutem.ui.Text': {
-      ...variables.primaryButtonText,
-      fontFamily: resolveFontFamily(
-        variables.primaryButtonText.fontFamily,
-        variables.primaryButtonText.fontWeight,
-        variables.primaryButtonText.fontStyle,
+      'shoutem.ui.View': {
+        // Positions badge to top right of button icon
+        '.badge': {
+          top: -4,
+          right: 11,
+        },
+      },
+
+      underlayColor: changeColorAlpha(
+        resolveVariable('primaryButtonBackgroundColor'),
+        0.5,
       ),
-      fontWeight: resolveFontWeight(variables.primaryButtonText.fontWeight),
-      fontStyle: resolveFontStyle(variables.primaryButtonText.fontStyle),
-      letterSpacing: 1,
-      marginVertical: 12,
-      marginRight: 10,
-    },
 
-    'shoutem.ui.Icon': {
-      color: variables.primaryButtonText.color,
-      width: 24,
-      height: 24,
-      marginRight: 10,
+      backgroundColor: resolveVariable('primaryButtonBackgroundColor'),
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 2,
+      borderWidth: 1,
+      borderColor: resolveVariable('primaryButtonBorderColor'),
+      paddingLeft: resolveVariable('mediumGutter'),
+      paddingRight: resolveVariable('smallGutter'),
     },
 
-    'shoutem.ui.View': {
-      // Positions badge to top right of button icon
-      '.badge': {
-        top: -4,
-        right: 11,
+    //
+    // Media
+    //
+    'shoutem.ui.Icon': {
+      '.indicator': {
+        [INCLUDE]: ['indicator'],
       },
-    },
-
-    underlayColor: changeColorAlpha(
-      variables.primaryButtonBackgroundColor,
-      0.5,
-    ),
 
-    backgroundColor: variables.primaryButtonBackgroundColor,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 2,
-    borderWidth: 1,
-    borderColor: variables.primaryButtonBorderColor,
-    paddingLeft: variables.mediumGutter,
-    paddingRight: variables.smallGutter,
-  },
+      '.scroll-indicator': {
+        [INCLUDE]: ['indicator'],
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: resolveVariable('mediumGutter'),
+      },
 
-  //
-  // Media
-  //
-  'shoutem.ui.Icon': {
-    '.indicator': {
-      [INCLUDE]: ['indicator'],
+      backgroundColor: 'transparent',
+      color: resolveVariable('primaryButtonText.color'),
+      width: 24,
+      height: 24,
     },
 
-    '.scroll-indicator': {
-      [INCLUDE]: ['indicator'],
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: variables.mediumGutter,
+    'shoutem.ui.Spinner': {
+      [INCLUDE]: ['guttersMargin'],
+      color: changeColorAlpha(resolveVariable('text.color'), 0.5),
     },
 
-    backgroundColor: 'transparent',
-    color: variables.primaryButtonText.color,
-    width: 24,
-    height: 24,
-  },
+    'shoutem.ui.EmptyListImage': {
+      image: {
+        resizeMode: 'contain',
+        marginTop: 45,
+        marginBottom: 30,
+      },
+      title: {
+        maxWidth: 250,
+        marginBottom: 20,
+        textAlign: 'center',
+      },
+      message: {
+        textAlign: 'center',
+        maxWidth: 250,
+      },
+    },
 
-  'shoutem.ui.Spinner': {
-    [INCLUDE]: ['guttersMargin'],
-    color: changeColorAlpha(variables.text.color, 0.5),
-  },
+    //
+    // Collections
+    //
+    'shoutem.ui.ListView': {
+      'shoutem.ui.Divider': {
+        [INCLUDE]: ['sectionHeaderDivider'],
 
-  'shoutem.ui.EmptyListImage': {
-    image: {
-      resizeMode: 'contain',
-      marginTop: 45,
-      marginBottom: 30,
-    },
-    title: {
-      maxWidth: 250,
-      marginBottom: 20,
-      textAlign: 'center',
-    },
-    message: {
-      textAlign: 'center',
-      maxWidth: 250,
-    },
-  },
+        borderTopWidth: 0,
+      },
 
-  //
-  // Collections
-  //
-  'shoutem.ui.ListView': {
-    'shoutem.ui.Divider': {
-      [INCLUDE]: ['sectionHeaderDivider'],
+      listContent: {
+        paddingBottom: 0,
+        backgroundColor: resolveVariable('backgroundColor'),
+      },
 
-      borderTopWidth: 0,
-    },
+      refreshControl: {
+        tintColor: changeColorAlpha(resolveVariable('text.color'), 0.5),
+      },
 
-    listContent: {
-      paddingBottom: 0,
-      backgroundColor: variables.backgroundColor,
+      loadMoreSpinner: {
+        paddingVertical: 25,
+      },
     },
 
-    refreshControl: {
-      tintColor: changeColorAlpha(variables.text.color, 0.5),
-    },
+    'shoutem.ui.GridRow': {
+      '*': {
+        flex: 1,
+        alignSelf: 'stretch',
+        marginLeft: resolveVariable('smallGutter'),
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: 0,
+      },
 
-    loadMoreSpinner: {
-      paddingVertical: 25,
-    },
-  },
+      '.no-padding': {
+        padding: 0,
+      },
 
-  'shoutem.ui.GridRow': {
-    '*': {
       flex: 1,
-      alignSelf: 'stretch',
-      marginLeft: variables.smallGutter,
-      marginRight: 0,
-      marginTop: 0,
-      marginBottom: 0,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingRight: resolveVariable('smallGutter'),
+      paddingTop: resolveVariable('smallGutter'),
     },
 
-    '.no-padding': {
-      padding: 0,
-    },
+    //
+    // Other
+    //
+    // Deprecated on ShoutEm platform ( not used for navigationBar elements )
+    navigationBar: {
+      '.featured': {
+        'shoutem.ui.Button': {
+          'shoutem.ui.Icon': {
+            color: resolveVariable('featuredNavBarIconsColor'),
+          },
+          'shoutem.ui.Text': {
+            color: resolveVariable('featuredNavBarIconsColor'),
+          },
 
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    paddingRight: variables.smallGutter,
-    paddingTop: variables.smallGutter,
-  },
+          'shoutem.ui.View': {
+            '.badge': {
+              backgroundColor: resolveVariable('featuredNavBarIconsColor'),
+              borderColor: resolveVariable('featuredColor'),
 
-  //
-  // Other
-  //
-  navigationBar: {
-    '.featured': {
-      'shoutem.ui.Button': {
-        'shoutem.ui.Icon': {
-          color: variables.featuredNavBarIconsColor,
-        },
-        'shoutem.ui.Text': {
-          color: variables.featuredNavBarIconsColor,
+              'shoutem.ui.Text': {
+                color: resolveVariable('featuredColor'),
+              },
+            },
+          },
         },
 
-        'shoutem.ui.View': {
-          '.badge': {
-            backgroundColor: variables.featuredNavBarIconsColor,
-            borderColor: variables.featuredColor,
-
+        'shoutem.ui.DropDownMenu': {
+          selectedOption: {
+            'shoutem.ui.Icon': {
+              color: resolveVariable('featuredNavBarIconsColor'),
+            },
             'shoutem.ui.Text': {
-              color: variables.featuredColor,
+              color: resolveVariable('featuredNavBarIconsColor'),
             },
           },
         },
-      },
 
-      'shoutem.ui.DropDownMenu': {
-        selectedOption: {
-          'shoutem.ui.Icon': {
-            color: variables.featuredNavBarIconsColor,
-          },
-          'shoutem.ui.Text': {
-            color: variables.featuredNavBarIconsColor,
+        ...createSharedStyle(
+          ['shoutem.ui.Title', 'shoutem.ui.Icon', 'shoutem.ui.Text'],
+          {
+            fontFamily: resolveFontFamily(
+              resolveVariable('title.fontFamily'),
+              resolveVariable('title.fontWeight'),
+              resolveVariable('title.fontStyle'),
+            ),
+            fontWeight: resolveFontWeight(resolveVariable('title.fontWeight')),
+            fontStyle: resolveFontStyle(resolveVariable('title.fontStyle')),
+            color: resolveVariable('featuredNavBarTitleColor'),
           },
-        },
-      },
+        ),
 
-      ...createSharedStyle(
-        ['shoutem.ui.Title', 'shoutem.ui.Icon', 'shoutem.ui.Text'],
-        {
-          fontFamily: resolveFontFamily(
-            variables.title.fontFamily,
-            variables.title.fontWeight,
-            variables.title.fontStyle,
-          ),
-          fontWeight: resolveFontWeight(variables.title.fontWeight),
-          fontStyle: resolveFontStyle(variables.title.fontStyle),
-          color: variables.featuredNavBarTitleColor,
+        container: {
+          [INCLUDE]: ['featuredBackground'],
+          borderBottomWidth: 0,
         },
-      ),
+      },
 
-      container: {
-        [INCLUDE]: ['featuredBackground'],
-        borderBottomWidth: 0,
+      'shoutem.ui.Icon': {
+        color: resolveVariable('navBarIconsColor'),
+        width: 24,
+        height: 24,
+        paddingHorizontal: 9,
       },
-    },
 
-    'shoutem.ui.Icon': {
-      color: variables.navBarIconsColor,
-      width: 24,
-      height: 24,
-      paddingHorizontal: 9,
-    },
+      'shoutem.ui.Text': {
+        ...resolveVariable('navBarText'),
+        fontFamily: resolveFontFamily(
+          resolveVariable('navBarText.fontFamily'),
+          resolveVariable('navBarText.fontWeight'),
+          resolveVariable('navBarText.fontStyle'),
+        ),
+        fontWeight: resolveFontWeight(resolveVariable('navBarText.fontWeight')),
+        fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
+        paddingHorizontal: 9,
+      },
 
-    'shoutem.ui.Text': {
-      ...variables.navBarText,
-      fontFamily: resolveFontFamily(
-        variables.navBarText.fontFamily,
-        variables.navBarText.fontWeight,
-        variables.navBarText.fontStyle,
-      ),
-      fontWeight: resolveFontWeight(variables.navBarText.fontWeight),
-      fontStyle: resolveFontStyle(variables.navBarText.fontStyle),
-      paddingHorizontal: 9,
-    },
+      'shoutem.ui.ShareButton': {
+        '.clear': {
+          'shoutem.ui.Button': {
+            [INCLUDE]: ['clearButton'],
+          },
+        },
+      },
 
-    'shoutem.ui.ShareButton': {
-      '.clear': {
-        'shoutem.ui.Button': {
-          [INCLUDE]: ['clearButton'],
+      'shoutem.ui.Button': {
+        [INCLUDE]: ['clearButton', 'tightButton'],
+        'shoutem.ui.Icon': {
+          color: resolveVariable('navBarIconsColor'),
+          marginVertical: 9,
+        },
+        'shoutem.ui.Text': {
+          ...resolveVariable('navBarText'),
+          fontFamily: resolveFontFamily(
+            resolveVariable('navBarText.fontFamily'),
+            'normal',
+            resolveVariable('navBarText.fontStyle'),
+          ),
+          fontWeight: resolveFontWeight('normal'),
+          fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
+          color: resolveVariable('navBarIconsColor'),
+          letterSpacing: 0,
+        },
+        'shoutem.ui.View': {
+          '.badge': {
+            top: 5,
+            right: 5,
+          },
         },
+        paddingHorizontal: 9,
       },
     },
 
-    'shoutem.ui.Button': {
-      [INCLUDE]: ['clearButton', 'tightButton'],
-      'shoutem.ui.Icon': {
-        color: variables.navBarIconsColor,
-        marginVertical: 9,
-      },
-      'shoutem.ui.Text': {
-        ...variables.navBarText,
+    'shoutem.ui.NavigationBar': {
+      title: {
+        color: resolveVariable('navBarText.color'),
+        lineHeight: calculateLineHeight(resolveVariable('navBarText.fontSize')),
+        ...resolveVariable('navBarText'),
         fontFamily: resolveFontFamily(
-          variables.navBarText.fontFamily,
-          'normal',
-          variables.navBarText.fontStyle,
+          resolveVariable('navBarText.fontFamily'),
+          resolveVariable('navBarText.fontWeight'),
+          resolveVariable('navBarText.fontStyle'),
         ),
-        fontWeight: resolveFontWeight('normal'),
-        fontStyle: resolveFontStyle(variables.navBarText.fontStyle),
-        color: variables.navBarIconsColor,
-        letterSpacing: 0,
-      },
-      'shoutem.ui.View': {
-        '.badge': {
-          top: 5,
-          right: 5,
-        },
-      },
-      paddingHorizontal: 9,
-    },
-  },
-
-  'shoutem.ui.NavigationBar': {
-    title: {
-      color: variables.navBarText.color,
-      lineHeight: calculateLineHeight(variables.navBarText.fontSize),
-      ...variables.navBarText,
-      fontFamily: resolveFontFamily(
-        variables.navBarText.fontFamily,
-        variables.navBarText.fontWeight,
-        variables.navBarText.fontStyle,
-      ),
-      fontWeight: resolveFontWeight(variables.navBarText.fontWeight),
-      fontStyle: resolveFontStyle(variables.navBarText.fontStyle),
-    },
-    icon: {
-      color: variables.navBarIconsColor,
-    },
-    statusBar: {
-      backgroundColor: variables.statusBarColor,
-      statusBarStyle: variables.statusBarStyle,
-    },
-    container: {
-      backgroundColor: variables.navBarBackground,
-      borderBottomColor: variables.navBarBorderColor,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-    leftContainer: {
-      paddingLeft: variables.mediumGutter,
-    },
-    rightContainer: {
-      paddingRight: variables.mediumGutter,
-    },
-
-    '.clear': {
-      container: {
-        backgroundColor: 'transparent',
-        borderBottomColor: 'transparent',
-      },
-    },
-
-    '.featured': {
-      title: {
-        color: variables.featuredNavBarTitleColor,
+        fontWeight: resolveFontWeight(resolveVariable('navBarText.fontWeight')),
+        fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
       },
       icon: {
-        color: variables.featuredNavBarIconsColor,
+        color: resolveVariable('navBarIconsColor'),
       },
-
-      container: {
-        backgroundColor: variables.featuredColor,
-        borderBottomWidth: 0,
-        shadowOpacity: 0,
+      statusBar: {
+        backgroundColor: resolveVariable('statusBarColor'),
+        statusBarStyle: resolveVariable('statusBarStyle'),
       },
-    },
-
-    '.no-border': {
       container: {
-        borderBottomWidth: 0,
-        shadowOpacity: 0,
+        backgroundColor: resolveVariable('navBarBackground'),
+        borderBottomColor: resolveVariable('navBarBorderColor'),
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+      leftContainer: {
+        paddingLeft: resolveVariable('mediumGutter'),
+      },
+      rightContainer: {
+        paddingRight: resolveVariable('mediumGutter'),
       },
-    },
 
-    boxingAnimation(driver) {
-      return {
+      '.clear': {
         container: {
-          borderBottomColor: driver.interpolate({
-            // Animate to approx title top offset
-            inputRange: [0, 45],
-            outputRange: ['transparent', variables.navBarBorderColor],
-            extrapolate: 'clamp',
-          }),
-          borderBottomWidth: 1,
+          backgroundColor: 'transparent',
+          borderBottomColor: 'transparent',
         },
+      },
+
+      '.featured': {
         title: {
-          opacity: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: [0, 1],
-            extrapolate: 'clamp',
-          }),
+          color: resolveVariable('featuredNavBarTitleColor'),
         },
-      };
-    },
-
-    solidifyAnimation(driver) {
-      return {
         icon: {
-          opacity: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: [0, 1],
-            extrapolate: 'clamp',
-          }),
-        },
-        title: {
-          color: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: ['transparent', variables.navBarText.color],
-            extrapolate: 'clamp',
-          }),
+          color: resolveVariable('featuredNavBarIconsColor'),
         },
+
         container: {
-          backgroundColor: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: ['transparent', variables.navBarBackground],
-            extrapolate: 'clamp',
-          }),
-          borderBottomColor: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: ['transparent', variables.navBarBorderColor],
-            extrapolate: 'clamp',
-          }),
-          opacity: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: [0, 1],
-            extrapolate: 'clamp',
-          }),
+          backgroundColor: resolveVariable('featuredColor'),
+          borderBottomWidth: 0,
+          shadowOpacity: 0,
         },
-      };
-    },
+      },
 
-    fadeAnimation(driver) {
-      return {
+      '.no-border': {
         container: {
-          gradient: {
-            colors: ['transparent', 'rgba(0, 0, 0, 0.5)', 'transparent'],
-            locations: [0.0, 0.25, 1.0],
+          borderBottomWidth: 0,
+          shadowOpacity: 0,
+        },
+      },
+
+      boxingAnimation(driver) {
+        return {
+          container: {
+            borderBottomColor: driver.interpolate({
+              // Animate to approx title top offset
+              inputRange: [0, 45],
+              outputRange: [
+                'transparent',
+                resolveVariable('navBarBorderColor'),
+              ],
+              extrapolate: 'clamp',
+            }),
+            borderBottomWidth: 1,
+          },
+          title: {
             opacity: driver.interpolate({
               inputRange: [250, 300],
-              outputRange: [1, 0],
+              outputRange: [0, 1],
+              extrapolate: 'clamp',
             }),
           },
-        },
-      };
-    },
-  },
-  'shoutem.ui.navigation.NavigationBar': {
-    [INCLUDE]: ['navigationBar'],
+        };
+      },
 
-    '.fade': {
-      // Clear navigation bar is currently disabled on Android
-      // due to overflow issues.
-      gradient: {
-        [INCLUDE]: ['fillParent'],
-        colors: ['transparent', 'rgba(0, 0, 0, 0.15)', 'transparent'],
-        locations: [0.0, 0.25, 1.0],
-        solidifyAnimation(driver) {
-          return {
+      solidifyAnimation(driver) {
+        return {
+          icon: {
             opacity: driver.interpolate({
               inputRange: [250, 300],
-              outputRange: [1, 0],
+              outputRange: [0, 1],
+              extrapolate: 'clamp',
             }),
-          };
-        },
+          },
+          title: {
+            color: driver.interpolate({
+              inputRange: [250, 300],
+              outputRange: ['transparent', resolveVariable('navBarText.color')],
+              extrapolate: 'clamp',
+            }),
+          },
+          container: {
+            backgroundColor: driver.interpolate({
+              inputRange: [250, 300],
+              outputRange: ['transparent', resolveVariable('navBarBackground')],
+              extrapolate: 'clamp',
+            }),
+            borderBottomColor: driver.interpolate({
+              inputRange: [250, 300],
+              outputRange: [
+                'transparent',
+                resolveVariable('navBarBorderColor'),
+              ],
+              extrapolate: 'clamp',
+            }),
+            opacity: driver.interpolate({
+              inputRange: [250, 300],
+              outputRange: [0, 1],
+              extrapolate: 'clamp',
+            }),
+          },
+        };
       },
-    },
 
-    container: {
-      paddingTop: NAVIGATION_BAR_HEIGHT,
-      backgroundColor: variables.navBarBackground,
-      borderBottomColor: variables.navBarBorderColor,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-    navigationHeader: {
-      position: 'absolute',
-      top: Device.select({
-        iPhoneX: 6,
-        iPhoneXR: 8,
-        default: Platform.OS === 'android' ? 0 : -4,
-      }),
-      left: 0,
-      right: 0,
-      height: NAVIGATION_BAR_HEIGHT,
-    },
-    statusBar: {
-      backgroundColor: variables.statusBarColor,
-      statusBarStyle: variables.statusBarStyle,
-      height: StatusBar.currentHeight,
-    },
-    screenBackground: variables.backgroundColor,
-    navigationBarImage: {
-      marginTop: Device.select({
-        iPhoneX: IPHONE_X_NOTCH_PADDING,
-        iPhoneXR: IPHONE_XR_NOTCH_PADDING,
-        notchedAndroid: StatusBar.currentHeight,
-        default: 0,
-      }),
-      flex: 1,
-      flexGrow: 1,
-      height: NAVIGATION_HEADER_HEIGHT,
-      left: 0,
-      solidifyAnimation(driver) {
+      fadeAnimation(driver) {
         return {
-          opacity: driver.interpolate({
-            inputRange: [250, 300],
-            outputRange: [0, 1],
-            extrapolate: 'clamp',
-          }),
+          container: {
+            gradient: {
+              colors: ['transparent', 'rgba(0, 0, 0, 0.5)', 'transparent'],
+              locations: [0.0, 0.25, 1.0],
+              opacity: driver.interpolate({
+                inputRange: [250, 300],
+                outputRange: [1, 0],
+              }),
+            },
+          },
         };
       },
-      boxingAnimation() {
-        return {};
-      },
-      position: 'absolute',
-      right: 0,
-      top: 0,
-      width: window.width,
     },
-  },
 
-  sectionHeaderDivider: {
-    'shoutem.ui.Caption': {
-      marginTop: -1,
-      marginBottom: variables.smallGutter,
-      marginHorizontal: variables.mediumGutter,
-    },
+    // Deprecated on ShoutEm platform ( not used for navigationBar elements )
+    'shoutem.ui.navigation.NavigationBar': {
+      [INCLUDE]: ['navigationBar'],
 
-    paddingTop: 23,
-    backgroundColor: variables.sectionHeaderBackgroundColor,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderColor: variables.lineColor,
-  },
-  'shoutem.ui.Divider': {
-    [INCLUDE]: ['guttersMargin'],
+      '.fade': {
+        // Clear navigation bar is currently disabled on Android
+        // due to overflow issues.
+        gradient: {
+          [INCLUDE]: ['fillParent'],
+          colors: ['transparent', 'rgba(0, 0, 0, 0.15)', 'transparent'],
+          locations: [0.0, 0.25, 1.0],
+          solidifyAnimation(driver) {
+            return {
+              opacity: driver.interpolate({
+                inputRange: [250, 300],
+                outputRange: [1, 0],
+              }),
+            };
+          },
+        },
+      },
 
-    '.line': {
-      '.small': {
-        width: 55,
+      container: {
+        paddingTop: NAVIGATION_BAR_HEIGHT,
+        backgroundColor: resolveVariable('navBarBackground'),
+        borderBottomColor: resolveVariable('navBarBorderColor'),
+        borderBottomWidth: StyleSheet.hairlineWidth,
       },
-      '.center': {
-        alignSelf: 'center',
+      navigationHeader: {
+        position: 'absolute',
+        top: Device.select({
+          iPhoneX: 6,
+          iPhoneXR: 8,
+          default: Platform.OS === 'android' ? 0 : -4,
+        }),
+        left: 0,
+        right: 0,
+        height: NAVIGATION_BAR_HEIGHT,
+      },
+      statusBar: {
+        backgroundColor: resolveVariable('statusBarColor'),
+        statusBarStyle: resolveVariable('statusBarStyle'),
+        height: Device.select({
+          iPhoneX: IPHONE_X_NOTCH_PADDING,
+          iPhoneXR: IPHONE_XR_NOTCH_PADDING,
+          default: 0,
+        }),
+      },
+      screenBackground: resolveVariable('backgroundColor'),
+      navigationBarImage: {
+        marginTop: Device.select({
+          iPhoneX: IPHONE_X_NOTCH_PADDING,
+          iPhoneXR: IPHONE_XR_NOTCH_PADDING,
+          default: 0,
+        }),
+        flex: 1,
+        flexGrow: 1,
+        height: NAVIGATION_HEADER_HEIGHT,
+        left: 0,
+        solidifyAnimation(driver) {
+          return {
+            opacity: driver.interpolate({
+              inputRange: [250, 300],
+              outputRange: [0, 1],
+              extrapolate: 'clamp',
+            }),
+          };
+        },
+        boxingAnimation() {
+          return {};
+        },
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: window.width,
       },
-      paddingTop: 0,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderColor: variables.lineColor,
     },
 
-    '.section-header': {
-      [INCLUDE]: ['sectionHeaderDivider'],
-    },
+    sectionHeaderDivider: {
+      'shoutem.ui.Caption': {
+        marginTop: -1,
+        marginBottom: resolveVariable('smallGutter'),
+        marginHorizontal: resolveVariable('mediumGutter'),
+      },
 
-    alignSelf: 'stretch',
-    paddingTop: 25,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
+      paddingTop: 23,
+      backgroundColor: resolveVariable(
+        'shoutem.cms',
+        'sectionHeaderBackgroundColor',
+      ),
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderColor: resolveVariable('lineColor'),
+    },
+    'shoutem.ui.Divider': {
+      [INCLUDE]: ['guttersMargin'],
 
-  //
-  // Form components
-  //
-  'shoutem.ui.FormGroup': {
-    'shoutem.ui.View': {
-      'shoutem.ui.Caption': {
-        backgroundColor: variables.paperColor,
-        paddingHorizontal: variables.mediumGutter,
-        color: changeColorAlpha(variables.caption.color, 0.5),
-        paddingTop: 10,
+      '.line': {
+        '.small': {
+          width: 55,
+        },
+        '.center': {
+          alignSelf: 'center',
+        },
+        paddingTop: 0,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderColor: resolveVariable('lineColor'),
       },
 
-      'shoutem.ui.TextInput': {
-        height: 39,
-        paddingVertical: 9,
+      '.section-header': {
+        [INCLUDE]: ['sectionHeaderDivider'],
       },
 
-      'shoutem.ui.DropDownMenu': {
-        horizontalContainer: {
-          alignItems: 'flex-start',
-          backgroundColor: variables.paperColor,
+      alignSelf: 'stretch',
+      paddingTop: 25,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+
+    //
+    // Form components
+    //
+    'shoutem.ui.FormGroup': {
+      'shoutem.ui.View': {
+        'shoutem.ui.Caption': {
+          backgroundColor: resolveVariable('paperColor'),
+          paddingHorizontal: resolveVariable('mediumGutter'),
+          color: changeColorAlpha(resolveVariable('caption.color'), 0.5),
+          paddingTop: 10,
+        },
+
+        'shoutem.ui.TextInput': {
           height: 39,
-          paddingHorizontal: variables.mediumGutter,
           paddingVertical: 9,
         },
 
-        selectedOption: {
-          'shoutem.ui.Icon': {
-            color: variables.paperColor,
-          },
-
-          'shoutem.ui.Text': {
-            margin: 0,
+        'shoutem.ui.DropDownMenu': {
+          horizontalContainer: {
+            alignItems: 'flex-start',
+            backgroundColor: resolveVariable('paperColor'),
+            height: 39,
+            paddingHorizontal: resolveVariable('mediumGutter'),
+            paddingVertical: 9,
           },
 
-          flex: 1,
-          alignSelf: 'stretch',
-          justifyContent: 'flex-start',
-          padding: 0,
-        },
-
-        '.empty': {
           selectedOption: {
+            'shoutem.ui.Icon': {
+              color: resolveVariable('paperColor'),
+            },
+
             'shoutem.ui.Text': {
-              color: changeColorAlpha(variables.text.color, 0.5),
+              margin: 0,
+            },
+
+            flex: 1,
+            alignSelf: 'stretch',
+            justifyContent: 'flex-start',
+            padding: 0,
+          },
+
+          '.empty': {
+            selectedOption: {
+              'shoutem.ui.Text': {
+                color: changeColorAlpha(resolveVariable('text.color'), 0.5),
+              },
             },
           },
         },
       },
     },
-  },
 
-  'shoutem.ui.TextInput': {
-    [INCLUDE]: ['commonVariants', 'guttersMargin'],
+    'shoutem.ui.TextInput': {
+      [INCLUDE]: ['commonVariants', 'guttersMargin'],
 
-    selectionColor: variables.text.color,
-    placeholderTextColor: changeColorAlpha(variables.text.color, 0.5),
-    backgroundColor: variables.paperColor,
-    borderColor: variables.text.color,
-    height: 55,
-    paddingHorizontal: variables.mediumGutter,
-    paddingVertical: 18,
-    underlineColorAndroid: 'transparent',
-    ...variables.text,
-    fontFamily: resolveFontFamily(
-      variables.text.fontFamily,
-      variables.text.fontWeight,
-      variables.text.fontStyle,
-    ),
-    fontWeight: resolveFontWeight(variables.text.fontWeight),
-    fontStyle: resolveFontStyle(variables.text.fontStyle),
+      selectionColor: resolveVariable('text.color'),
+      placeholderTextColor: changeColorAlpha(
+        resolveVariable('text.color'),
+        0.5,
+      ),
+      backgroundColor: resolveVariable('paperColor'),
+      borderColor: resolveVariable('text.color'),
+      height: 55,
+      paddingHorizontal: resolveVariable('mediumGutter'),
+      paddingVertical: 18,
+      underlineColorAndroid: 'transparent',
+      ...resolveVariable('text'),
+      fontFamily: resolveFontFamily(
+        resolveVariable('text.fontFamily'),
+        resolveVariable('text.fontWeight'),
+        resolveVariable('text.fontStyle'),
+      ),
+      fontWeight: resolveFontWeight(resolveVariable('text.fontWeight')),
+      fontStyle: resolveFontStyle(resolveVariable('text.fontStyle')),
 
-    errorBorderColor: {
-      borderColor: variables.errorText.color,
-    },
+      errorBorderColor: {
+        borderColor: resolveVariable('errorText.color'),
+      },
 
-    wiggleAnimation: {
-      interpolateConfig: {
-        inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
-        outputRange: [0, -5, 0, 5, 0, -5, 0],
+      wiggleAnimation: {
+        interpolateConfig: {
+          inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
+          outputRange: [0, -5, 0, 5, 0, -5, 0],
+        },
+        timingConfig: {
+          duration: 400,
+        },
+        paddingHorizontal: 5,
       },
-      timingConfig: {
-        duration: 400,
+
+      withBorder: {
+        borderWidth: 1,
       },
-      paddingHorizontal: 5,
-    },
 
-    withBorder: {
-      borderWidth: 1,
-    },
+      withoutBorder: {
+        borderWidth: 0,
+      },
 
-    withoutBorder: {
-      borderWidth: 0,
+      '.small': {
+        paddingVertical: 6,
+        height: 42,
+      },
     },
 
-    '.small': {
-      paddingVertical: 6,
-      height: 42,
-    },
-  },
+    'shoutem.ui.NumberInput': {
+      button: {
+        borderWidth: 0,
+        height: 40,
+        width: 40,
+        padding: 8,
+      },
 
-  'shoutem.ui.NumberInput': {
-    button: {
-      borderWidth: 0,
-      height: 40,
-      width: 40,
-      padding: 8,
-    },
+      icon: {
+        marginRight: 0,
+      },
 
-    icon: {
-      marginRight: 0,
-    },
+      inputContainer: {
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.2)',
+        borderTopWidth: 1,
+      },
 
-    inputContainer: {
-      borderBottomWidth: 1,
-      borderColor: 'rgba(0, 0, 0, 0.2)',
-      borderTopWidth: 1,
+      input: {
+        height: 38,
+        paddingVertical: 10,
+        textAlign: 'center',
+        width: 94,
+      },
     },
 
-    input: {
-      height: 38,
-      paddingVertical: 10,
-      textAlign: 'center',
-      width: 94,
-    },
-  },
+    // TODO: Search is defined with fixed colors at the moment but we will revisit it soon
+    'shoutem.ui.SearchField': {
+      clearButton: {
+        position: 'absolute',
+        right: 5,
+        top: 3,
+      },
 
-  // TODO: Search is defined with fixed colors at the moment but we will revisit it soon
-  'shoutem.ui.SearchField': {
-    clearButton: {
-      position: 'absolute',
-      right: 5,
-      top: 3,
-    },
+      clearIcon: {
+        color: '#2c2c2c',
+        opacity: 0.5,
+      },
 
-    clearIcon: {
-      color: '#2c2c2c',
-      opacity: 0.5,
-    },
+      container: {
+        backgroundColor: '#f0f0f0',
+        borderRadius: 5,
+        flex: 1,
+        height: 30,
+      },
 
-    container: {
-      backgroundColor: '#f0f0f0',
-      borderRadius: 5,
-      flex: 1,
-      height: 30,
-    },
+      searchIcon: {
+        color: '#888888',
+        width: 16,
+        height: 16,
+      },
 
-    searchIcon: {
-      color: '#888888',
-      width: 16,
-      height: 16,
+      input: {
+        backgroundColor: '#f0f0f0',
+        color: '#888888',
+        minWidth: 230,
+        fontSize: 15,
+        height: 30,
+        paddingVertical: 6,
+        placeholderTextColor: '#888888',
+        selectionColor: '#888888',
+      },
     },
 
-    input: {
-      backgroundColor: '#f0f0f0',
-      color: '#888888',
-      minWidth: 230,
-      fontSize: 15,
-      height: 30,
-      paddingVertical: 6,
-      placeholderTextColor: '#888888',
-      selectionColor: '#888888',
-    },
-  },
+    'shoutem.ui.Switch': {
+      container: {
+        borderRadius: 15,
+        height: 18,
+        marginVertical: 7,
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        width: 32,
+
+        muteAnimation(driver) {
+          return {
+            backgroundColor: driver.interpolate({
+              inputRange: [0, 1],
+              outputRange: [
+                inverseColorBrightnessForAmount(
+                  resolveVariable('paperColor'),
+                  15,
+                ),
+                changeColorAlpha(
+                  resolveVariable('secondaryButtonBackgroundColor'),
+                  1,
+                ),
+              ],
+            }),
+          };
+        },
+      },
 
-  'shoutem.ui.Switch': {
-    container: {
-      borderRadius: 15,
-      height: 18,
-      marginVertical: 7,
-      paddingHorizontal: 2,
-      paddingVertical: 2,
-      width: 32,
+      thumb: {
+        backgroundColor: resolveVariable('paperColor'),
+        borderRadius: 7,
+        height: 14,
+        width: 14,
 
-      muteAnimation(driver) {
-        return {
-          backgroundColor: driver.interpolate({
-            inputRange: [0, 1],
-            outputRange: [
-              inverseColorBrightnessForAmount(variables.paperColor, 15),
-              changeColorAlpha(variables.secondaryButtonBackgroundColor, 1),
+        turnAnimation(driver, { layout, animationOptions }) {
+          const { x, width } = layout;
+          return {
+            transform: [
+              {
+                translateX: driver.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [
+                    0,
+                    animationOptions.containerWidth - width - 2 * x,
+                  ],
+                }),
+              },
             ],
-          }),
-        };
+          };
+        },
       },
     },
 
-    thumb: {
-      backgroundColor: variables.paperColor,
-      borderRadius: 7,
-      height: 14,
-      width: 14,
-
-      turnAnimation(driver, { layout, animationOptions }) {
-        const { x, width } = layout;
-        return {
-          transform: [
-            {
-              translateX: driver.interpolate({
-                inputRange: [0, 1],
-                outputRange: [
-                  0,
-                  animationOptions.containerWidth - width - 2 * x,
-                ],
-              }),
-            },
-          ],
-        };
-      },
-    },
-  },
-
-  'shoutem.ui.DropDownMenu': {
-    '.horizontal': {
-      horizontalContainer: {
-        minHeight: 40,
-        maxHeight: 200,
-        justifyContent: 'center',
-        backgroundColor:
-          variables.categoryDropdownBackgroundColor ||
-          inverseColorBrightnessForAmount(variables.paperColor, 5),
-        width: window.width,
-        marginTop: 0,
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderColor: variables.navBarBorderColor,
-      },
-      selectedOption: {
-        'shoutem.ui.Icon': {
-          color: variables.categoryDropdownTextColor || variables.text.color,
-        },
-        'shoutem.ui.Text': {
-          ...variables.navBarText,
-          fontFamily: resolveFontFamily(
-            variables.navBarText.fontFamily,
-            'normal',
-            variables.navBarText.fontStyle,
-          ),
-          color: variables.categoryDropdownTextColor || variables.text.color,
-          fontWeight: resolveFontWeight('normal'),
-          fontStyle: resolveFontStyle(variables.navBarText.fontStyle),
-          textAlign: 'center',
-        },
-      },
-    },
-
-    '.featured': {
+    'shoutem.ui.DropDownMenu': {
       '.horizontal': {
         horizontalContainer: {
-          [INCLUDE]: ['dimmedFeaturedBackground'],
-          borderBottomWidth: 0,
+          minHeight: 40,
+          maxHeight: 200,
+          justifyContent: 'center',
+          backgroundColor:
+            resolveVariable('categoryDropdownBackgroundColor') ||
+            inverseColorBrightnessForAmount(resolveVariable('paperColor'), 5),
+          width: window.width,
+          marginTop: 0,
+          borderBottomWidth: StyleSheet.hairlineWidth,
+          borderColor: resolveVariable('navBarBorderColor'),
         },
         selectedOption: {
           'shoutem.ui.Icon': {
-            color: variables.featuredNavBarTitleColor,
+            color:
+              resolveVariable('categoryDropdownTextColor') ||
+              resolveVariable('text.color'),
           },
           'shoutem.ui.Text': {
-            color: variables.featuredNavBarTitleColor,
+            ...resolveVariable('navBarText'),
+            fontFamily: resolveFontFamily(
+              resolveVariable('navBarText.fontFamily'),
+              'normal',
+              resolveVariable('navBarText.fontStyle'),
+            ),
+            color:
+              resolveVariable('categoryDropdownTextColor') ||
+              resolveVariable('text.color'),
+            fontWeight: resolveFontWeight('normal'),
+            fontStyle: resolveFontStyle(
+              resolveVariable('navBarText.fontStyle'),
+            ),
+            textAlign: 'center',
           },
         },
       },
-    },
 
-    '.navBar': {
-      selectedOption: {
-        'shoutem.ui.Icon': {
-          color: variables.navBarIconsColor,
-        },
-        'shoutem.ui.Text': {
-          ...variables.navBarText,
-          fontFamily: resolveFontFamily(
-            variables.navBarText.fontFamily,
-            'normal',
-            variables.navBarText.fontStyle,
-          ),
-          fontWeight: resolveFontWeight('normal'),
-          fontStyle: resolveFontStyle(variables.navBarText.fontStyle),
-          color: variables.navBarIconsColor,
+      '.featured': {
+        '.horizontal': {
+          horizontalContainer: {
+            [INCLUDE]: ['dimmedFeaturedBackground'],
+            borderBottomWidth: 0,
+          },
+          selectedOption: {
+            'shoutem.ui.Icon': {
+              color: resolveVariable('featuredNavBarTitleColor'),
+            },
+            'shoutem.ui.Text': {
+              color: resolveVariable('featuredNavBarTitleColor'),
+            },
+          },
         },
       },
-    },
-
-    '.large': {
-      horizontalContainer: {
-        alignItems: 'flex-end',
-        borderColor: variables.shadowColor,
-        borderWidth: 1,
-        borderRightWidth: 0,
-        height: 40,
-        width: 175,
-      },
 
-      selectedOption: {
-        'shoutem.ui.Text': {
-          flex: 1,
-          textAlign: 'center',
-          margin: 0,
+      '.navBar': {
+        selectedOption: {
+          'shoutem.ui.Icon': {
+            color: resolveVariable('navBarIconsColor'),
+          },
+          'shoutem.ui.Text': {
+            ...resolveVariable('navBarText'),
+            fontFamily: resolveFontFamily(
+              resolveVariable('navBarText.fontFamily'),
+              'normal',
+              resolveVariable('navBarText.fontStyle'),
+            ),
+            fontWeight: resolveFontWeight('normal'),
+            fontStyle: resolveFontStyle(
+              resolveVariable('navBarText.fontStyle'),
+            ),
+            color: resolveVariable('navBarIconsColor'),
+          },
         },
+      },
 
-        'shoutem.ui.Icon': {
-          backgroundColor: variables.secondaryButtonBackgroundColor,
-          borderColor: variables.secondaryButtonBorderColor,
-          borderRadius: 2,
+      '.large': {
+        horizontalContainer: {
+          alignItems: 'flex-end',
+          borderColor: resolveVariable('shadowColor'),
           borderWidth: 1,
-          color: variables.secondaryButtonTextColor,
+          borderRightWidth: 0,
           height: 40,
-          paddingVertical: 8,
-          width: 40,
+          width: 175,
         },
 
-        padding: 0,
-        // Compensate to cover the top border
-        marginTop: -1,
-      },
-    },
+        selectedOption: {
+          'shoutem.ui.Text': {
+            flex: 1,
+            textAlign: 'center',
+            margin: 0,
+          },
 
-    selectedOption: {
-      // Button
-      [INCLUDE]: ['clearButton', 'textualButton'],
+          'shoutem.ui.Icon': {
+            backgroundColor: resolveVariable('secondaryButtonBackgroundColor'),
+            borderColor: resolveVariable('secondaryButtonBorderColor'),
+            borderRadius: 2,
+            borderWidth: 1,
+            color: resolveVariable('secondaryButtonTextColor'),
+            height: 40,
+            paddingVertical: 8,
+            width: 40,
+          },
 
-      'shoutem.ui.Icon': {
-        marginRight: 0,
+          padding: 0,
+          // Compensate to cover the top border
+          marginTop: -1,
+        },
       },
 
-      'shoutem.ui.Text': {
-        marginRight: 0,
-      },
-    },
-  },
+      selectedOption: {
+        // Button
+        [INCLUDE]: ['clearButton', 'textualButton'],
 
-  'shoutem.ui.DropDownModal': {
-    modal: {
-      'shoutem.ui.Button.close': {
         'shoutem.ui.Icon': {
-          color: changeColorAlpha(variables.subtitle.color, 0.5),
-          width: 24,
-          height: 24,
+          marginRight: 0,
         },
 
-        position: 'absolute',
-        bottom: 25,
-        left: 0,
-        right: 0,
+        'shoutem.ui.Text': {
+          marginRight: 0,
+        },
       },
-
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingVertical: 20,
-      backgroundColor: changeColorAlpha(variables.backgroundColor, 0.97),
     },
 
-    modalItem: {
-      'shoutem.ui.Text': {
-        textAlign: 'center',
-        flex: 1,
-        width: window.width,
-        paddingHorizontal: 20,
-        paddingVertical: 23,
-        alignSelf: 'stretch',
-        ...variables.subtitle,
-        fontFamily: resolveFontFamily(
-          variables.subtitle.fontFamily,
-          variables.subtitle.fontWeight,
-          variables.subtitle.fontStyle,
-        ),
-        fontWeight: resolveFontWeight(variables.subtitle.fontWeight),
-        fontStyle: resolveFontStyle(variables.subtitle.fontStyle),
-      },
-    },
-    selectedModalItem: {
-      'shoutem.ui.Text': {
-        textAlign: 'center',
+    'shoutem.ui.DropDownModal': {
+      modal: {
+        'shoutem.ui.Button.close': {
+          'shoutem.ui.Icon': {
+            color: changeColorAlpha(resolveVariable('subtitle.color'), 0.5),
+            width: 24,
+            height: 24,
+          },
+
+          position: 'absolute',
+          bottom: 25,
+          left: 0,
+          right: 0,
+        },
+
         flex: 1,
-        width: window.width,
-        paddingHorizontal: 20,
-        paddingVertical: 23,
-        alignSelf: 'stretch',
-        ...variables.subtitle,
-        fontFamily: resolveFontFamily(
-          variables.subtitle.fontFamily,
-          '500',
-          variables.subtitle.fontStyle,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 20,
+        backgroundColor: changeColorAlpha(
+          resolveVariable('backgroundColor'),
+          0.97,
         ),
-        fontWeight: resolveFontWeight('500'),
-        fontStyle: resolveFontStyle(variables.subtitle.fontStyle),
       },
-    },
-
-    visibleOptions: 8,
-  },
 
-  //
-  // Html
-  //
-  textBlock: {
-    // Inline element
-    container: {
-      '.wrapper': {
-        marginBottom: 0,
+      modalItem: {
+        'shoutem.ui.Text': {
+          textAlign: 'center',
+          flex: 1,
+          width: window.width,
+          paddingHorizontal: 20,
+          paddingVertical: 23,
+          alignSelf: 'stretch',
+          ...resolveVariable('subtitle'),
+          fontFamily: resolveFontFamily(
+            resolveVariable('subtitle.fontFamily'),
+            resolveVariable('subtitle.fontWeight'),
+            resolveVariable('subtitle.fontStyle'),
+          ),
+          fontWeight: resolveFontWeight(resolveVariable('subtitle.fontWeight')),
+          fontStyle: resolveFontStyle(resolveVariable('subtitle.fontStyle')),
+        },
       },
-      '.block': {
-        marginBottom: 20,
+      selectedModalItem: {
+        'shoutem.ui.Text': {
+          textAlign: 'center',
+          flex: 1,
+          width: window.width,
+          paddingHorizontal: 20,
+          paddingVertical: 23,
+          alignSelf: 'stretch',
+          ...resolveVariable('subtitle'),
+          fontFamily: resolveFontFamily(
+            resolveVariable('subtitle.fontFamily'),
+            '500',
+            resolveVariable('subtitle.fontStyle'),
+          ),
+          fontWeight: resolveFontWeight('500'),
+          fontStyle: resolveFontStyle(resolveVariable('subtitle.fontStyle')),
+        },
       },
+
+      visibleOptions: 8,
     },
-    text: {},
-  },
-  'shoutem.ui.SimpleHtml': {
-    container: {
-      padding: variables.mediumGutter,
-    },
-    video: {
-      // 16:9 ratio covers majority of YouTube videos
-      width: dimensionRelativeToIphone(345),
-      height: dimensionRelativeToIphone(194),
-      paddingBottom: variables.smallGutter,
-    },
-    fallback: {
-      width: window.width,
-      height: 40,
-    },
-  },
-  'shoutem.ui.Html': {
-    container: {
-      backgroundColor: variables.paperColor,
-      padding: variables.mediumGutter,
-    },
-    // HTML Inline elements
-    b: {
-      [INCLUDE]: ['textBlock'],
-      text: {
-        [INCLUDE]: ['boldTextStyle'],
+
+    //
+    // Html
+    //
+    textBlock: {
+      // Inline element
+      container: {
+        '.wrapper': {
+          marginBottom: 0,
+        },
+        '.block': {
+          marginBottom: 20,
+        },
       },
+      text: {},
     },
-    strong: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        [INCLUDE]: ['boldTextStyle'],
+    'shoutem.ui.SimpleHtml': {
+      container: {
+        padding: resolveVariable('mediumGutter'),
       },
-    },
-    i: {
-      [INCLUDE]: ['textBlock'],
-      text: {
-        [INCLUDE]: ['italicTextStyle'],
+      video: {
+        // 16:9 ratio covers majority of YouTube videos
+        width: dimensionRelativeToIphone(345),
+        height: dimensionRelativeToIphone(194),
+        paddingBottom: resolveVariable('smallGutter'),
       },
-    },
-    em: {
-      [INCLUDE]: ['textBlock'],
-      text: {
-        [INCLUDE]: ['italicTextStyle'],
+      fallback: {
+        width: window.width,
+        height: 40,
       },
     },
-    pre: {
-      [INCLUDE]: ['textBlock'],
-      text: {
-        [INCLUDE]: ['codeTextStyle'],
+    'shoutem.ui.Html': {
+      container: {
+        backgroundColor: resolveVariable('paperColor'),
+        padding: resolveVariable('mediumGutter'),
+      },
+      // HTML Inline elements
+      b: {
+        [INCLUDE]: ['textBlock'],
+        text: {
+          [INCLUDE]: ['boldTextStyle'],
+        },
       },
-    },
-    code: {
-      [INCLUDE]: ['textBlock'],
-      text: {
-        [INCLUDE]: ['codeTextStyle'],
+      strong: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          [INCLUDE]: ['boldTextStyle'],
+        },
+      },
+      i: {
+        [INCLUDE]: ['textBlock'],
+        text: {
+          [INCLUDE]: ['italicTextStyle'],
+        },
+      },
+      em: {
+        [INCLUDE]: ['textBlock'],
+        text: {
+          [INCLUDE]: ['italicTextStyle'],
+        },
+      },
+      pre: {
+        [INCLUDE]: ['textBlock'],
+        text: {
+          [INCLUDE]: ['codeTextStyle'],
+        },
+      },
+      code: {
+        [INCLUDE]: ['textBlock'],
+        text: {
+          [INCLUDE]: ['codeTextStyle'],
+        },
+      },
+      a: {
+        [INCLUDE]: ['textBlock'],
+        text: {},
       },
-    },
-    a: {
-      [INCLUDE]: ['textBlock'],
-      text: {},
-    },
 
-    // TextBlock elements
-    h1: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        color: '#000',
-        fontSize: 28,
+      // TextBlock elements
+      h1: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          color: '#000',
+          fontSize: 28,
+        },
       },
-    },
-    h2: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        color: '#000',
-        fontSize: 24,
+      h2: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          color: '#000',
+          fontSize: 24,
+        },
       },
-    },
-    h3: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        fontWeight: '900',
-        color: '#000',
-        fontSize: 18,
+      h3: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          fontWeight: '900',
+          color: '#000',
+          fontSize: 18,
+        },
       },
-    },
-    h4: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        fontWeight: '700',
-        color: '#000',
-        fontSize: 16,
+      h4: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          fontWeight: '700',
+          color: '#000',
+          fontSize: 16,
+        },
       },
-    },
-    h5: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        fontWeight: '500',
-        color: '#000',
-        fontSize: 14,
+      h5: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          fontWeight: '500',
+          color: '#000',
+          fontSize: 14,
+        },
       },
-    },
-    h6: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        fontWeight: '500',
-        color: '#000',
-        fontSize: 14,
+      h6: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          fontWeight: '500',
+          color: '#000',
+          fontSize: 14,
+        },
       },
-    },
-    p: {
-      [INCLUDE]: ['textBlock'],
-      container: {},
-      text: {
-        [INCLUDE]: ['shoutem.ui.Text', 'multilineTextStyle'],
+      p: {
+        [INCLUDE]: ['textBlock'],
+        container: {},
+        text: {
+          [INCLUDE]: ['shoutem.ui.Text', 'multilineTextStyle'],
+        },
+      },
+      div: {
+        [INCLUDE]: ['textBlock'],
       },
-    },
-    div: {
-      [INCLUDE]: ['textBlock'],
-    },
 
-    // HTML lists
-    ul: {
-      container: {},
-    },
-    ol: {
-      container: {},
-    },
-    number: {
-      // Font should be monospace so that item content has same offset
-      // Can not apply width to the Text for some reason
-      fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace',
-      fontSize: 12,
-    },
-    bullet: {},
-    li: {
-      // Inline element
-      [INCLUDE]: ['textBlock'],
-      container: {
-        '.block': {
-          marginBottom: 10,
+      // HTML lists
+      ul: {
+        container: {},
+      },
+      ol: {
+        container: {},
+      },
+      number: {
+        // Font should be monospace so that item content has same offset
+        // Can not apply width to the Text for some reason
+        fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace',
+        fontSize: 12,
+      },
+      bullet: {},
+      li: {
+        // Inline element
+        [INCLUDE]: ['textBlock'],
+        container: {
+          '.block': {
+            marginBottom: 10,
+          },
         },
       },
-    },
 
-    // HTML containers
-    section: {},
-    header: {},
-    content: {},
-    article: {},
-    footer: {},
+      // HTML containers
+      section: {},
+      header: {},
+      content: {},
+      article: {},
+      footer: {},
 
-    // HTML functional
-    video: {
-      container: {
-        // html/components/Image
-        // Used to keep video ratio by thumbnail.
-        // Must have width.
-        width: 300,
+      // HTML functional
+      video: {
+        container: {
+          // html/components/Image
+          // Used to keep video ratio by thumbnail.
+          // Must have width.
+          width: 300,
+          alignSelf: 'center',
+          marginBottom: 20,
+        },
+      },
+      img: {
         alignSelf: 'center',
         marginBottom: 20,
+        // Image height is calculated to respect
+        // image ratio depending on width.
+        // If both width and height are defined
+        // image dimensions are fixed.
+        // If image width is smaller then style width
+        // it will not rescale.
+        width: 300,
       },
     },
-    img: {
-      alignSelf: 'center',
-      marginBottom: 20,
-      // Image height is calculated to respect
-      // image ratio depending on width.
-      // If both width and height are defined
-      // image dimensions are fixed.
-      // If image width is smaller then style width
-      // it will not rescale.
-      width: 300,
-    },
-  },
 
-  'shoutem.ui.Video': {
-    container: {
-      backgroundColor: variables.paperColor,
-      flex: 1,
-      height: 240,
+    'shoutem.ui.Video': {
+      container: {
+        backgroundColor: resolveVariable('paperColor'),
+        flex: 1,
+        height: 240,
+      },
     },
-  },
 
-  //
-  // HorizontalPager
-  //
+    //
+    // HorizontalPager
+    //
 
-  'shoutem.ui.HorizontalPager': {
-    container: {
-      flexGrow: 1,
-    },
-    scrollView: {
-      flexGrow: 1,
-      backgroundColor: 'transparent',
-      overflow: 'scroll',
-    },
-    page: {
-      flexGrow: 1,
-      backgroundColor: 'transparent',
+    'shoutem.ui.HorizontalPager': {
+      container: {
+        flexGrow: 1,
+      },
+      scrollView: {
+        flexGrow: 1,
+        backgroundColor: 'transparent',
+        overflow: 'scroll',
+      },
+      page: {
+        flexGrow: 1,
+        backgroundColor: 'transparent',
+      },
+      nextPageInsetSize: 20,
     },
-    nextPageInsetSize: 20,
-  },
 
-  //
-  // PageIndicators
-  //
+    //
+    // PageIndicators
+    //
 
-  'shoutem.ui.PageIndicators': {
-    '.overlay-bottom': {
-      container: {
-        backgroundGradient: {
-          colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.25)'],
+    'shoutem.ui.PageIndicators': {
+      '.overlay-bottom': {
+        container: {
+          backgroundGradient: {
+            colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.25)'],
+          },
+          paddingVertical: 8,
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
         },
-        paddingVertical: 8,
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-      },
 
-      indicatorContainer: {
-        'shoutem.ui.View': {
-          backgroundColor: '#ffffff',
+        indicatorContainer: {
+          'shoutem.ui.View': {
+            backgroundColor: '#ffffff',
 
-          '.selected': {
-            backgroundColor: changeColorAlpha('#ffffff', 0.7),
+            '.selected': {
+              backgroundColor: changeColorAlpha('#ffffff', 0.7),
+            },
           },
         },
       },
-    },
 
-    '.relative': {
+      '.relative': {
+        container: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          bottom: 0,
+          paddingVertical: 16,
+        },
+      },
+
       container: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
-        position: 'relative',
-        bottom: 0,
-        paddingVertical: 16,
-      },
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 10,
+      },
+      indicatorContainer: {
+        alignItems: 'center',
+        'shoutem.ui.View': {
+          width: resolveVariable('galleryDotSize'),
+          height: resolveVariable('galleryDotSize'),
+          borderRadius: resolveVariable('galleryDotSize') / 2,
+          // TODO - confirm opacity
+          backgroundColor: changeColorAlpha(
+            resolveVariable('indicatorColor'),
+            0.7,
+          ),
+          marginLeft: resolveVariable('galleryDotSize') / 2,
+          marginRight: resolveVariable('galleryDotSize') / 2,
+          '.selected': {
+            backgroundColor: resolveVariable('indicatorColor'),
+          },
+        },
+      },
     },
 
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 10,
-    },
-    indicatorContainer: {
-      alignItems: 'center',
-      'shoutem.ui.View': {
-        width: variables.galleryDotSize,
-        height: variables.galleryDotSize,
-        borderRadius: variables.galleryDotSize / 2,
-        // TODO - confirm opacity
-        backgroundColor: changeColorAlpha(variables.indicatorColor, 0.7),
-        marginLeft: variables.galleryDotSize / 2,
-        marginRight: variables.galleryDotSize / 2,
-        '.selected': {
-          backgroundColor: variables.indicatorColor,
+    //
+    // InlineGallery
+    //
+    'shoutem.ui.InlineGallery': {
+      '.large-ultra-wide': {
+        container: {
+          height: dimensionRelativeToIphone(130),
         },
       },
-    },
-  },
 
-  //
-  // InlineGallery
-  //
-  'shoutem.ui.InlineGallery': {
-    '.large-ultra-wide': {
-      container: {
-        height: dimensionRelativeToIphone(130),
+      '.large-banner': {
+        container: {
+          height: dimensionRelativeToIphone(200),
+        },
       },
-    },
 
-    '.large-banner': {
-      container: {
-        height: dimensionRelativeToIphone(200),
+      '.large-wide': {
+        container: {
+          height: dimensionRelativeToIphone(238),
+        },
       },
-    },
 
-    '.large-wide': {
-      container: {
-        height: dimensionRelativeToIphone(238),
+      '.large-square': {
+        container: {
+          height: dimensionRelativeToIphone(375),
+        },
       },
-    },
 
-    '.large-square': {
       container: {
-        height: dimensionRelativeToIphone(375),
+        height: dimensionRelativeToIphone(345),
       },
-    },
 
-    container: {
-      height: dimensionRelativeToIphone(345),
-    },
+      imageContainer: {},
 
-    imageContainer: {},
+      image: {},
 
-    image: {},
-
-    pager: {
-      pageMargin: 20,
-    },
-  },
-
-  //
-  // ImageGallery
-  //
-  'shoutem.ui.ImageGallery': {
-    [INCLUDE]: ['guttersPadding'],
-    pageMargin: 20,
-    container: {
-      flexGrow: 1,
-      backgroundColor: '#000000',
-      lightsOffAnimation(driver) {
-        return {
-          backgroundColor: driver.interpolate({
-            inputRange: [0, 1],
-            outputRange: [variables.paperColor, '#000000'],
-          }),
-        };
+      pager: {
+        pageMargin: 20,
       },
     },
-    page: {
-      flexGrow: 1,
-      justifyContent: 'center',
-      overflow: 'hidden',
-    },
-  },
 
-  'shoutem.ui.ImageGalleryOverlay': {
-    '.full-screen': {
-      title: {
-        container: {
-          // We want the title background gradient to be
-          // visible underneath the navigation bar, but the
-          // title text should be rendered below the
-          // navigation bar.
-          paddingTop: NAVIGATION_BAR_HEIGHT + variables.mediumGutter,
+    //
+    // ImageGallery
+    //
+    'shoutem.ui.ImageGallery': {
+      [INCLUDE]: ['guttersPadding'],
+      pageMargin: 20,
+      container: {
+        flexGrow: 1,
+        backgroundColor: '#000000',
+        lightsOffAnimation(driver) {
+          return {
+            backgroundColor: driver.interpolate({
+              inputRange: [0, 1],
+              outputRange: [resolveVariable('paperColor'), '#000000'],
+            }),
+          };
         },
       },
+      page: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        overflow: 'hidden',
+      },
     },
 
-    container: {
-      [INCLUDE]: ['fillParent'],
-    },
-    title: {
-      container: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        paddingTop: variables.mediumGutter,
-        paddingHorizontal: variables.mediumGutter,
-
-        backgroundGradient: {
-          colors: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.0)'],
-          locations: [0.17, 1.0],
+    'shoutem.ui.ImageGalleryOverlay': {
+      '.full-screen': {
+        title: {
+          container: {
+            // We want the title background gradient to be
+            // visible underneath the navigation bar, but the
+            // title text should be rendered below the
+            // navigation bar.
+            paddingTop: NAVIGATION_BAR_HEIGHT + resolveVariable('mediumGutter'),
+          },
         },
       },
-      text: {
-        color: variables.imageOverlayTextColor,
-        textAlign: 'center',
-      },
-    },
-    description: {
+
       container: {
-        '.expanded': {
-          paddingTop: variables.extraLargeGutter,
+        [INCLUDE]: ['fillParent'],
+      },
+      title: {
+        container: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          paddingTop: resolveVariable('mediumGutter'),
+          paddingHorizontal: resolveVariable('mediumGutter'),
 
           backgroundGradient: {
-            colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.8)'],
-            locations: [0.36, 1.0],
+            colors: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.0)'],
+            locations: [0.17, 1.0],
           },
         },
-        '.collapsed': {
-          paddingTop: variables.mediumGutter,
+        text: {
+          color: resolveVariable('imageOverlayTextColor'),
+          textAlign: 'center',
+        },
+      },
+      description: {
+        container: {
+          '.expanded': {
+            paddingTop: resolveVariable('extraLargeGutter'),
 
-          backgroundGradient: {
-            colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.6)'],
-            locations: [0.02, 1.0],
+            backgroundGradient: {
+              colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.8)'],
+              locations: [0.36, 1.0],
+            },
           },
+          '.collapsed': {
+            paddingTop: resolveVariable('mediumGutter'),
+
+            backgroundGradient: {
+              colors: ['rgba(0, 0, 0, 0.0)', 'rgba(0, 0, 0, 0.6)'],
+              locations: [0.02, 1.0],
+            },
+          },
+
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
         },
 
+        scroll: {
+          maxHeight: 200,
+          padding: resolveVariable('mediumGutter'),
+        },
+        text: {
+          color: resolveVariable('imageOverlayTextColor'),
+          textAlign: 'center',
+        },
+      },
+    },
+
+    // Action Sheet
+
+    'shoutem.ui.ActionSheet': {
+      container: {
         position: 'absolute',
+        top: 0,
         bottom: 0,
         left: 0,
         right: 0,
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+      },
+      contentContainer: {
+        marginHorizontal: 8,
+        paddingBottom: 34,
+        backgroundColor: 'transparent',
       },
+      segmentContainer: {
+        overflow: 'hidden',
+        backgroundColor: '#FFFFFF',
+        borderRadius: 13,
+      },
+    },
 
-      scroll: {
-        maxHeight: 200,
-        padding: variables.mediumGutter,
+    'shoutem.ui.ActionSheetOption': {
+      container: {
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(130, 130, 130, 0.1)',
       },
       text: {
-        color: variables.imageOverlayTextColor,
+        fontSize: 15,
+        letterSpacing: 0.38,
+        color: '#000000',
+        lineHeight: 24,
+      },
+      cancelText: {
         textAlign: 'center',
+        fontWeight: resolveFontWeight('700'),
       },
     },
-  },
-
-  // Action Sheet
-
-  'shoutem.ui.ActionSheet': {
-    container: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      flexDirection: 'column',
-      justifyContent: 'flex-end',
-    },
-    contentContainer: {
-      marginHorizontal: 8,
-      paddingBottom: 34,
-      backgroundColor: 'transparent',
-    },
-    segmentContainer: {
-      overflow: 'hidden',
-      backgroundColor: '#FFFFFF',
-      borderRadius: 13,
-    },
-  },
 
-  'shoutem.ui.ActionSheetOption': {
-    container: {
-      paddingHorizontal: 20,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderColor: 'rgba(130, 130, 130, 0.1)',
-    },
-    text: {
-      fontSize: 15,
-      letterSpacing: 0.38,
-      color: '#000000',
-      lineHeight: 24,
-    },
-    cancelText: {
-      textAlign: 'center',
-      fontWeight: resolveFontWeight('700'),
+    //
+    // Other
+    //
+    'shoutem.ui.ImagePreview': {
+      container: {
+        flex: 1,
+        backgroundColor: 'transparent',
+      },
+      fullScreenContainer: {
+        flex: 1,
+        backgroundColor: 'black',
+      },
+      image: {
+        flex: 1,
+      },
+      thumbnail: {},
+      header: {
+        position: 'absolute',
+        top: STATUS_BAR_OFFSET,
+        left: 0,
+        backgroundColor: 'transparent',
+      },
+      closeIcon: {
+        color: 'white',
+        marginLeft: 15,
+        marginTop: -STATUS_BAR_OFFSET + 20,
+        height: 25,
+        width: 25,
+      },
     },
-  },
 
-  //
-  // Other
-  //
-  'shoutem.ui.ImagePreview': {
-    container: {
-      flex: 1,
-      backgroundColor: 'transparent',
-    },
-    fullScreenContainer: {
+    'shoutem.ui.MapView': {
       flex: 1,
-      backgroundColor: 'black',
     },
-    image: {
-      flex: 1,
-    },
-    thumbnail: {},
-    header: {
-      position: 'absolute',
-      top: STATUS_BAR_OFFSET,
-      left: 0,
-      backgroundColor: 'transparent',
-    },
-    closeIcon: {
-      color: 'white',
-      marginLeft: 15,
-      marginTop: -STATUS_BAR_OFFSET + 20,
-      height: 25,
-      width: 25,
-    },
-  },
-
-  'shoutem.ui.MapView': {
-    flex: 1,
-  },
 
-  'shoutem.ui.InlineMap': {
-    // TODO: why do we need all image sizes and styles here?
-    [INCLUDE]: ['imageSizes'],
-    '.top-aligned': {
-      justifyContent: 'flex-start',
-    },
+    'shoutem.ui.InlineMap': {
+      // TODO: why do we need all image sizes and styles here?
+      [INCLUDE]: ['imageSizes'],
+      '.top-aligned': {
+        justifyContent: 'flex-start',
+      },
 
-    '.bottom-aligned': {
-      justifyContent: 'flex-end',
-    },
+      '.bottom-aligned': {
+        justifyContent: 'flex-end',
+      },
 
-    '.medium-tall': {
-      height: 160,
-    },
+      '.medium-tall': {
+        height: 160,
+      },
 
-    'shoutem.ui.View': {
       'shoutem.ui.View': {
         'shoutem.ui.View': {
-          backgroundColor: variables.imageOverlayColor,
-          'shoutem.ui.Heading': {
-            color: variables.imageOverlayTextColor,
-            marginVertical: 8,
-          },
+          'shoutem.ui.View': {
+            backgroundColor: resolveVariable('imageOverlayColor'),
+            'shoutem.ui.Heading': {
+              color: resolveVariable('imageOverlayTextColor'),
+              marginVertical: 8,
+            },
 
-          'shoutem.ui.Title': {
-            color: variables.imageOverlayTextColor,
-            marginVertical: 12,
-          },
+            'shoutem.ui.Title': {
+              color: resolveVariable('imageOverlayTextColor'),
+              marginVertical: 12,
+            },
 
-          'shoutem.ui.Subtitle': {
-            color: variables.imageOverlayTextColor,
-            marginTop: 80,
-          },
+            'shoutem.ui.Subtitle': {
+              color: resolveVariable('imageOverlayTextColor'),
+              marginTop: 80,
+            },
 
-          'shoutem.ui.Caption': {
-            color: variables.imageOverlayTextColor,
-            marginTop: 5,
-          },
+            'shoutem.ui.Caption': {
+              color: resolveVariable('imageOverlayTextColor'),
+              marginTop: 5,
+            },
 
-          'shoutem.ui.Text': {
-            color: variables.imageOverlayTextColor,
+            'shoutem.ui.Text': {
+              color: resolveVariable('imageOverlayTextColor'),
+            },
           },
-        },
 
-        [INCLUDE]: ['fillParent'],
+          [INCLUDE]: ['fillParent'],
+        },
       },
-    },
-
-    [INCLUDE]: ['commonVariants'],
-    flex: 0,
-  },
 
-  'shoutem.ui.LinearGradient': {
-    '.fill-parent': {
-      [INCLUDE]: ['fillParent'],
+      [INCLUDE]: ['commonVariants'],
+      flex: 0,
     },
-  },
 
-  'shoutem.ui.Lightbox': {
-    '.container': {
-      flex: 1,
-      resizeMode: 'contain',
+    'shoutem.ui.LinearGradient': {
+      '.fill-parent': {
+        [INCLUDE]: ['fillParent'],
+      },
     },
-    'shoutem.ui.Image': {
-      '.preview': {
+
+    'shoutem.ui.Lightbox': {
+      '.container': {
         flex: 1,
+        resizeMode: 'contain',
+      },
+      'shoutem.ui.Image': {
+        '.preview': {
+          flex: 1,
+        },
       },
     },
-  },
 
-  'shoutem.ui.InlineDropDownMenu': {
-    container: {
-      paddingTop: 12,
-      paddingHorizontal: variables.mediumGutter,
-      paddingBottom: 4,
-      backgroundColor: variables.paperColor,
-    },
-    icon: {
-      color: variables.text.color,
+    'shoutem.ui.InlineDropDownMenu': {
+      container: {
+        paddingTop: 12,
+        paddingHorizontal: resolveVariable('mediumGutter'),
+        paddingBottom: 4,
+        backgroundColor: resolveVariable('paperColor'),
+      },
+      icon: {
+        color: resolveVariable('text.color'),
+      },
     },
-  },
 
-  'shoutem.ui.InlineDropDownMenuItem': {
-    container: {
-      paddingTop: 10,
-      paddingHorizontal: variables.mediumGutter,
-      paddingBottom: 4,
-      backgroundColor: variables.paperColor,
-      borderTopWidth: 1,
-      borderTopColor: variables.backgroundColor,
+    'shoutem.ui.InlineDropDownMenuItem': {
+      container: {
+        paddingTop: 10,
+        paddingHorizontal: resolveVariable('mediumGutter'),
+        paddingBottom: 4,
+        backgroundColor: resolveVariable('paperColor'),
+        borderTopWidth: 1,
+        borderTopColor: resolveVariable('backgroundColor'),
+      },
     },
-  },
 
-  'shoutem.ui.TabMenu': {
-    container: {
-      paddingHorizontal: variables.smallGutter,
-      backgroundColor: variables.backgroundColor,
-    },
-    list: {
-      flexGrow: 0,
-      flexShrink: 0,
+    'shoutem.ui.TabMenu': {
+      container: {
+        paddingHorizontal: resolveVariable('smallGutter'),
+        backgroundColor: resolveVariable('backgroundColor'),
+      },
+      list: {
+        flexGrow: 0,
+        flexShrink: 0,
+      },
     },
-  },
 
-  'shoutem.ui.TabMenuItem': {
-    tabulator: {
-      backgroundColor: variables.text.color,
-      height: 1,
-      borderRadius: 1,
-      flexDirection: 'row',
-      marginBottom: 8,
-      marginLeft: 8,
-    },
-    text: {
-      marginTop: 12,
-      marginHorizontal: 8,
-      marginBottom: 12,
-      opacity: 0.3,
-    },
-    selectedText: {
-      marginBottom: 4,
-      opacity: 1,
+    'shoutem.ui.TabMenuItem': {
+      tabulator: {
+        backgroundColor: resolveVariable('text.color'),
+        height: 1,
+        borderRadius: 1,
+        flexDirection: 'row',
+        marginBottom: 8,
+        marginLeft: 8,
+      },
+      text: {
+        marginTop: 12,
+        marginHorizontal: 8,
+        marginBottom: 12,
+        opacity: 0.3,
+      },
+      selectedText: {
+        marginBottom: 4,
+        opacity: 1,
+      },
     },
-  },
 
-  'shoutem.ui.YearRangePickerButton': {
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: '#F9F9F9',
-      borderWidth: 1,
-      borderRadius: 8,
-      borderColor: 'rgba(130, 130, 130, 0.1)',
-      paddingLeft: 15,
-      paddingVertical: 8,
-      paddingRight: 8,
-      marginRight: 8,
-    },
-    icon: {
-      color: variables.text.color,
+    'shoutem.ui.YearRangePickerButton': {
+      container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#F9F9F9',
+        borderWidth: 1,
+        borderRadius: 8,
+        borderColor: 'rgba(130, 130, 130, 0.1)',
+        paddingLeft: 15,
+        paddingVertical: 8,
+        paddingRight: 8,
+        marginRight: 8,
+      },
+      icon: {
+        color: resolveVariable('text.color'),
+      },
     },
-  },
 
-  'shoutem.ui.YearRangePickerModal': {
-    outerContainer: {
-      flex: 1,
-    },
-    container: {
-      height: 360,
-      padding: 8,
-      backgroundColor: '#F9F9F9',
-      borderWidth: 1,
-      borderRadius: 8,
-      borderColor: 'rgba(130, 130, 130, 0.1)',
-      marginHorizontal: 15,
-    },
-    tooltipContainer: {
-      flexDirection: 'row',
-      flex: 1,
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      padding: 8,
-      height: 56,
-    },
-    yearRow: {
-      flexDirection: 'row',
-      flex: 1,
-    },
-    buttonContainer: {
-      flexDirection: 'row',
-      padding: 8,
-      height: 56,
-    },
-    yearContainer: {
-      flex: 1,
-      alignSelf: 'stretch',
-      flexDirection: 'row',
-      marginBottom: 5,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    year: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    yearSelected: {
-      backgroundColor: variables.featuredColor,
-    },
-    yearFirst: {
-      left: 5,
-      borderTopLeftRadius: 8,
-      borderBottomLeftRadius: 8,
+    'shoutem.ui.YearRangePickerModal': {
+      outerContainer: {
+        flex: 1,
+      },
+      container: {
+        height: 360,
+        padding: 8,
+        backgroundColor: '#F9F9F9',
+        borderWidth: 1,
+        borderRadius: 8,
+        borderColor: 'rgba(130, 130, 130, 0.1)',
+        marginHorizontal: 15,
+      },
+      tooltipContainer: {
+        flexDirection: 'row',
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 8,
+        height: 56,
+      },
+      yearRow: {
+        flexDirection: 'row',
+        flex: 1,
+      },
+      buttonContainer: {
+        flexDirection: 'row',
+        padding: 8,
+        height: 56,
+      },
+      yearContainer: {
+        flex: 1,
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        marginBottom: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      year: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      yearSelected: {
+        backgroundColor: resolveVariable('featuredColor'),
+      },
+      yearFirst: {
+        left: 5,
+        borderTopLeftRadius: 8,
+        borderBottomLeftRadius: 8,
+      },
+      yearLast: {
+        right: 5,
+        borderTopRightRadius: 8,
+        borderBottomRightRadius: 8,
+      },
+      icon: {
+        color: resolveVariable('text.color'),
+        opacity: 1,
+      },
+      iconDisabled: {
+        opacity: 0.3,
+      },
     },
-    yearLast: {
-      right: 5,
-      borderTopRightRadius: 8,
-      borderBottomRightRadius: 8,
+
+    'shoutem.ui.DateTimePicker': {
+      buttonContainer: {
+        width: 50,
+        height: 50,
+        backgroundColor: '#222222',
+      },
+      icon: { color: '#FFFFFF', height: 30, width: 30 },
+      modalButton: { width: 100, margin: 'auto' },
+      modalButtonContainer: { height: 80 },
+      modalContainer: { backgroundColor: '#FFFFFF' },
+      textContainer: {
+        borderColor: '#C2C2C2',
+        borderWidth: 1,
+      },
     },
-    icon: {
-      color: variables.text.color,
-      opacity: 1,
+
+    'shoutem.ui.LoadingContainer': {
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
     },
-    iconDisabled: {
-      opacity: 0.3,
+
+    'shoutem.ui.CategoryPicker': {
+      container: {
+        width: resolveVariable('sizes.window.width'),
+        backgroundColor: resolveVariable('paperColor'),
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      listContainer: {
+        backgroundColor: resolveVariable('paperColor'),
+        paddingHorizontal: getSizeRelativeToReference(
+          8,
+          375,
+          resolveVariable('sizes.window.width'),
+        ),
+      },
+      scrollView: {
+        height: getSizeRelativeToReference(
+          60,
+          812,
+          resolveVariable('sizes.window.height'),
+        ),
+      },
     },
-  },
 
-  'shoutem.ui.DateTimePicker': {
-    buttonContainer: {
-      width: 50,
-      height: 50,
-      backgroundColor: '#222222',
-    },
-    icon: { color: '#FFFFFF', height: 30, width: 30 },
-    modalButton: { width: 100, margin: 'auto' },
-    modalButtonContainer: { height: 80 },
-    modalContainer: { backgroundColor: '#FFFFFF' },
-    textContainer: {
-      borderColor: '#C2C2C2',
-      borderWidth: 1,
+    'shoutem.ui.Category': {
+      container: {
+        padding: getSizeRelativeToReference(
+          15,
+          375,
+          resolveVariable('sizes.window.width'),
+        ),
+      },
+      category: {
+        fontFamily: resolveFontFamily(
+          resolveVariable('text.fontFamily'),
+          '700',
+        ),
+        fontWeight: resolveFontWeight('700'),
+        letterSpacing: -0.165,
+        fontSize: 15,
+        lineHeight: 24,
+      },
+      selectedCategory: {
+        color: changeColorAlpha(resolveVariable('text.color'), 0.5),
+      },
     },
-  },
 
-  'shoutem.ui.LoadingContainer': {
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
+    'shoutem.ui.ScrollView': {
+      contentContainerStyle: {},
     },
-  },
-});
+  };
+};