@shoutem/ui 4.6.7 → 4.9.0

package/components/ScrollView/ScrollDriverProvider.js

@@ -1,4 +1,4 @@
-import { PureComponent, Children } from 'react';
+import { Children, PureComponent } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { DriverShape, ScrollDriver } from '@shoutem/animation';
@@ -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

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
+import { Animated } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Animated } from 'react-native';
-import { ScrollDriver, DriverShape } from '@shoutem/animation';
+import { DriverShape, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 import { Device } from '../../helpers';
+import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 
 const isTabBarOnScreen = true;
 const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
@@ -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/ShareButton.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { Platform, Share } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { Share, Platform } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
 import { Button } from './Button';
 import { Icon } from './Icon';

package/components/Spinner.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { ActivityIndicator } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class Spinner extends PureComponent {

package/components/Switch.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
-import autoBindReact from 'auto-bind/react';
 import React, { PureComponent } from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
+import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectAnimation, TimingDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { View } from './View';

package/components/TabMenu/TabMenu.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import { LayoutAnimation, ScrollView } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import { ScrollView, LayoutAnimation } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { optionShape } from './const';
 import { TabMenuItem } from './TabMenuItem';

package/components/TabMenu/TabMenuItem.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation } from 'react-native';
-import PropTypes from 'prop-types';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Text } from '../Text';
-import { View } from '../View';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 import { optionShape } from './const';
 
 class TabMenuItem extends PureComponent {
@@ -33,8 +33,11 @@ class TabMenuItem extends PureComponent {
     onItemPressed(item);
   }
 
-  handleLayout({ nativeEvent: { layout: { width } } }) {
-
+  handleLayout({
+    nativeEvent: {
+      layout: { width },
+    },
+  }) {
     LayoutAnimation.easeInEaseOut();
     this.setState({ baseWidth: width });
   }

package/components/Text.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Text as RNText } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 class Text extends PureComponent {
   render() {
@@ -20,4 +20,4 @@ const Title = connectStyle('shoutem.ui.Title')(AnimatedText);
 const Subtitle = connectStyle('shoutem.ui.Subtitle')(AnimatedText);
 const Caption = connectStyle('shoutem.ui.Caption')(AnimatedText);
 
-export { StyledText as Text, Heading, Title, Subtitle, Caption };
+export { Caption, Heading, Subtitle, StyledText as Text, Title };

package/components/TextInput.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
+import { TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
-import { TextInput as RNTextInput } from 'react-native';
 import { connectAnimation, Wiggle } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { Caption } from './Text';
@@ -61,9 +61,9 @@ class TextInput extends PureComponent {
             selectionColor={selectionColor}
             underlineColorAndroid={underlineColorAndroid}
             style={{
-              ...otherStyle,
               ...(hasBorder ? withBorder : withoutBorder),
-              ...(!!errorMessage ? errorBorderColor : {}),
+              ...(errorMessage ? errorBorderColor : {}),
+              ...otherStyle,
             }}
           />
         </Wiggle>

package/components/Tile.js

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 const AnimatedTile = connectAnimation(View);
 const Tile = connectStyle('shoutem.ui.Tile')(AnimatedTile);

package/components/Touchable.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { TouchableNativeFeedback } from './TouchableNativeFeedback';
 import { TouchableOpacity } from './TouchableOpacity';
@@ -21,7 +21,7 @@ class Touchable extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     const style = { ...props.style };
     delete style.touchableOpacity;
     delete style.touchableNativeFeedback;

package/components/TouchableNativeFeedback.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
@@ -13,7 +13,7 @@ class TouchableNativeFeedback extends PureComponent {
   };
 
   render() {
-    const props = this.props;
+    const { props } = this;
     // Remove the props that are not valid
     // style keys.
     const style = {

package/components/TouchableOpacity.js

@@ -4,7 +4,7 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const props = this.props;
+    const { props } = this;
 
     // The activeOpacity is not a valid RN style
     // property, so we have to unset it here.

package/components/Video/Video.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import VideoSourceReader from './VideoSourceReader';

package/components/Video/VideoSourceReader.js

@@ -58,7 +58,8 @@ export default class VideoSourceReader {
         getYouTubeVideoId(this.source),
         this.playerParams,
       );
-    } else if (this.isVimeo) {
+    }
+    if (this.isVimeo) {
       return getVimeoEmbedUrl(getVimeoVideoId(this.source));
     }
 

package/components/View.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { View as RNView, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import { LinearGradient } from './LinearGradient';

package/components/YearRangePicker/YearRangePicker.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../View';
 import YearPickerButton from './YearRangePickerButton';

package/components/YearRangePicker/YearRangePickerButton.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
-import PropTypes from 'prop-types';
 import autoBindReact from 'auto-bind/react';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { TouchableOpacity } from '../TouchableOpacity';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
+import { TouchableOpacity } from '../TouchableOpacity';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 

package/components/YearRangePicker/YearRangePickerModal.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 import { LayoutAnimation, Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Modal from 'react-native-modal';
 import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { View } from '../View';
-import { Text } from '../Text';
-import { Icon } from '../Icon';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 
 const NUMBER_OF_ROWS = 4;
 const YEARS_IN_ROW = 5;
@@ -160,13 +160,13 @@ class YearRangePickerModal extends PureComponent {
 
       const newYears = addToEnd
         ? [
-          ...selectedYears,
-          ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
-        ]
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.last(selectedYears) + index + 1),
+          ]
         : [
-          ...selectedYears,
-          ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
-        ];
+            ...selectedYears,
+            ..._.times(yearsToAdd, index => _.head(selectedYears) - index + -1),
+          ];
       const sortedYears = _.sortBy(newYears, item => item);
 
       this.setState({ selectedYears: sortedYears });

package/examples/components/Cards.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Card } from '../../components/Card';
 import { Button } from '../../components/Button';
+import { Card } from '../../components/Card';
 import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { Caption, Subtitle } from '../../components/Text';

package/examples/components/DropDownMenus.js

@@ -44,8 +44,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (horizontal)">
@@ -56,8 +56,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (large)">
@@ -68,8 +68,8 @@ export class DropDownMenus extends PureComponent {
             onOptionSelected={option =>
               this.setState({ selectedOption: option })
             }
-            titleProperty={'name'}
-            valueProperty={'id'}
+            titleProperty="name"
+            valueProperty="id"
           />
         </Stage>
         <Stage title="Dropdown (inside a form group)">
@@ -82,8 +82,8 @@ export class DropDownMenus extends PureComponent {
               onOptionSelected={option =>
                 this.setState({ selectedOptionForFormGroupDropdown: option })
               }
-              titleProperty={'name'}
-              valueProperty={'id'}
+              titleProperty="name"
+              valueProperty="id"
             />
           </FormGroup>
         </Stage>

package/examples/components/Examples.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { DropDownMenu } from '../../components/DropDownMenu';
 import { Divider } from '../../components/Divider';
+import { DropDownMenu } from '../../components/DropDownMenu';
 import { Screen } from '../../components/Screen';
 import { ScrollView } from '../../components/ScrollView';
 import { Buttons } from './Buttons';

package/examples/components/FormComponents.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
-import { Switch } from '../../components/Switch';
 import { FormGroup } from '../../components/FormGroup';
+import { Switch } from '../../components/Switch';
 import { Caption } from '../../components/Text';
 import { TextInput } from '../../components/TextInput';
 import { View } from '../../components/View';

package/examples/components/Headers.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
 import { Button } from '../../components/Button';
 import { Icon } from '../../components/Icon';
 import { Overlay } from '../../components/Overlay';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { Tile } from '../../components/Tile';
 import { View } from '../../components/View';
 import { Stage } from './Stage';

package/examples/components/NavigationBars.js

@@ -1,19 +1,19 @@
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import { Dimensions } from 'react-native';
-import { Device } from '../../helpers/device-selector';
+import PropTypes from 'prop-types';
 import { Button } from '../../components/Button';
 import { DropDownMenu } from '../../components/DropDownMenu';
 import { Icon } from '../../components/Icon';
 import { ImageBackground } from '../../components/ImageBackground';
 import { NavigationBar } from '../../components/NavigationBar';
-import { Text, Title, Heading } from '../../components/Text';
+import { Heading, Text, Title } from '../../components/Text';
 import { View } from '../../components/View';
 import {
-  NAVIGATION_HEADER_HEIGHT,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_HEADER_HEIGHT,
 } from '../../const';
+import { Device } from '../../helpers/device-selector';
 import { Stage } from './Stage';
 
 const window = Dimensions.get('window');

package/examples/components/Rows.js

@@ -3,7 +3,7 @@ import { Button } from '../../components/Button';
 import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { Row } from '../../components/Row';
-import { Text, Caption, Subtitle } from '../../components/Text';
+import { Caption, Subtitle, Text } from '../../components/Text';
 import { View } from '../../components/View';
 import { Stage } from './Stage';
 

package/examples/components/Stage.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
 
 function Stage({ title, children }) {
   // eslint-disable-next-line no-use-before-define

package/examples/components/Tiles.js

@@ -4,7 +4,7 @@ import { Icon } from '../../components/Icon';
 import { Image } from '../../components/Image';
 import { ImageBackground } from '../../components/ImageBackground';
 import { Overlay } from '../../components/Overlay';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { Tile } from '../../components/Tile';
 import { View } from '../../components/View';
 import { Stage } from './Stage';

package/examples/components/Typography.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Caption, Subtitle, Title, Heading } from '../../components/Text';
+import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
 import { View } from '../../components/View';
 import { Stage } from './Stage';
 

package/examples/components/Videos.js

@@ -6,21 +6,21 @@ import { Stage } from './Stage';
 export function Videos() {
   return (
     <View styleName="vertical collapsed">
-      <Stage title={'YouTube video'}>
+      <Stage title="YouTube video">
         <Video
           source={{ uri: 'https://www.youtube.com/embed/2zuisMXzyaI' }}
           width={320}
           height={180}
         />
       </Stage>
-      <Stage title={'Vimeo video'}>
+      <Stage title="Vimeo video">
         <Video
           source={{ uri: 'https://vimeo.com/182267614' }}
           width={320}
           height={180}
         />
       </Stage>
-      <Stage title={'Stream video'}>
+      <Stage title="Stream video">
         <Video
           source={{
             uri:

package/helpers/device-selector.js

@@ -1,10 +1,11 @@
-import { Platform, Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
+import { hasNotch } from 'react-native-device-info';
 import _ from 'lodash';
 import {
-  IPHONE_X_LONG_SIDE,
-  IPHONE_XR_LONG_SIDE,
   IPHONE_12_LONG_SIDE,
   IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_XR_LONG_SIDE,
 } from '../const';
 
 const { OS, isPad, isTVOS } = Platform;
@@ -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/html/Html.js

@@ -5,14 +5,14 @@ import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { Spinner } from '../components/Spinner';
 import { View } from '../components/View';
-import { parseHtml } from './services/HtmlParser';
 import {
-  registerElement,
+  Display,
   getElement,
   getElementDisplay,
   getElementProperty,
-  Display,
+  registerElement,
 } from './services/ElementRegistry';
+import { parseHtml } from './services/HtmlParser';
 
 const defaultElementSettings = {
   display: Display.BLOCK,

package/html/components/Image.js

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
+import { Image as RNImage } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Image as RNImage } from 'react-native';
 import { Image } from '../../components/Image';
 import { ImageBackground } from '../../components/ImageBackground';
 import { Lightbox } from '../../components/Lightbox';