@shoutem/ui 4.6.6-rc.0 → 4.7.0

package/components/DateTimePicker.js

@@ -49,14 +49,6 @@ class DateTimePicker extends PureComponent {
     };
   }
 
-  componentDidUpdate() {
-    if (!isIos) {
-      const { value } = this.props;
-
-      this.setState({ value });
-    }
-  }
-
   handleValueChanged(event, value) {
     if (isIos) {
       return this.setState({ value });

package/components/ScrollView/ScrollDriverProvider.js

@@ -22,6 +22,11 @@ export class ScrollDriverProvider extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     driver: DriverShape,
+    // Used to propagate animation driver changes to components who aren't
+    // children of ScrollDriver, recieves driver as argument.
+    // TODO: Rewrite for new context API.
+    onAnimationDriverChange: PropTypes.func,
+    onScroll: PropTypes.func,
   };
 
   constructor(props, context) {
@@ -42,19 +47,34 @@ export class ScrollDriverProvider extends PureComponent {
   }
 
   setupAnimationDriver(props, context) {
+    const { onAnimationDriverChange } = this.props;
+
     if (props.driver) {
       this.animationDriver = props.driver;
     } else if (context.driverProvider) {
       this.animationDriver = context.animationDriver;
     } else if (!this.animationDriver) {
-      this.animationDriver = new ScrollDriver({ useNativeDriver: true });
+      this.animationDriver = new ScrollDriver(
+        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
+        props.onScroll,
+      );
+    }
+
+    if (onAnimationDriverChange) {
+      onAnimationDriverChange(this.animationDriver);
     }
   }
 
   setAnimationDriver(driver, primaryScrollView) {
     if (driver || !this.animationDriver || primaryScrollView) {
-      _.assign(this.animationDriver, driver);
+      const { onAnimationDriverChange } = this.props;
       const { driverProvider } = this.context;
+
+      _.assign(this.animationDriver, driver);
+      if (onAnimationDriverChange) {
+        onAnimationDriverChange(driver);
+      }
+
       if (driverProvider) {
         driverProvider.setAnimationDriver(driver, primaryScrollView);
       }

package/components/ScrollView/ScrollView.js

@@ -14,6 +14,7 @@ const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
 class ScrollView extends PureComponent {
   static propTypes = {
     ...Animated.ScrollView.propTypes,
+    primary: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -33,7 +34,11 @@ class ScrollView extends PureComponent {
     autoBindReact(this);
 
     this.animationDriver =
-      props.driver || new ScrollDriver({ useNativeDriver: true });
+      props.driver ||
+      new ScrollDriver(
+        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
+        props.onScroll,
+      );
   }
 
   getChildContext() {
@@ -53,12 +58,9 @@ class ScrollView extends PureComponent {
 
   componentDidUpdate() {
     const { driver } = this.props;
-    const { animationDriver } = this.context;
 
     if (driver && this.animationDriver !== driver) {
       this.animationDriver = driver;
-    } else if (animationDriver && this.animationDriver !== animationDriver) {
-      this.animationDriver = animationDriver;
     }
   }
 
@@ -92,7 +94,7 @@ class ScrollView extends PureComponent {
         ref={this.setWrappedInstance}
         contentContainerStyle={this.addIphoneXPadding(contentContainerStyle)}
         {...animationDriver.scrollViewProps}
-        {...props}
+        {..._.omit(props, 'onScroll')}
       />
     );
   }

package/components/YearRangePicker/YearRangePicker.js

@@ -79,14 +79,20 @@ class YearRangePicker extends PureComponent {
   }
 
   render() {
-    const { rangeEnd, rangeStart, resetButtonTitle, confirmButtonTitle } = this.props;
+    const {
+      rangeEnd,
+      rangeStart,
+      resetButtonTitle,
+      confirmButtonTitle,
+    } = this.props;
     const { buttonTooltip, collapsed } = this.state;
 
     return (
-      <View onLayout={this.handleLayout}>
+      <View>
         <YearPickerButton
           tooltip={buttonTooltip}
           onPress={this.handleButtonPressed}
+          collapsed={collapsed}
         />
         <YearPickerModal
           visible={collapsed}

package/components/YearRangePicker/YearRangePickerButton.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import autoBindReact from 'auto-bind/react';
 import { connectStyle } from '@shoutem/theme';
 import { TouchableOpacity } from '../TouchableOpacity';
@@ -14,6 +13,7 @@ class YearRangePickerButton extends PureComponent {
   static propTypes = {
     onPress: PropTypes.func,
     tooltip: PropTypes.string,
+    collapsed: PropTypes.bool,
     style: PropTypes.any,
   };
 
@@ -23,55 +23,41 @@ class YearRangePickerButton extends PureComponent {
     autoBindReact(this);
 
     this.dropDownIconValue = new Animated.Value(0);
-
-    this.state = {
-      collapsed: false,
-    };
   }
 
-  handlePress() {
-    const { collapsed } = this.state;
-    const { onPress } = this.props;
-
-    const toValue = collapsed ? 0 : 1;
+  componentDidUpdate(prevProps) {
+    const { collapsed } = this.props;
+    const { collapsed: prevCollapsed } = prevProps;
 
-    this.setState(
-      { collapsed: !collapsed },
-      () => Animated.timing(
-        this.dropDownIconValue,
-        {
-          toValue,
-          useNativeDriver: true,
-          duration: 300,
-        }
-      ).start());
+    if (collapsed !== prevCollapsed) {
+      const toValue = collapsed ? 1 : 0;
 
-    if (onPress) {
-      onPress();
+      Animated.timing(this.dropDownIconValue, {
+        toValue,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
     }
   }
 
   render() {
-    const { style, tooltip } = this.props;
+    const { style, tooltip, onPress } = this.props;
 
     return (
-      <TouchableOpacity
-        onPress={this.handlePress}
-        style={style.container}
-      >
-        <Text>
-          {tooltip}
-        </Text>
+      <TouchableOpacity onPress={onPress} style={style.container}>
+        <Text>{tooltip}</Text>
         <AnimatedIcon
           name="drop-down"
           style={{
             ...style.icon,
-            transform: [{
-              rotate: this.dropDownIconValue.interpolate({
-                inputRange: [0, 1],
-                outputRange: ['0deg', '180deg'],
-              }),
-            }],
+            transform: [
+              {
+                rotate: this.dropDownIconValue.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0deg', '180deg'],
+                }),
+              },
+            ],
           }}
         />
       </TouchableOpacity>
@@ -79,4 +65,6 @@ class YearRangePickerButton extends PureComponent {
   }
 }
 
-export default connectStyle('shoutem.ui.YearRangePickerButton')(YearRangePickerButton);
+export default connectStyle('shoutem.ui.YearRangePickerButton')(
+  YearRangePickerButton,
+);

package/components/YearRangePicker/YearRangePickerModal.js

@@ -20,10 +20,7 @@ function resolveVisibleYears(props) {
   const yearsPerPage = NUMBER_OF_ROWS * YEARS_IN_ROW;
 
   if (_.isEmpty(selectedYears)) {
-    const fullRange = _.times(
-      yearsPerPage,
-      index => rangeStart + index,
-    );
+    const fullRange = _.times(yearsPerPage, index => rangeStart + index);
 
     return _.filter(fullRange, year => year <= rangeEnd);
   }
@@ -31,11 +28,8 @@ function resolveVisibleYears(props) {
   const firstSelectedYear = _.head(selectedYears);
   const prevPagesNumber = Math.trunc(firstSelectedYear / yearsPerPage);
 
-  const fullRangeStart = (prevPagesNumber * yearsPerPage) + 1;
-  const fullRange = _.times(
-    yearsPerPage,
-    index => fullRangeStart + index,
-  );
+  const fullRangeStart = prevPagesNumber * yearsPerPage + 1;
+  const fullRange = _.times(yearsPerPage, index => fullRangeStart + index);
 
   return _.filter(fullRange, year => year <= rangeEnd);
 }
@@ -83,7 +77,6 @@ class YearRangePickerModal extends PureComponent {
     const { onRangeConfirmed } = this.props;
 
     if (onRangeConfirmed) {
-      LayoutAnimation.easeInEaseOut();
       onRangeConfirmed(selectedYears);
     }
   }
@@ -91,7 +84,6 @@ class YearRangePickerModal extends PureComponent {
   handleResetPress() {
     const { onRangeConfirmed } = this.props;
 
-    LayoutAnimation.easeInEaseOut();
     this.setState({ selectedYears: [] });
 
     if (onRangeConfirmed) {
@@ -104,9 +96,15 @@ class YearRangePickerModal extends PureComponent {
     const { visibleYears } = this.state;
 
     const nextYearStart = _.last(visibleYears) + 1;
-    const nextYearEnd = Math.min(rangeEnd, nextYearStart + this.YEARS_PER_PAGE - 1);
+    const nextYearEnd = Math.min(
+      rangeEnd,
+      nextYearStart + this.YEARS_PER_PAGE - 1,
+    );
 
-    const nextVisibleYears = _.times(nextYearEnd + 1 - nextYearStart, index => nextYearStart + index);
+    const nextVisibleYears = _.times(
+      nextYearEnd + 1 - nextYearStart,
+      index => nextYearStart + index,
+    );
 
     LayoutAnimation.easeInEaseOut();
     this.setState({ visibleYears: nextVisibleYears });
@@ -118,7 +116,12 @@ class YearRangePickerModal extends PureComponent {
     const prevYearStart = _.head(visibleYears) - this.YEARS_PER_PAGE;
 
     LayoutAnimation.easeInEaseOut();
-    this.setState({ visibleYears: _.times(this.YEARS_PER_PAGE, index => prevYearStart + index) });
+    this.setState({
+      visibleYears: _.times(
+        this.YEARS_PER_PAGE,
+        index => prevYearStart + index,
+      ),
+    });
   }
 
   handleYearPress(year) {
@@ -137,7 +140,9 @@ class YearRangePickerModal extends PureComponent {
         }
 
         const cutFromEnd = size / 2 <= index;
-        const newYears = _.filter(selectedYears, value => cutFromEnd ? value <= year : value >= year);
+        const newYears = _.filter(selectedYears, value =>
+          cutFromEnd ? value <= year : value >= year,
+        );
 
         this.setState({ selectedYears: newYears });
         return;
@@ -149,15 +154,23 @@ class YearRangePickerModal extends PureComponent {
       }
 
       const addToEnd = _.last(selectedYears) < year;
-      const yearsToAdd = addToEnd ? year - _.last(selectedYears) : _.head(selectedYears) - year;
+      const yearsToAdd = addToEnd
+        ? year - _.last(selectedYears)
+        : _.head(selectedYears) - year;
 
       const newYears = addToEnd
-        ? [...selectedYears, ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1)]
-        : [...selectedYears, ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1)]
+        ? [
+          ...selectedYears,
+          ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
+        ]
+        : [
+          ...selectedYears,
+          ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
+        ];
       const sortedYears = _.sortBy(newYears, item => item);
 
       this.setState({ selectedYears: sortedYears });
-    }
+    };
   }
 
   renderYear(year) {
@@ -174,12 +187,14 @@ class YearRangePickerModal extends PureComponent {
         style={style.yearContainer}
         key={year.toString()}
       >
-        <View style={[
-          style.year,
-          isSelected && style.yearSelected,
-          isFirst && style.yearFirst,
-          isLast && style.yearLast,
-        ]}>
+        <View
+          style={[
+            style.year,
+            isSelected && style.yearSelected,
+            isFirst && style.yearFirst,
+            isLast && style.yearLast,
+          ]}
+        >
           <Text>{year.toString()}</Text>
         </View>
       </TouchableOpacity>
@@ -191,7 +206,7 @@ class YearRangePickerModal extends PureComponent {
       <View styleName="horizontal flexible" key={index.toString()}>
         {_.map(row, this.renderYear)}
       </View>
-    )
+    );
   }
 
   render() {
@@ -221,6 +236,7 @@ class YearRangePickerModal extends PureComponent {
         onBackdropPress={onDismiss}
         useNativeDriver
         backdropOpacity={Platform.OS === 'ios' ? 0.7 : 0}
+        animationIn="slideInUp"
       >
         <View style={style.container}>
           <View style={style.tooltipContainer}>
@@ -229,7 +245,10 @@ class YearRangePickerModal extends PureComponent {
               onPress={this.handleYearsBackPress}
               disabled={prevDisabled}
             >
-              <Icon name="left-arrow" style={[style.icon, prevDisabled && style.iconDisabled]} />
+              <Icon
+                name="left-arrow"
+                style={[style.icon, prevDisabled && style.iconDisabled]}
+              />
             </Button>
             <Text>{buttonTooltip}</Text>
             <Button
@@ -237,22 +256,33 @@ class YearRangePickerModal extends PureComponent {
               onPress={this.handleYearsForwardPress}
               disabled={nextDisabled}
             >
-              <Icon name="right-arrow" style={[style.icon, nextDisabled && style.iconDisabled]} />
+              <Icon
+                name="right-arrow"
+                style={[style.icon, nextDisabled && style.iconDisabled]}
+              />
             </Button>
           </View>
-          {_.times(NUMBER_OF_ROWS, (row) => this.renderYearRow(data[row], row))}
+          {_.times(NUMBER_OF_ROWS, row => this.renderYearRow(data[row], row))}
           <View style={style.buttonContainer}>
-            <Button styleName="secondary flexible" onPress={this.handleResetPress}>
+            <Button
+              styleName="secondary flexible"
+              onPress={this.handleResetPress}
+            >
               <Text>{resetButtonTitle}</Text>
             </Button>
-            <Button styleName="primary flexible md-gutter-left" onPress={this.handleConfirmPress}>
+            <Button
+              styleName="primary flexible md-gutter-left"
+              onPress={this.handleConfirmPress}
+            >
               <Text>{confirmButtonTitle}</Text>
             </Button>
           </View>
-        </ View>
+        </View>
       </Modal>
     );
   }
 }
 
-export default connectStyle('shoutem.ui.YearRangePickerModal')(YearRangePickerModal);
+export default connectStyle('shoutem.ui.YearRangePickerModal')(
+  YearRangePickerModal,
+);

package/helpers/device-selector.js

@@ -1,4 +1,5 @@
 import { Platform, Dimensions } from 'react-native';
+import { hasNotch } from 'react-native-device-info';
 import _ from 'lodash';
 import {
   IPHONE_X_LONG_SIDE,
@@ -30,6 +31,8 @@ const isIphoneXR =
   !isTVOS &&
   (xrDimensionsMatch || twelveDimensionsMatch || twelveMaxDimensionsMatch);
 
+const isNotchedAndroid = OS === 'android' && hasNotch();
+
 /**
  * Receives settings for different devices
  * If the device is recognized, it returns only settings for that device
@@ -48,11 +51,16 @@ function select(settings) {
     return settings.iPhoneXR;
   }
 
+  if (settings.notchedAndroid && isNotchedAndroid) {
+    return settings.notchedAndroid;
+  }
+
   return _.get(settings, 'default');
 }
 
 export const Device = {
   isIphoneX,
   isIphoneXR,
+  isNotchedAndroid,
   select,
 };

package/helpers/keyboard.js

@@ -1,5 +1,4 @@
-import { Platform } from 'react-native';
-import { getStatusBarHeight } from 'react-native-status-bar-height';
+import { Platform, StatusBar } from 'react-native';
 import { NAVIGATION_BAR_HEIGHT } from '../theme';
 
 export function calculateKeyboardOffset(extraOffset = 0) {
@@ -9,7 +8,7 @@ export function calculateKeyboardOffset(extraOffset = 0) {
     return resolvedOffset;
   }
 
-  return getStatusBarHeight() + resolvedOffset;
+  return StatusBar.currentHeight + resolvedOffset;
 }
 
 export default { calculateKeyboardOffset };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.6.6-rc.0",
+  "version": "4.7.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -9,33 +9,33 @@
     "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "^3.5.2",
-    "@shoutem/animation": "~0.14.0",
-    "@shoutem/eslint-config-react": "^1.0.1",
-    "@shoutem/theme": "~0.12.0",
-    "react-native-render-html-table-bridge": "0.6.0",
-    "auto-bind": "^4.0.0",
-    "babel-plugin-transform-decorators-legacy": "~1.3.4",
+    "@react-native-community/datetimepicker": "3.5.2",
+    "@shoutem/animation": "shoutem/animation#649a9e7",
+    "@shoutem/eslint-config-react": "~1.0.6",
+    "@shoutem/theme": "shoutem/theme#ac4754a",
+    "auto-bind": "4.0.0",
+    "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
     "events": "1.1.0",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "7.0.1",
     "html-entities": "1.3.1",
     "htmlparser2": "3.10.1",
     "lodash": "4.17.21",
-    "prop-types": "^15.7.2",
+    "prop-types": "15.8.1",
     "qs": "6.9.3",
+    "react-native-device-info": "8.4.8",
     "react-native-lightbox": "shoutem/react-native-lightbox#v0.7.2",
-    "react-native-linear-gradient": "~2.5.6",
+    "react-native-linear-gradient": "2.5.6",
     "react-native-modal": "11.7.0",
     "react-native-photo-view": "shoutem/react-native-photo-view#0ffa1481f6b6cb8663cb291b7db1d6644440584d",
-    "react-native-render-html": "~4.2.0",
-    "react-native-status-bar-height": "2.5.0",
-    "react-native-svg": "^12.1.1",
-    "react-native-svg-transformer": "^0.14.3",
+    "react-native-render-html": "4.2.5",
+    "react-native-render-html-table-bridge": "0.6.0",
+    "react-native-svg": "12.1.1",
+    "react-native-svg-transformer": "0.14.3",
     "react-native-transformable-image": "shoutem/react-native-transformable-image#v0.0.20",
-    "react-native-vector-icons": "~6.6.0",
-    "react-native-webview": "~11.0.0",
-    "react-native-youtube-iframe": "~2.1.2",
+    "react-native-vector-icons": "6.6.0",
+    "react-native-webview": "11.0.3",
+    "react-native-youtube-iframe": "2.1.2",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
@@ -44,27 +44,28 @@
     "react-native": ">=0.61.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "7.16.7",
     "@babel/register": "7.9.0",
-    "@babel/plugin-proposal-decorators": "^7.3.0",
-    "babel-eslint": "^9.0.0",
+    "@babel/plugin-proposal-decorators": "7.16.7",
+    "babel-eslint": "9.0.0",
     "chai": "4.2.0",
     "deep-freeze": "0.0.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^1.3.1",
+    "eslint": "6.8.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsx-a11y": "1.5.5",
     "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "^5.1.1",
-    "eslint-plugin-react-native": "~3.6.0",
-    "metro-react-native-babel-preset": "^0.56.0",
+    "eslint-plugin-react": "5.2.2",
+    "eslint-plugin-react-native": "3.6.0",
+    "metro-react-native-babel-preset": "0.56.4",
     "mocha": "7.1.2",
     "prettier": "1.19.1",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.8.6",
+    "react-addons-test-utils": "15.6.2",
+    "react-dom": "16.14.0",
     "react-native-mock-render": "0.1.9"
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",
+    "react-native-device-info",
     "react-native-linear-gradient",
     "react-native-photo-view",
     "react-native-svg",

package/theme.js

@@ -22,6 +22,7 @@ const STATUS_BAR_OFFSET =
 export const NAVIGATION_BAR_HEIGHT = Device.select({
   iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
   iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
+  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
   default: NAVIGATION_HEADER_HEIGHT,
 });
 
@@ -1751,17 +1752,14 @@ export default (variables = defaultThemeVariables) => ({
     statusBar: {
       backgroundColor: variables.statusBarColor,
       statusBarStyle: variables.statusBarStyle,
-      height: Device.select({
-        iPhoneX: IPHONE_X_NOTCH_PADDING,
-        iPhoneXR: IPHONE_XR_NOTCH_PADDING,
-        default: 0,
-      }),
+      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,