@shoutem/ui 7.1.0-beta.11 → 7.1.0-beta.14

package/components/ActionSheet/ActionSheet.js

@@ -43,7 +43,11 @@ const ActionSheet = ({
         {hasConfirmOptions && (
           <View style={style.segmentContainer}>
             {_.map(confirmOptions, option => (
-              <ActionSheetOption key={option.title} option={option} />
+              <ActionSheetOption
+                key={option.title}
+                option={option}
+                style={style.option}
+              />
             ))}
           </View>
         )}
@@ -55,6 +59,7 @@ const ActionSheet = ({
                   key={option.title}
                   cancelOption
                   option={option}
+                  style={style.option}
                 />
               ))}
             </View>

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.11",
+  "version": "7.1.0-beta.14",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -2733,6 +2733,7 @@ export default () => {
         paddingVertical: 16,
         borderBottomWidth: 1,
         borderColor: 'rgba(130, 130, 130, 0.1)',
+        alignItems: 'center',
       },
       text: {
         fontSize: 15,
@@ -2745,6 +2746,9 @@ export default () => {
         textAlign: 'center',
         fontWeight: resolveFontWeight('700'),
       },
+      iosBlueTextColor: {
+        color: '#007AFF',
+      },
     },
 
     //