@shoutem/ui 6.2.0 → 6.4.0-rc.0

package/components/Icon/assets/index.js

@@ -171,7 +171,6 @@ export const defaultConfig = [
   { name: 'forward', icon: forward },
   { name: 'gallery', icon: gallery },
   { name: 'friends', icon: friends },
-  { name: 'gallery', icon: gallery },
   { name: 'garbage-can', icon: garbageCan },
   { name: 'gift', icon: gift },
   { name: 'github', icon: github },

package/components/Switch.js

@@ -1,87 +1,32 @@
-import React, { PureComponent } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
-import autoBindReact from 'auto-bind/react';
+import React from 'react';
+import { Switch as RNSwitch } from 'react-native';
 import PropTypes from 'prop-types';
-import { connectAnimation, TimingDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { View } from './View';
 
-class Switch extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    autoBindReact(this);
-
-    this.timingDriver = new TimingDriver();
-
-    this.setValue(props.value);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { value: currentValue } = this.props;
-
-    if (prevProps.value !== currentValue) {
-      this.setValue(currentValue);
-    }
-  }
-
-  onSwitchPressed() {
-    const { value, onValueChange } = this.props;
-
-    onValueChange(!value);
-  }
-
-  setValue(value) {
-    this.timingDriver.toValue(value ? 1 : 0);
-  }
-
-  render() {
-    const { style } = this.props;
-
-    return (
-      <TouchableWithoutFeedback
-        onPress={this.onSwitchPressed}
-        styleName="clear"
-      >
-        <View>
-          <View
-            animationName="mute"
-            driver={this.timingDriver}
-            style={style.container}
-          >
-            <View
-              animationName="turn"
-              animationOptions={{ containerWidth: style.container.width }}
-              driver={this.timingDriver}
-              style={style.thumb}
-            />
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-}
+const Switch = ({ value, onValueChange, style }) => (
+  <View style={style.container}>
+    <RNSwitch
+      trackColor={style.track}
+      thumbColor={style.thumb}
+      ios_backgroundColor={style.track?.false}
+      onValueChange={onValueChange}
+      value={value}
+    />
+  </View>
+);
 
 Switch.propTypes = {
-  // Styles for the container and underlying thumb
-  style: PropTypes.shape({
-    // Container style
-    container: PropTypes.object,
-    // Thumb style
-    thumb: PropTypes.object,
-  }).isRequired,
-  // True when switch is on, false otherwise
+  onValueChange: PropTypes.func.isRequired,
+  style: PropTypes.object,
   value: PropTypes.bool,
-  // Called when switch is toggled on and off
-  onValueChange: PropTypes.func,
 };
 
 Switch.defaultProps = {
   value: false,
-  onValueChange: undefined,
+  style: {},
 };
 
-const AnimatedSwitch = connectAnimation(Switch);
-const StyledSwitch = connectStyle('shoutem.ui.Switch')(AnimatedSwitch);
+const StyledSwitch = connectStyle('shoutem.ui.Switch')(Switch);
 
 export { StyledSwitch as Switch };

package/helpers/device-selector.js

@@ -1,5 +1,5 @@
 import { Dimensions, Platform, StatusBar } from 'react-native';
-import { hasNotch } from 'react-native-device-info';
+import DeviceInfo from 'react-native-device-info';
 import _ from 'lodash';
 
 const { OS, isPad, isTVOS } = Platform;
@@ -37,7 +37,7 @@ const isIphoneXR =
   !isTVOS &&
   (xrDimensionsMatch || twelveDimensionsMatch || twelveMaxDimensionsMatch);
 
-const isNotchedAndroid = OS === 'android' && hasNotch();
+const isNotchedAndroid = OS === 'android' && DeviceInfo.hasNotch();
 
 /**
  * Receives settings for different devices
@@ -71,6 +71,51 @@ export const NAVIGATION_BAR_HEIGHT = select({
   default: NAVIGATION_HEADER_HEIGHT,
 });
 
+export const getHomeIndicatorPadding = () => {
+  if (Platform.OS === 'android') {
+    return 0;
+  }
+
+  // Apple identifier
+  const deviceId = DeviceInfo.getDeviceId();
+
+  // Extract the numbers from the deviceId string using a regular expression
+  const versions = deviceId.match(/(\d+),(\d+)/);
+
+  // Only checks if regex found X,Y, it does not resolve any of device ID-padding logic.
+  // If version is present, e.g. in iPhone 9,1, it'll always return array of length 3.
+  if (!versions && versions.length < 3) {
+    return 0;
+  }
+
+  // Extracted numbers as strings
+  const majorVersion = versions[1];
+  const minorVersion = versions[2];
+
+  const numericVersion = parseFloat(`${majorVersion}.${minorVersion}`);
+
+  const excludedIphones = {
+    iPhone8: 10.4,
+    iPhone8plus: 10.5,
+    iPhoneSeGen2: 12.8,
+    iPhoneSeGen3: 14.6,
+  };
+
+  // Home indicator is present since iPhone X series with id of iPhone10,3.
+  // There are few newer models that do not have home indicator.
+  // They're included in excludedIphones object above.
+  if (
+    numericVersion >= 10.3 &&
+    !Object.values(excludedIphones).includes(numericVersion)
+  ) {
+    // Devices with home indicator
+    return 34;
+  }
+
+  // Devices without home indicator
+  return 0;
+};
+
 export const Device = {
   isIphoneX,
   isIphoneXR,

package/html/components/AttachmentRenderer.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { resolveDimensions } from '../services/Dimensions';
+import Image from './Image';
+
+const AttachmentRenderer = ({ id, type, style, attachments }) => {
+  if (!attachments) {
+    return null;
+  }
+
+  if (type === 'image') {
+    const image = _.find(attachments, { id });
+
+    if (image && image.src) {
+      const source = { uri: image.src };
+      const imageSize = { width: image.width, height: image.height };
+      const { height, width } = resolveDimensions(imageSize, style);
+      const resolvedStyle = { alignSelf: 'center', height, width };
+
+      return <Image source={source} key={id} style={resolvedStyle} />;
+    }
+  }
+
+  return null;
+};
+
+AttachmentRenderer.propTypes = {
+  attachments: PropTypes.oneOf([PropTypes.array, PropTypes.object]),
+  id: PropTypes.any,
+  style: PropTypes.any,
+  type: PropTypes.any,
+};
+
+AttachmentRenderer.defaultProps = {
+  id: undefined,
+  type: undefined,
+  attachments: undefined,
+  style: undefined,
+};
+
+export default AttachmentRenderer;

package/html/components/IframeRenderer.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import YoutubePlayer from 'react-native-youtube-iframe';
+import iframe from '@native-html/iframe-plugin';
+import PropTypes from 'prop-types';
+import { Text } from '../../components/Text';
+import { View } from '../../components/View';
+import isValidVideoFormat from '../services/isValidVideoFormat';
+
+const IframeRenderer = props => {
+  const { tnode, shoutemStyle, unsupportedVideoFormatMessage } = props;
+  const url = tnode?.domNode?.attribs?.src;
+
+  if (url && !isValidVideoFormat(url)) {
+    const message =
+      unsupportedVideoFormatMessage || 'Unsupported video format.';
+
+    return (
+      <View
+        style={shoutemStyle.fallback}
+        styleName="vertical h-center v-center"
+      >
+        <Text>{message}</Text>
+      </View>
+    );
+  }
+
+  if (url && (url.includes('youtube') || url.includes('youtu.be'))) {
+    const youtubeIdRegEx = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    const regExMatch = url.match(youtubeIdRegEx);
+    const youtubeId =
+      regExMatch && regExMatch[7].length === 11 ? regExMatch[7] : false;
+
+    return (
+      <YoutubePlayer
+        webViewProps={{
+          renderToHardwareTextureAndroid: true,
+        }}
+        height={shoutemStyle.video.height}
+        videoId={youtubeId}
+      />
+    );
+  }
+
+  return iframe(props);
+};
+
+IframeRenderer.propTypes = {
+  tnode: PropTypes.shape({
+    children: PropTypes.any,
+  }).isRequired,
+  shoutemStyle: PropTypes.any,
+  unsupportedVideoFormatMessage: PropTypes.string,
+};
+
+IframeRenderer.defaultProps = {
+  shoutemStyle: undefined,
+  unsupportedVideoFormatMessage: undefined,
+};
+
+export default IframeRenderer;

package/html/components/SimpleHtml.js

@@ -1,57 +1,22 @@
 import React, { PureComponent } from 'react';
-import { Dimensions, Linking } from 'react-native';
-import Html from 'react-native-render-html';
-import { iframe } from 'react-native-render-html/src/HTMLRenderers';
-import {
-  cssObjectToString,
-  cssStringToObject,
-} from 'react-native-render-html/src/HTMLStyles';
-import {
-  alterNode as tableAlterNode,
+import { Linking } from 'react-native';
+import Html, { defaultSystemFonts } from 'react-native-render-html';
+import WebView from 'react-native-webview';
+import { iframeModel } from '@native-html/iframe-plugin';
+import table, {
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
   IGNORED_TAGS,
-  makeTableRenderer,
-} from 'react-native-render-html-table-bridge';
-import WebView from 'react-native-webview';
-import YoutubePlayer from 'react-native-youtube-iframe';
+  tableModel,
+} from '@native-html/table-plugin';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { Text } from '../../components/Text';
 import { View } from '../../components/View';
-import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
-import isValidVideoFormat from '../services/isValidVideoFormat';
-import Image from './Image';
-
-function resolveMaxWidth(style) {
-  // parentContainerPadding - padding between screen & SimpleHtml. Parent container
-  // can have it's own padding. If it does, we have to include it in calculation,
-  // otherwise maxWidth will be more than max & images will go over the edge
-  const parentContainerPadding = style.outerPadding || 0;
-  const paddingValue =
-    style.container.paddingLeft ||
-    0 + style.container.paddingRight ||
-    0 + parentContainerPadding;
-
-  return Dimensions.get('window').width - paddingValue;
-}
-
-function resolveDimensions(objectToResize, style) {
-  const { width, height } = objectToResize;
-
-  if (!width || !height) {
-    return { width, height };
-  }
-
-  const maxWidth = resolveMaxWidth(style);
-  const objectToResizeRatio = height / width;
-  const resolvedWidth = width > maxWidth ? maxWidth : width;
-  const resolvedHeight = Math.round(resolvedWidth * objectToResizeRatio);
-
-  return { width: resolvedWidth, height: resolvedHeight };
-}
+import { resolveMaxWidth } from '../services/Dimensions';
+import AttachmentRenderer from './AttachmentRenderer';
+import IframeRenderer from './IframeRenderer';
 
 class SimpleHtml extends PureComponent {
   constructor(props) {
@@ -60,7 +25,7 @@ class SimpleHtml extends PureComponent {
     autoBindReact(this);
   }
 
-  onLinkPress(evt, href) {
+  onLinkPress(_evt, href) {
     const { customHandleLinkPress } = this.props;
 
     return customHandleLinkPress
@@ -68,190 +33,15 @@ class SimpleHtml extends PureComponent {
       : Linking.openURL(href);
   }
 
-  /**
-   * Removes empty (therefore invalid) style attribute properties
-   * Scales down objects with specified width and height if too large
-   * Removes padding and height from suneditor for 'figure' tag that it nests
-   * video iframe tags in when video format is unsupported
-   */
-  alterNode(node) {
-    const { customAlterNode, style } = this.props;
-
-    const styleAttrib = _.get(node, 'attribs.style', '').trim();
-
-    if (customAlterNode && _.isFunction(customAlterNode)) {
-      const resolvedNode = customAlterNode(
-        node,
-        cssObjectToString,
-        cssStringToObject,
-      );
-
-      if (resolvedNode) {
-        return resolvedNode;
-      }
-    }
-
-    if (node.name === 'table') {
-      return tableAlterNode(node);
-    }
-
-    if (node.name === 'figure') {
-      const firstChild = _.head(node.children);
-
-      if (firstChild.name === 'iframe') {
-        const nodeStyle = cssStringToObject(styleAttrib);
-        const source = _.get(firstChild, 'attribs.src', '');
-
-        const resolvedNodeStyle = isValidVideoFormat(source)
-          ? _.omit(nodeStyle, ['height', 'padding-bottom'])
-          : nodeStyle;
-
-        node.attribs.style = cssObjectToString(resolvedNodeStyle);
-
-        return node;
-      }
-    }
-
-    const nodeWidth = node.attribs?.width;
-
-    if (!styleAttrib && !nodeWidth) {
-      return false;
-    }
-
-    const nodeHeight = node.attribus?.height;
-    const nodeDimensions = { width: nodeWidth, height: nodeHeight };
-    const { width, height } = resolveDimensions(nodeDimensions, style);
-
-    const nodeStyle = cssStringToObject(styleAttrib);
-    const invalidKeys = getEmptyObjectKeys(nodeStyle);
-
-    if (invalidKeys.length || nodeWidth) {
-      const styleFiltered = _.omit(style, invalidKeys);
-      node.attribs.style = cssObjectToString(styleFiltered);
-      node.attribs.width = width;
-      node.attribs.height = height;
-
-      return node;
-    }
-
-    return false;
-  }
-
-  /**
-   * Removes child break node in case when it's positioned at the end
-   * of parent div node and div has content in it.
-   * Example:
-   * <div>first line<br></div>
-   * <div>second line<br></div>
-   *
-   * If br is left as is, <Html> will show empty line under div, not just
-   * break into new line
-   */
-  alterChildren(node) {
-    const { children, name } = node;
-
-    if ((name === 'div' || name === 'p') && children && children.length > 1) {
-      const brNodes = _.filter(children, { name: 'br' });
-      const lastBrNode = _.last(brNodes);
-
-      if (lastBrNode && lastBrNode.next === null) {
-        const lastBrNodeIndex = _.indexOf(children, lastBrNode);
-        return children.splice(0, lastBrNodeIndex);
-      }
-    }
-
-    return children;
-  }
-
-  renderUnorderedListPrefix() {
-    const { style } = this.props;
-
-    return <Text style={style.prefix}>• </Text>;
-  }
-
-  renderOrderedListPrefix(
-    htmlAttribs,
-    children,
-    convertedCSSStyles,
-    passProps,
-  ) {
-    const { style } = this.props;
-
-    return <Text style={style.prefix}>{passProps.index + 1}. </Text>;
-  }
-
-  /**
-   * Custom rendered method for handling <attachment> tags
-   * Currently only supports rendering image attachments.
-   */
-  renderAttachments({ id, type }) {
-    const { attachments, style } = this.props;
-
-    if (!attachments) {
-      return null;
-    }
-
-    if (type === 'image') {
-      const image = _.find(attachments, { id });
-
-      if (image && image.src) {
-        const source = { uri: image.src };
-        const imageSize = { width: image.width, height: image.height };
-        const { height, width } = resolveDimensions(imageSize, style);
-        const resolvedStyle = { alignSelf: 'center', height, width };
-
-        return <Image source={source} key={id} style={resolvedStyle} />;
-      }
-    }
-
-    return null;
-  }
-
-  renderIframe(htmlAttribs, children, convertedCSSStyles, passProps) {
-    const { style } = this.props;
-
-    const url = htmlAttribs?.src;
-
-    if (url && !isValidVideoFormat(url)) {
-      const { unsupportedVideoFormatMessage } = this.props;
-
-      const message =
-        unsupportedVideoFormatMessage || 'Unsupported video format.';
-
-      return (
-        <View
-          style={style.fallback}
-          styleName="vertical h-center v-center"
-          key={passProps.key}
-        >
-          <Text>{message}</Text>
-        </View>
-      );
-    }
-
-    if (url && (url.includes('youtube') || url.includes('youtu.be'))) {
-      const youtubeIdRegEx = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-      const regExMatch = url.match(youtubeIdRegEx);
-      const youtubeId =
-        regExMatch && regExMatch[7].length === 11 ? regExMatch[7] : false;
-
-      return (
-        <YoutubePlayer
-          webViewProps={{
-            renderToHardwareTextureAndroid: true,
-          }}
-          height={style.video.height}
-          key={passProps.key}
-          videoId={youtubeId}
-        />
-      );
-    }
-
-    return iframe(htmlAttribs, children, convertedCSSStyles, passProps);
-  }
-
   render() {
-    const { style, body, customTagStyles, ...otherProps } = this.props;
+    const {
+      style,
+      body,
+      customTagStyles,
+      unsupportedVideoFormatMessage,
+      attachments,
+      ...otherProps
+    } = this.props;
 
     const maxWidth = resolveMaxWidth(style);
 
@@ -260,11 +50,6 @@ class SimpleHtml extends PureComponent {
       ...customTagStyles,
     };
 
-    const listPrefixRenderers = {
-      ul: this.renderUnorderedListPrefix,
-      ol: this.renderOrderedListPrefix,
-    };
-
     const tableStyle = _.get(style, 'table', {});
     const tableCssStyle = _.get(style, 'tableCss', '');
     const cssStyle = cssRulesFromSpecs({
@@ -274,23 +59,48 @@ class SimpleHtml extends PureComponent {
     const cssRules = `${cssStyle}${tableCssStyle}`;
 
     const customRenderers = {
-      iframe: this.renderIframe,
-      table: makeTableRenderer({ WebViewComponent: WebView, cssRules }),
-      attachment: this.renderAttachments,
+      iframe: props => (
+        <IframeRenderer
+          {...props}
+          shoutemStyle={style}
+          unsupportedVideoFormatMessage={unsupportedVideoFormatMessage}
+        />
+      ),
+      table,
+      attachment: props => (
+        <AttachmentRenderer
+          {...props}
+          attachments={attachments}
+          style={style}
+        />
+      ),
     };
 
     const htmlProps = {
-      html: body,
-      imagesMaxWidth: maxWidth,
-      staticContentMaxWidth: maxWidth,
-      tagsStyles: tagStyles,
-      baseFontStyle: style.baseFont,
-      ignoredStyles: ['font-family', 'letter-spacing', 'transform'],
-      onLinkPress: this.onLinkPress,
-      alterNode: this.alterNode,
-      alterChildren: this.alterChildren,
-      listsPrefixesRenderers: listPrefixRenderers,
+      source: { html: body },
+      computeEmbeddedMaxWidth: () => maxWidth,
+      contentWidth: maxWidth,
+      tagsStyles: _.omitBy(tagStyles, tagStyle => !tagStyle),
+      systemFonts: [...defaultSystemFonts, style.baseFont.fontFamily],
+      baseStyle: style.baseFont,
+      ignoredStyles: ['fontFamily', 'letterSpacing', 'transform'],
       renderers: customRenderers,
+      renderersProps: {
+        table: {
+          cssRules,
+        },
+        a: { onPress: this.onLinkPress },
+        iframe: {
+          webViewProps: {
+            renderToHardwareTextureAndroid: true,
+          },
+        },
+      },
+      customHTMLElementModels: {
+        table: tableModel,
+        iframe: iframeModel,
+      },
+      WebView,
       ignoredTags: IGNORED_TAGS,
     };
 

package/html/services/Dimensions.js

@@ -0,0 +1,29 @@
+import { Dimensions } from 'react-native';
+
+export function resolveMaxWidth(style) {
+  // parentContainerPadding - padding between screen & SimpleHtml. Parent container
+  // can have it's own padding. If it does, we have to include it in calculation,
+  // otherwise maxWidth will be more than max & images will go over the edge
+  const parentContainerPadding = style.outerPadding || 0;
+  const paddingValue =
+    style.container.paddingLeft ||
+    0 + style.container.paddingRight ||
+    0 + parentContainerPadding;
+
+  return Dimensions.get('window').width - paddingValue;
+}
+
+export function resolveDimensions(objectToResize, style) {
+  const { width, height } = objectToResize;
+
+  if (!width || !height) {
+    return { width, height };
+  }
+
+  const maxWidth = resolveMaxWidth(style);
+  const objectToResizeRatio = height / width;
+  const resolvedWidth = width > maxWidth ? maxWidth : width;
+  const resolvedHeight = Math.round(resolvedWidth * objectToResizeRatio);
+
+  return { width: resolvedWidth, height: resolvedHeight };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.2.0",
+  "version": "6.4.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -16,6 +16,8 @@
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.0",
+    "@native-html/iframe-plugin": "2.6.1",
+    "@native-html/table-plugin": "5.3.1",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -33,8 +35,7 @@
     "react-native-lightbox-v2": "0.9.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "13.0.1",
-    "react-native-render-html": "4.2.5",
-    "react-native-render-html-table-bridge": "0.6.0",
+    "react-native-render-html": "6.3.4",
     "react-native-svg": "12.3.0",
     "react-native-svg-transformer": "1.0.0",
     "react-native-toast-message": "2.1.5",
@@ -66,7 +67,7 @@
     "path": "0.12.7",
     "prettier": "1.19.1",
     "react": "17.0.2",
-    "react-dom": "16.9.0",
+    "react-dom": "17.0.2",
     "react-native": "0.68.2",
     "react-test-renderer": "17.0.2"
   },

package/theme.js

@@ -7,8 +7,8 @@ import {
   INCLUDE,
   inverseColorBrightnessForAmount,
 } from '@shoutem/theme';
+import { getHomeIndicatorPadding } from './helpers/device-selector';
 import {
-  IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
   NAVIGATION_BAR_HEIGHT,
@@ -856,6 +856,10 @@ export default () => {
     'shoutem.ui.View': {
       [INCLUDE]: ['commonVariants', 'guttersPadding'],
 
+      '.with-home-indicator-padding': {
+        paddingBottom: getHomeIndicatorPadding(),
+      },
+
       '.horizontal': {
         [INCLUDE]: ['horizontalFlexAlignment'],
         flexDirection: 'row',
@@ -955,21 +959,19 @@ export default () => {
         backgroundColor: resolveVariable('paperColor'),
       },
 
+      // This was created with home indicator padding in mind. Use with-home-indicator-padding
+      // if you need bottom padding. For actual notch - top of the screen padding, use SafeAreaView component instead.
       '.with-notch-padding': {
-        paddingBottom: Device.select({
-          iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
-          iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
-          default: 0,
-        }),
+        paddingBottom: getHomeIndicatorPadding(),
+      },
+
+      '.with-home-indicator-padding': {
+        paddingBottom: getHomeIndicatorPadding(),
       },
 
       'shoutem.ui.ListView': {
         listContent: {
-          paddingBottom: Device.select({
-            iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
-            iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
-            default: 0,
-          }),
+          paddingBottom: getHomeIndicatorPadding(),
         },
       },
 
@@ -2060,56 +2062,11 @@ export default () => {
     },
 
     '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,
-                ),
-              ],
-            }),
-          };
-        },
-      },
-
-      thumb: {
-        backgroundColor: resolveVariable('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,
-                  ],
-                }),
-              },
-            ],
-          };
-        },
+      track: {
+        false: resolveVariable('backgroundColor'),
+        true: resolveVariable('featuredColor'),
       },
+      thumb: resolveVariable('paperColor'),
     },
 
     'shoutem.ui.DropDownMenu': {