@shoutem/ui 4.6.7 → 4.7.0

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/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.7",
+  "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,