@shoutem/ui 7.1.0-beta.2 → 7.1.0-beta.21

package/components/ActionSheet/ActionSheet.js

@@ -1,183 +1,74 @@
-import React, { PureComponent } from 'react';
-import { Animated, Dimensions, TouchableOpacity } from 'react-native';
-import autoBindReact from 'auto-bind/react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import ActionSheetNative from 'react-native-actions-sheet';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { IPHONE_X_HOME_INDICATOR_PADDING } from '../../const';
-import { Device } from '../../helpers';
 import { View } from '../View';
 import ActionSheetOption, { optionPropType } from './ActionSheetOption';
 
-const { height: windowHeight } = Dimensions.get('window');
-
-function getContentOffset(contentHeight = windowHeight) {
-  if (Device.isIphoneXR || Device.isIphoneX) {
-    return contentHeight + IPHONE_X_HOME_INDICATOR_PADDING;
-  }
-
-  return contentHeight;
-}
-
-const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
-
-class ActionSheet extends PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    const { active } = props;
-    const { visible } = state;
-
-    if (active !== visible) {
-      return { visible: active };
+const ActionSheet = ({
+  active = false,
+  cancelOptions = undefined,
+  confirmOptions = undefined,
+  style,
+  onDismiss = undefined,
+  ...otherProps
+}) => {
+  const actionSheetRef = useRef(null);
+
+  const hasConfirmOptions = useMemo(() => !_.isEmpty(confirmOptions), [
+    confirmOptions,
+  ]);
+  const hasCancelOptions = useMemo(() => !_.isEmpty(cancelOptions), [
+    cancelOptions,
+  ]);
+
+  useEffect(() => {
+    if (active) {
+      actionSheetRef.current?.show();
+    } else {
+      actionSheetRef.current?.hide();
     }
-
-    return null;
-  }
-
-  constructor(props) {
-    super(props);
-
-    autoBindReact(this);
-
-    this.state = {
-      opacity: new Animated.Value(0),
-      yPos: new Animated.Value(0),
-      visible: false,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active } = this.props;
-    const { active: prevActive } = prevProps;
-
-    if (active && !prevActive) {
-      this.handleEntryAnimation();
-    }
-
-    if (!active && prevActive) {
-      this.handleExitAnimation();
-    }
-  }
-
-  hideComponent() {
-    this.setState({ visible: false });
-  }
-
-  handleContentLayout(event) {
-    const height = _.get(event, 'nativeEvent.layout.height', 0);
-
-    this.setState({ height });
-  }
-
-  handleEntryAnimation() {
-    const { yPos, opacity } = this.state;
-
-    const toValue = 1;
-
-    Animated.parallel([
-      Animated.spring(yPos, {
-        toValue,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }
-
-  handleExitAnimation() {
-    const { yPos, opacity } = this.state;
-
-    const toValue = 0;
-
-    Animated.parallel([
-      Animated.spring(yPos, {
-        toValue,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue,
-        delay: 100,
-        duration: 150,
-        useNativeDriver: false,
-      }),
-    ]).start(this.hideComponent);
-  }
-
-  handleInactiveAreaPress() {
-    const { onDismiss } = this.props;
-
-    if (onDismiss) {
-      onDismiss();
-    }
-  }
-
-  render() {
-    const { confirmOptions, cancelOptions, style } = this.props;
-    const { opacity, yPos, visible, height } = this.state;
-
-    const hasConfirmOptions = !_.isEmpty(confirmOptions);
-    const hasCancelOptions = !_.isEmpty(cancelOptions);
-
-    if (!visible || (!hasConfirmOptions && !hasCancelOptions)) {
-      return null;
-    }
-
-    return (
-      <AnimatedTouchable
-        activeOpacity={1}
-        onPress={this.handleInactiveAreaPress}
-        style={[
-          style.container,
-          {
-            backgroundColor: opacity.interpolate({
-              inputRange: [0, 1],
-              outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.3)'],
-            }),
-          },
-        ]}
-      >
-        <Animated.View
-          onLayout={this.handleContentLayout}
-          style={[
-            style.contentContainer,
-            {
-              transform: [
-                {
-                  translateY: yPos.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [getContentOffset(height), 0],
-                  }),
-                },
-              ],
-            },
-          ]}
-        >
-          {hasConfirmOptions && (
+  }, [active]);
+
+  return (
+    <ActionSheetNative
+      gestureEnabled
+      ref={actionSheetRef}
+      onClose={onDismiss}
+      containerStyle={style.container}
+      {...otherProps}
+    >
+      <View style={style.contentContainer}>
+        {hasConfirmOptions && (
+          <View style={style.segmentContainer}>
+            {_.map(confirmOptions, option => (
+              <ActionSheetOption
+                key={option.title}
+                option={option}
+                style={style.option}
+              />
+            ))}
+          </View>
+        )}
+        {hasCancelOptions && (
+          <View styleName="md-gutter-top">
             <View style={style.segmentContainer}>
-              {_.map(confirmOptions, option => (
-                <ActionSheetOption key={option.title} option={option} />
+              {_.map(cancelOptions, option => (
+                <ActionSheetOption
+                  key={option.title}
+                  cancelOption
+                  option={option}
+                  style={style.option}
+                />
               ))}
             </View>
-          )}
-          {hasCancelOptions && (
-            <View styleName="md-gutter-top">
-              <View style={style.segmentContainer}>
-                {_.map(cancelOptions, option => (
-                  <ActionSheetOption
-                    key={option.title}
-                    cancelOption
-                    option={option}
-                  />
-                ))}
-              </View>
-            </View>
-          )}
-        </Animated.View>
-      </AnimatedTouchable>
-    );
-  }
-}
+          </View>
+        )}
+      </View>
+    </ActionSheetNative>
+  );
+};
 
 ActionSheet.propTypes = {
   style: PropTypes.object.isRequired,

package/components/ActionSheet/ActionSheetOption.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { isIos } from '../../services';
 import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
 
@@ -9,16 +10,24 @@ export const optionPropType = PropTypes.shape({
   onPress: PropTypes.func,
 });
 
-function ActionSheetOption({ style, option, cancelOption }) {
+function ActionSheetOption({ style, option, cancelOption, nativeStyle }) {
   const { title, onPress } = option;
 
+  const useIosTextColor = nativeStyle && isIos;
+
   return (
     <TouchableOpacity
       onPress={onPress}
       style={style.container}
       styleName="horizontal"
     >
-      <Text style={[style.text, cancelOption && style.cancelText]}>
+      <Text
+        style={[
+          style.text,
+          cancelOption && style.cancelText,
+          useIosTextColor && style.iosBlueTextColor,
+        ]}
+      >
         {title}
       </Text>
     </TouchableOpacity>
@@ -28,12 +37,14 @@ function ActionSheetOption({ style, option, cancelOption }) {
 ActionSheetOption.propTypes = {
   style: PropTypes.object.isRequired,
   cancelOption: PropTypes.bool,
+  nativeStyle: PropTypes.bool,
   option: optionPropType,
 };
 
 ActionSheetOption.defaultProps = {
   option: undefined,
   cancelOption: false,
+  nativeStyle: false,
 };
 
 export default connectStyle('shoutem.ui.ActionSheetOption')(ActionSheetOption);

package/components/EmptyListImage.js

@@ -37,13 +37,29 @@ class EmptyListImage extends PureComponent {
     } = this.props;
     const EmptyStateImage = this.resolveImage();
 
+    // SVG cannot receive array of style elements on Web
+    const resolvedImageStyle = {
+      ...style.image,
+      ...imageStyle,
+    };
+
+    const resolvedTitleStyle = {
+      ...style.title,
+      ...titleStyle,
+    };
+
+    const resolvedTextStyle = {
+      ...style.message,
+      ...messageStyle,
+    };
+
     return (
       <View styleName="vertical h-center ">
-        <EmptyStateImage style={[style.image, imageStyle]} />
-        <Title styleName="title" style={[style.title, titleStyle]}>
+        <EmptyStateImage style={resolvedImageStyle} />
+        <Title styleName="title" style={resolvedTitleStyle}>
           {title}
         </Title>
-        <Text styleName="description" style={[style.message, messageStyle]}>
+        <Text styleName="description" style={resolvedTextStyle}>
           {message}
         </Text>
       </View>
@@ -52,6 +68,7 @@ class EmptyListImage extends PureComponent {
 }
 
 EmptyListImage.propTypes = {
+  style: PropTypes.object.isRequired,
   image: PropTypes.func,
   imageStyle: PropTypes.object,
   message: PropTypes.string,

package/components/Icon/Icon.web.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { View } from '../View';
+import { getIcon } from './services';
+
+function Icon({ name, style, ...otherProps }) {
+  const { color, width, height, ...otherStyle } = style;
+
+  const NamedIcon = getIcon(name);
+
+  if (!NamedIcon) {
+    // eslint-disable-next-line no-console
+    console.warn(`Icon with name '${name}' not found within the provided set`);
+
+    return null;
+  }
+
+  return (
+    // Sometimes, in web, svg icons are not resized as expected, unless svg is wrapped inside View.
+    <View>
+      <NamedIcon
+        fill={color}
+        width={width}
+        height={height}
+        style={{ ...otherStyle }}
+        {...otherProps}
+      />
+    </View>
+  );
+}
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+};
+
+export default connectStyle('shoutem.ui.Icon')(Icon);

package/components/Icon/assets/index.js

@@ -83,6 +83,7 @@ import playlistPlay from './playlist-play.svg';
 import plusButton from './plus-button.svg';
 import podcasts from './podcasts.svg';
 import products from './products.svg';
+import queue from './queue.svg';
 import radio from './radio.svg';
 import radiobuttonOff from './radiobutton-off.svg';
 import radiobuttonOn from './radiobutton-on.svg';
@@ -123,6 +124,7 @@ import videoCam from './video-cam.svg';
 import videoCamOff from './video-cam-off.svg';
 import videoChat from './video-chat.svg';
 import web from './web.svg';
+import wheelchair from './wheelchair.svg';
 
 export const defaultConfig = [
   { name: 'about', icon: about },
@@ -210,6 +212,7 @@ export const defaultConfig = [
   { name: 'plus-button', icon: plusButton },
   { name: 'podcasts', icon: podcasts },
   { name: 'products', icon: products },
+  { name: 'queue', icon: queue },
   { name: 'radio', icon: radio },
   { name: 'radiobutton-off', icon: radiobuttonOff },
   { name: 'radiobutton-on', icon: radiobuttonOn },
@@ -250,4 +253,5 @@ export const defaultConfig = [
   { name: 'video-cam-off', icon: videoCamOff },
   { name: 'video-chat', icon: videoChat },
   { name: 'web', icon: web },
+  { name: 'wheelchair', icon: wheelchair },
 ];

package/components/Icon/assets/queue.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 2h20v4H0V2zm0 8h20v2H0v-2zm0 6h20v2H0v-2z"/></svg>

package/components/Icon/assets/wheelchair.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 24">
+<title>wheelchair</title>
+<path d="M13.701 15.897l1.366 2.732c-1.031 3.188-4.004 5.371-7.353 5.371-4.246 0-7.714-3.469-7.714-7.714 0-3.241 2.036-6.134 5.076-7.246l0.228 1.754c-2.183 0.964-3.589 3.107-3.589 5.491 0 3.308 2.692 6 6 6 3.442 0 6.228-2.946 5.987-6.388zM21.040 17.237l0.777 1.527-3.429 1.714c-0.121 0.067-0.254 0.094-0.388 0.094-0.321 0-0.629-0.188-0.763-0.469l-3.201-6.388h-6.321c-0.429 0-0.804-0.335-0.857-0.763l-1.286-10.433c-0.013-0.134 0.040-0.429 0.080-0.563 0.254-0.924 1.112-1.527 2.063-1.527 1.179 0 2.143 0.964 2.143 2.143 0 1.219-1.071 2.263-2.304 2.129l0.496 3.871h5.665v1.714h-5.451l0.214 1.714h6.094c0.321 0 0.629 0.188 0.763 0.469l3.054 6.094z"></path>
+</svg>

package/components/ListView.js

@@ -7,6 +7,7 @@ import {
   StatusBar,
   View,
 } from 'react-native';
+import { RefreshControl as WebRefreshControl } from 'react-native-web-refresh-control';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -37,15 +38,18 @@ class ListView extends PureComponent {
   static getDerivedStateFromProps(props, state) {
     const isLoading = props.loading;
 
-    if (isLoading) {
-      if (state.status !== Status.IDLE) {
-        // We are already in a loading status
-        return state;
-      }
-
+    // If data is loading but no status updates were triggered, set status to loading.
+    if (isLoading && state.status === Status.IDLE) {
       return { status: Status.LOADING };
     }
-    return { status: Status.IDLE };
+
+    // If loading is done, set status back to idle.
+    if (!isLoading && state.status === Status.LOADING) {
+      return { status: Status.IDLE}
+    }
+
+    // Return all other statuses as they are.
+    return { status: state.status ?? Status.IDLE };
   }
 
   constructor(props, context) {
@@ -78,6 +82,14 @@ class ListView extends PureComponent {
 
     if (onRefresh) {
       onRefresh();
+
+      // Adding timeout, until onRefresh becomes async function. Then, we'll be able to know when
+      // refresh is done and set status back to idle.
+      setTimeout(() => {
+        this.setState({
+          status: Status.IDLE,
+        });
+      }, 500);
     }
   }
 
@@ -302,6 +314,17 @@ class ListView extends PureComponent {
     };
     delete refreshControlStyle.tintColor;
 
+    if (Platform.OS === 'web') {
+      return (
+        <WebRefreshControl
+          onRefresh={this.onRefresh}
+          refreshing={status === Status.REFRESHING}
+          tintColor={style.refreshControl.tintColor}
+          style={refreshControlStyle}
+        />
+      );
+    }
+
     return (
       <RefreshControl
         onRefresh={this.onRefresh}

package/components/ShareButton.js

@@ -3,6 +3,7 @@ import { Platform, Share } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { unavailableInWeb } from '../services';
 import { Button } from './Button';
 import { Icon } from './Icon';
 
@@ -41,7 +42,7 @@ class ShareButton extends PureComponent {
     }
 
     return (
-      <Button onPress={this.onShare} {...otherProps}>
+      <Button onPress={unavailableInWeb(this.onShare)} {...otherProps}>
         <Icon
           name={Platform.OS === 'ios' ? 'share' : 'share-android'}
           animationName={animationName}

package/components/Switch.js

@@ -2,19 +2,29 @@ import React from 'react';
 import { Switch as RNSwitch } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { isWeb } from '../services/platform';
 import { View } from './View';
 
-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>
-);
+const Switch = ({ value, onValueChange, style }) => {
+  const webColors = {
+    trackColor: style.track?.false,
+    activeThumbColor: style.thumb,
+    activeTrackColor: style.track.true,
+  };
+
+  return (
+    <View style={style.container}>
+      <RNSwitch
+        trackColor={isWeb ? style.track?.false : style.track}
+        thumbColor={style.thumb}
+        ios_backgroundColor={style.track?.false}
+        onValueChange={onValueChange}
+        value={value}
+        {...(isWeb && webColors)}
+      />
+    </View>
+  );
+};
 
 Switch.propTypes = {
   onValueChange: PropTypes.func.isRequired,

package/components/TextInput.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { forwardRef, PureComponent } from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { Platform, TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import { TextInputPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
@@ -60,14 +60,16 @@ class TextInput extends PureComponent {
       withoutBorder,
       wiggleAnimation,
       errorText,
+      height,
       ...otherStyle
     } = style;
 
+    const containerStyle = Platform.OS === 'web' ? { height } : undefined;
     const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage;
     const startErrorAnimation = animate && !!errorMessage;
 
     return (
-      <View>
+      <View style={containerStyle}>
         <Wiggle style={wiggleAnimation} startAnimation={startErrorAnimation}>
           <RNTextInput
             {...otherProps}
@@ -80,6 +82,7 @@ class TextInput extends PureComponent {
               ...(hasBorder ? withBorder : withoutBorder),
               ...(errorMessage ? errorBorderColor : {}),
               ...otherStyle,
+              height,
             }}
             ref={forwardedRef}
           />

package/components/ToastMessage/components/ToastProgressBar.js

@@ -12,6 +12,13 @@ function ToastProgressBar({
 }) {
   const progressValue = useRef(new Animated.Value(0)).current;
 
+  const handleAnimationEnd = useCallback(() => {
+    progressValue.setValue(0);
+    if (onProgressComplete) {
+      onProgressComplete();
+    }
+  }, [onProgressComplete, progressValue]);
+
   useEffect(() => {
     if (!visible) {
       progressValue.setValue(0);
@@ -25,13 +32,6 @@ function ToastProgressBar({
     }).start(handleAnimationEnd);
   }, [visible, duration, handleAnimationEnd]);
 
-  const handleAnimationEnd = useCallback(() => {
-    progressValue.setValue(0);
-    if (onProgressComplete) {
-      onProgressComplete();
-    }
-  }, [onProgressComplete, progressValue]);
-
   return (
     <View style={style.container}>
       <Animated.View

package/components/Video/Video.js

@@ -44,7 +44,7 @@ class Video extends PureComponent {
   }
 
   render() {
-    const { width, height, style, poster } = this.props;
+    const { width, height = '100%', style, poster } = this.props;
 
     return (
       <View style={style.container}>

package/html/components/SimpleHtml.js

@@ -6,7 +6,6 @@ import { iframeModel } from '@native-html/iframe-plugin';
 import table, {
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
-  IGNORED_TAGS,
   tableModel,
 } from '@native-html/table-plugin';
 import autoBindReact from 'auto-bind/react';
@@ -119,7 +118,6 @@ class SimpleHtml extends PureComponent {
         ...customHtmlElementModels,
       },
       WebView,
-      ignoredTags: IGNORED_TAGS,
       domVisitors: { onElement, ...customDomVisitors },
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.2",
+  "version": "7.1.0-beta.21",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -15,9 +15,9 @@
     "@native-html/table-plugin": "5.3.1",
     "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
-    "@shoutem/animation": "~0.15.0",
+    "@shoutem/animation": "0.17.0-beta.0",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "~0.13.2",
+    "@shoutem/theme": "~0.14.0-beta.1",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -35,18 +35,21 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-modal": "13.0.1",
     "react-native-render-html": "6.3.4",
-    "react-native-svg": "12.3.0",
+    "react-native-svg": "15.4.0",
     "react-native-svg-transformer": "1.3.0",
     "react-native-toast-message": "2.1.5",
     "react-native-vimeo-iframe": "^1.2.1",
+    "react-native-web-refresh-control": "1.1.2",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
+    "react-native-actions-sheet": "0.9.3",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-native": ">=0.61.5"
+    "react-native": ">=0.61.5",
+    "react-native-gesture-handler": "*"
   },
   "devDependencies": {
     "@babel/core": "7.16.7",

package/services/index.js

@@ -1,6 +1,8 @@
+export { isAndroid, isIos, isWeb } from './platform';
+export { unavailableInWeb } from './unavailableInWeb';
 export {
-  ThemeVariableResolver,
+  createScopedResolver,
   defaultResolver,
   resolveVariable,
-  createScopedResolver,
+  ThemeVariableResolver,
 } from './variableResolver';

package/services/platform.js

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+
+export const isAndroid = Platform.OS === 'android';
+export const isIos = Platform.OS === 'ios';
+export const isWeb = Platform.OS === 'web';

package/services/unavailableInWeb.js

@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+import { Toast } from '@shoutem/ui';
+import _ from 'lodash';
+
+const isWeb = Platform.OS === 'web';
+
+export const unavailableInWeb = callback => {
+  if (!isWeb) {
+    return callback;
+  }
+
+  // If callback is undefined, show toast immediatelly.
+  if (_.isUndefined(callback)) {
+    Toast.showInfo({
+      title: 'Feature currently unavailable',
+      message:
+        'This feature is currently unavailable in Web Preview. For better preview experience download Disclose app.',
+    });
+  }
+
+  // Otherwise, return callback to be executed on user action.
+
+  return () =>
+    Toast.showInfo({
+      title: 'Feature currently unavailable',
+      message:
+        'This feature is currently unavailable in Web Preview. For better preview experience download Disclose app.',
+    });
+};

package/theme.js

@@ -1,4 +1,4 @@
-import { Dimensions, Platform, StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import {
   changeColorAlpha,
   createSharedStyle,
@@ -16,7 +16,7 @@ import {
   STATUS_BAR_OFFSET,
 } from './const';
 import { Device } from './helpers';
-import { resolveVariable } from './services';
+import { isAndroid, isIos, resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
@@ -72,7 +72,7 @@ export function resolveFontFamily(
   fontWeight = 'normal',
   fontStyle = 'normal',
 ) {
-  if (Platform.OS === 'ios') {
+  if (isIos) {
     return fontName;
   }
 
@@ -103,22 +103,22 @@ export function resolveFontFamily(
 // being provided to fontWeight will cause the default system font to be used, so we conditionally
 // resolve it.
 export function resolveFontWeight(fontWeight) {
-  if (Platform.OS === 'ios') {
-    return fontWeight;
+  if (!isIos) {
+    return 'normal';
   }
 
-  return 'normal';
+  return fontWeight;
 }
 
 // Currently, resolveFontFamily will provide fontStyle styling, but any value other than 'normal'
 // being provided to fontStyle will cause the default system font to be used, so we conditionally
 // resolve it.
 export function resolveFontStyle(fontStyle) {
-  if (Platform.OS === 'ios') {
-    return fontStyle;
+  if (!isIos) {
+    return 'normal';
   }
 
-  return 'normal';
+  return fontStyle;
 }
 
 // This function is deprecated and replaced with calculateLineHeight.
@@ -1819,7 +1819,7 @@ export default () => {
         top: Device.select({
           iPhoneX: 6,
           iPhoneXR: 8,
-          default: Platform.OS === 'android' ? 0 : -4,
+          default: isAndroid ? 0 : -4,
         }),
         left: 0,
         right: 0,
@@ -2427,7 +2427,7 @@ export default () => {
       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',
+        fontFamily: isIos ? 'Menlo-Regular' : 'monospace',
         fontSize: 12,
       },
       bullet: {},
@@ -2475,8 +2475,7 @@ export default () => {
     'shoutem.ui.Video': {
       container: {
         backgroundColor: resolveVariable('paperColor'),
-        flex: 1,
-        height: 240,
+        height: responsiveHeight(240),
       },
     },
 
@@ -2714,13 +2713,7 @@ export default () => {
 
     'shoutem.ui.ActionSheet': {
       container: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
+        backgroundColor: 'transparent',
       },
       contentContainer: {
         marginHorizontal: 8,
@@ -2740,17 +2733,22 @@ export default () => {
         paddingVertical: 16,
         borderBottomWidth: 1,
         borderColor: 'rgba(130, 130, 130, 0.1)',
+        alignItems: 'center',
       },
       text: {
         fontSize: 15,
         letterSpacing: 0.38,
-        color: '#000000',
+        color: resolveVariable('primaryButtonText.color'),
         lineHeight: 24,
       },
       cancelText: {
+        color: resolveVariable('errorText.color'),
         textAlign: 'center',
         fontWeight: resolveFontWeight('700'),
       },
+      iosBlueTextColor: {
+        color: '#007AFF',
+      },
     },
 
     //
@@ -3132,7 +3130,6 @@ export default () => {
       },
       textContainer: {
         flex: 1,
-        height: responsiveHeight(48),
         justifyContent: 'space-between',
       },
       title: {

package/web/style/Alert.scss

@@ -0,0 +1,69 @@
+.alert-container {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  font-size: 15px;
+}
+
+.alert-popup {
+  border-radius: 18px;
+  padding-bottom: 0px;
+  overflow: hidden;
+}
+
+.alert-title {
+  color: black;
+  font-size: 20px;
+  margin-top: 10px;
+  margin-bottom: -10px;
+}
+
+.alert-actions {
+  border-top: 1px solid #DEDEDE;
+  margin: 20px 0px 0px 0px;
+}
+
+.alert-confirm {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-cancel {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-deny {
+  color: red;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}
+
+.button-height {
+  height: 50px;
+}
+
+.border-right {
+  border-right: 1px solid #DEDEDE;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #DEDEDE;
+}