@shoutem/ui 6.3.0 → 6.4.1-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/IframeRenderer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Vimeo } from 'react-native-vimeo-iframe';
 import YoutubePlayer from 'react-native-youtube-iframe';
 import iframe from '@native-html/iframe-plugin';
 import PropTypes from 'prop-types';
@@ -41,6 +42,19 @@ const IframeRenderer = props => {
     );
   }
 
+  if (url && url.includes('vimeo')) {
+    const vimeoIdRegEx = /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i;
+    const regExMatches = url.match(vimeoIdRegEx);
+    const vimeoId = regExMatches[1];
+
+    return (
+      <Vimeo
+        videoId={vimeoId}
+        style={{ height: shoutemStyle.vimeoVideo.height }}
+      />
+    );
+  }
+
   return iframe(props);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.3.0",
+  "version": "6.4.1-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -41,6 +41,7 @@
     "react-native-toast-message": "2.1.5",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
+    "react-native-vimeo-iframe": "1.2.1",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
@@ -135,4 +136,4 @@
       "!/node_modules/@shoutem"
     ]
   }
-}
+}

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': {
@@ -2327,6 +2284,10 @@ export default () => {
         height: responsiveWidth(194),
         paddingBottom: resolveVariable('smallGutter'),
       },
+      // Just enough to display portrait mode Vimeo videos and all Vimeo player controls
+      vimeoVideo: {
+        height: responsiveWidth(220),
+      },
       fallback: {
         width: window.width,
         height: 40,