@shoutem/ui 7.2.2-rc.2 → 7.3.0-rc.0

package/components/ScrollView/ScrollView.js

@@ -5,12 +5,8 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { DriverShape, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
-import { Device } from '../../helpers';
 import { ScrollDriverProvider } from './ScrollDriverProvider.js';
 
-const isTabBarOnScreen = true;
-const IPHONE_X_HOME_INDICATOR_PADDING = isTabBarOnScreen ? 0 : 34;
-
 class ScrollView extends PureComponent {
   static contextTypes = {
     animationDriver: DriverShape,
@@ -63,21 +59,6 @@ class ScrollView extends PureComponent {
     this.wrappedInstance = component;
   }
 
-  addIphoneXPadding(style) {
-    const resolvedStyle = { ...style };
-
-    if (typeof resolvedStyle.paddingBottom !== 'number') {
-      resolvedStyle.paddingBottom = 0;
-    }
-
-    resolvedStyle.paddingBottom = Device.select({
-      iPhoneX: resolvedStyle.paddingBottom + IPHONE_X_HOME_INDICATOR_PADDING,
-      default: resolvedStyle.paddingBottom,
-    });
-
-    return resolvedStyle;
-  }
-
   render() {
     const { style, ...otherProps } = this.props;
     const { scrollViewProps } = this.animationDriver;
@@ -86,7 +67,7 @@ class ScrollView extends PureComponent {
     return (
       <Animated.ScrollView
         ref={this.setWrappedInstance}
-        contentContainerStyle={this.addIphoneXPadding(contentContainerStyle)}
+        contentContainerStyle={contentContainerStyle}
         {...scrollViewProps}
         {..._.omit(otherProps, 'onScroll')}
         style={otherStyle}

package/const.js

@@ -1,14 +1,9 @@
 import { Platform, StatusBar } from 'react-native';
 import {
-  IPHONE_12_LONG_SIDE,
-  IPHONE_12_MAX_LONG_SIDE,
-  IPHONE_X_HOME_INDICATOR_PADDING,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_X_NOTCH_PADDING,
-  IPHONE_XR_LONG_SIDE,
-  IPHONE_XR_NOTCH_PADDING,
+  HOME_INDICATOR_PADDING,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  NOTCH_AREA_HEIGHT,
 } from './helpers';
 
 const STATUS_BAR_OFFSET =
@@ -17,14 +12,9 @@ const STATUS_BAR_OFFSET =
 // TODO: Deprecate and remove exports from here
 // Currently leaving for backwards compatibility
 export {
-  IPHONE_12_LONG_SIDE,
-  IPHONE_12_MAX_LONG_SIDE,
-  IPHONE_X_HOME_INDICATOR_PADDING,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_X_NOTCH_PADDING,
-  IPHONE_XR_LONG_SIDE,
-  IPHONE_XR_NOTCH_PADDING,
+  HOME_INDICATOR_PADDING,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  NOTCH_AREA_HEIGHT,
   STATUS_BAR_OFFSET,
 };

package/helpers/device-selector.js

@@ -1,124 +1,32 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import _ from 'lodash';
-
-const { OS, isPad, isTVOS } = Platform;
-const { width, height } = Dimensions.get('window');
-
-export const IPHONE_X_HOME_INDICATOR_PADDING = 34;
-export const IPHONE_X_LONG_SIDE = 812;
-export const IPHONE_X_NOTCH_PADDING = 30;
-
-export const IPHONE_XR_LONG_SIDE = 896;
-export const IPHONE_XR_NOTCH_PADDING = 34;
-
-export const IPHONE_12_LONG_SIDE = 844;
-export const IPHONE_12_MAX_LONG_SIDE = 926;
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 export const NAVIGATION_HEADER_HEIGHT = 64;
 
-const xDimensionsMatch =
-  height === IPHONE_X_LONG_SIDE || width === IPHONE_X_LONG_SIDE;
-
-const xrDimensionsMatch =
-  height === IPHONE_XR_LONG_SIDE || width === IPHONE_XR_LONG_SIDE;
-
-const twelveDimensionsMatch =
-  height === IPHONE_12_LONG_SIDE || width === IPHONE_12_LONG_SIDE;
-
-const twelveMaxDimensionsMatch =
-  height === IPHONE_12_MAX_LONG_SIDE || width === IPHONE_12_MAX_LONG_SIDE;
-
-const isIphoneX = OS === 'ios' && !isPad && !isTVOS && xDimensionsMatch;
-// isIphoneXR also includes iPhone 12, iPhone 12 Pro, iPhone 12 Pro Max
-const isIphoneXR =
-  OS === 'ios' &&
-  !isPad &&
-  !isTVOS &&
-  (xrDimensionsMatch || twelveDimensionsMatch || twelveMaxDimensionsMatch);
-
-const isNotchedAndroid = OS === 'android' && DeviceInfo.hasNotch();
-
-/**
- * Receives settings for different devices
- * If the device is recognized, it returns only settings for that device
- * If not, it returns settings for 'default'
- *
- * @param {object} settings The settings provided for
- * @return {settings} Returns device specific (or 'default') settings
- */
-
-function select(settings) {
-  if (settings.iPhoneX && isIphoneX) {
-    return settings.iPhoneX;
-  }
-
-  if (settings.iPhoneXR && isIphoneXR) {
-    return settings.iPhoneXR;
-  }
+export const isNotchedAndroid =
+  Platform.OS === 'android' && DeviceInfo.hasNotch();
 
-  if (settings.notchedAndroid && isNotchedAndroid) {
-    return settings.notchedAndroid;
-  }
-
-  return _.get(settings, 'default');
-}
-
-export const NAVIGATION_BAR_HEIGHT = select({
-  iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
-  iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
-  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
+export const NAVIGATION_BAR_HEIGHT = Platform.select({
+  ios: NAVIGATION_HEADER_HEIGHT + initialWindowMetrics.insets.top,
+  android: isNotchedAndroid
+    ? NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight
+    : NAVIGATION_HEADER_HEIGHT,
   default: NAVIGATION_HEADER_HEIGHT,
 });
 
-export const getHomeIndicatorPadding = () => {
-  if (Platform.OS === 'android' || Platform.OS === 'web') {
-    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];
+export const HOME_INDICATOR_PADDING =
+  Platform.OS === 'ios' ? HOME_INDICATOR_PADDING.insets.bottom : 0;
 
-  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 NOTCH_AREA_HEIGHT = Platform.select({
+  ios: initialWindowMetrics.insets.top,
+  android: isNotchedAndroid ? StatusBar.currentHeight : 0,
+  default: 0,
+});
 
 export const Device = {
-  isIphoneX,
-  isIphoneXR,
   isNotchedAndroid,
-  select,
+  HOME_INDICATOR_PADDING,
+  NOTCH_AREA_HEIGHT,
+  NAVIGATION_HEADER_HEIGHT,
 };

package/helpers/index.js

@@ -1,13 +1,9 @@
 export {
   Device,
-  IPHONE_12_LONG_SIDE,
-  IPHONE_12_MAX_LONG_SIDE,
-  IPHONE_X_HOME_INDICATOR_PADDING,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_X_NOTCH_PADDING,
-  IPHONE_XR_LONG_SIDE,
-  IPHONE_XR_NOTCH_PADDING,
+  HOME_INDICATOR_PADDING,
+  isNotchedAndroid,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  NOTCH_AREA_HEIGHT,
 } from './device-selector';
 export { calculateKeyboardOffset, default as Keyboard } from './keyboard';

package/helpers/keyboard.js

@@ -1,14 +1,18 @@
 import { Platform, StatusBar } from 'react-native';
-import { NAVIGATION_BAR_HEIGHT } from './device-selector';
+import { isNotchedAndroid, NAVIGATION_BAR_HEIGHT } from './device-selector';
 
 export function calculateKeyboardOffset(extraOffset = 0) {
   const resolvedOffset = NAVIGATION_BAR_HEIGHT + extraOffset;
 
-  if (Platform.OS === 'ios') {
+  if (Platform.OS === 'ios' || isNotchedAndroid) {
     return resolvedOffset;
   }
 
-  return StatusBar.currentHeight + resolvedOffset;
+  if (Platform.OS === 'android' && !isNotchedAndroid) {
+    return StatusBar.currentHeight + resolvedOffset;
+  }
+
+  return resolvedOffset;
 }
 
 // TODO: Deprecate and remove Keyboard.calculateKeyboardOffset

package/index.js

@@ -50,8 +50,6 @@ export { LinearGradient } from './components/LinearGradient';
 export { ListView } from './components/ListView';
 export { LoadingContainer } from './components/LoadingContainer';
 export { LoadingIndicator } from './components/LoadingIndicator';
-export { NavigationBar } from './components/NavigationBar';
-export { NavigationBarAnimations } from './components/NavigationBar/NavigationBarAnimations';
 export { NumberInput } from './components/NumberInput';
 export { Overlay } from './components/Overlay';
 export { PageIndicators } from './components/PageIndicators';
@@ -83,12 +81,9 @@ export { SimpleHtml } from './html';
 
 // Constants
 export {
-  IPHONE_X_HOME_INDICATOR_PADDING,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_X_NOTCH_PADDING,
-  IPHONE_XR_LONG_SIDE,
-  IPHONE_XR_NOTCH_PADDING,
+  HOME_INDICATOR_PADDING,
   NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  NOTCH_AREA_HEIGHT,
   STATUS_BAR_OFFSET,
 } from './const';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.2.2-rc.2",
+  "version": "7.3.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -49,7 +49,8 @@
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-native": ">=0.61.5",
-    "react-native-gesture-handler": "*"
+    "react-native-gesture-handler": "*",
+    "react-native-safe-area-context": "*"
   },
   "devDependencies": {
     "@babel/core": "7.16.7",

package/theme.js

@@ -7,16 +7,12 @@ import {
   INCLUDE,
   inverseColorBrightnessForAmount,
 } from '@shoutem/theme';
-import { getHomeIndicatorPadding } from './helpers/device-selector';
 import {
-  IPHONE_X_NOTCH_PADDING,
-  IPHONE_XR_NOTCH_PADDING,
+  HOME_INDICATOR_PADDING,
   NAVIGATION_BAR_HEIGHT,
-  NAVIGATION_HEADER_HEIGHT,
   STATUS_BAR_OFFSET,
 } from './const';
-import { Device } from './helpers';
-import { isAndroid, isIos, resolveVariable } from './services';
+import { isIos, resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
@@ -869,7 +865,7 @@ export default () => {
       [INCLUDE]: ['commonVariants', 'guttersPadding'],
 
       '.with-home-indicator-padding': {
-        paddingBottom: getHomeIndicatorPadding(),
+        paddingBottom: HOME_INDICATOR_PADDING,
       },
 
       '.horizontal': {
@@ -974,16 +970,16 @@ export default () => {
       // 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: getHomeIndicatorPadding(),
+        paddingBottom: HOME_INDICATOR_PADDING,
       },
 
       '.with-home-indicator-padding': {
-        paddingBottom: getHomeIndicatorPadding(),
+        paddingBottom: HOME_INDICATOR_PADDING,
       },
 
       'shoutem.ui.ListView': {
         listContent: {
-          paddingBottom: getHomeIndicatorPadding(),
+          paddingBottom: HOME_INDICATOR_PADDING,
         },
       },
 
@@ -1537,332 +1533,6 @@ export default () => {
     //
     // Other
     //
-    // Deprecated on ShoutEm platform ( not used for navigationBar elements )
-    navigationBar: {
-      '.featured': {
-        'shoutem.ui.Button': {
-          'shoutem.ui.Icon': {
-            color: resolveVariable('featuredNavBarIconsColor'),
-          },
-          'shoutem.ui.Text': {
-            color: resolveVariable('featuredNavBarIconsColor'),
-          },
-
-          'shoutem.ui.View': {
-            '.badge': {
-              backgroundColor: resolveVariable('featuredNavBarIconsColor'),
-              borderColor: resolveVariable('featuredColor'),
-
-              'shoutem.ui.Text': {
-                color: resolveVariable('featuredColor'),
-              },
-            },
-          },
-        },
-
-        'shoutem.ui.DropDownMenu': {
-          selectedOption: {
-            'shoutem.ui.Icon': {
-              color: resolveVariable('featuredNavBarIconsColor'),
-            },
-            'shoutem.ui.Text': {
-              color: resolveVariable('featuredNavBarIconsColor'),
-            },
-          },
-        },
-
-        ...createSharedStyle(
-          ['shoutem.ui.Title', 'shoutem.ui.Icon', 'shoutem.ui.Text'],
-          {
-            fontFamily: resolveFontFamily(
-              resolveVariable('title.fontFamily'),
-              resolveVariable('title.fontWeight'),
-              resolveVariable('title.fontStyle'),
-            ),
-            fontWeight: resolveFontWeight(resolveVariable('title.fontWeight')),
-            fontStyle: resolveFontStyle(resolveVariable('title.fontStyle')),
-            color: resolveVariable('featuredNavBarTitleColor'),
-          },
-        ),
-
-        container: {
-          [INCLUDE]: ['featuredBackground'],
-          borderBottomWidth: 0,
-        },
-      },
-
-      'shoutem.ui.Icon': {
-        color: resolveVariable('navBarIconsColor'),
-        width: 24,
-        height: 24,
-        paddingHorizontal: 9,
-      },
-
-      'shoutem.ui.Text': {
-        ...resolveVariable('navBarText'),
-        fontFamily: resolveFontFamily(
-          resolveVariable('navBarText.fontFamily'),
-          resolveVariable('navBarText.fontWeight'),
-          resolveVariable('navBarText.fontStyle'),
-        ),
-        fontWeight: resolveFontWeight(resolveVariable('navBarText.fontWeight')),
-        fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
-        paddingHorizontal: 9,
-      },
-
-      'shoutem.ui.ShareButton': {
-        '.clear': {
-          'shoutem.ui.Button': {
-            [INCLUDE]: ['clearButton'],
-          },
-        },
-      },
-
-      'shoutem.ui.Button': {
-        [INCLUDE]: ['clearButton', 'tightButton'],
-        'shoutem.ui.Icon': {
-          color: resolveVariable('navBarIconsColor'),
-          marginVertical: 9,
-        },
-        'shoutem.ui.Text': {
-          ...resolveVariable('navBarText'),
-          fontFamily: resolveFontFamily(
-            resolveVariable('navBarText.fontFamily'),
-            'normal',
-            resolveVariable('navBarText.fontStyle'),
-          ),
-          fontWeight: resolveFontWeight('normal'),
-          fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
-          color: resolveVariable('navBarIconsColor'),
-          letterSpacing: 0,
-        },
-        'shoutem.ui.View': {
-          '.badge': {
-            top: 5,
-            right: 5,
-          },
-        },
-        paddingHorizontal: 9,
-      },
-    },
-
-    'shoutem.ui.NavigationBar': {
-      title: {
-        color: resolveVariable('navBarText.color'),
-        lineHeight: calculateLineHeight(resolveVariable('navBarText.fontSize')),
-        ...resolveVariable('navBarText'),
-        fontFamily: resolveFontFamily(
-          resolveVariable('navBarText.fontFamily'),
-          resolveVariable('navBarText.fontWeight'),
-          resolveVariable('navBarText.fontStyle'),
-        ),
-        fontWeight: resolveFontWeight(resolveVariable('navBarText.fontWeight')),
-        fontStyle: resolveFontStyle(resolveVariable('navBarText.fontStyle')),
-      },
-      icon: {
-        color: resolveVariable('navBarIconsColor'),
-      },
-      statusBar: {
-        backgroundColor: resolveVariable('statusBarColor'),
-        statusBarStyle: resolveVariable('statusBarStyle'),
-      },
-      container: {
-        backgroundColor: resolveVariable('navBarBackground'),
-        borderBottomColor: resolveVariable('navBarBorderColor'),
-        borderBottomWidth: StyleSheet.hairlineWidth,
-      },
-      leftContainer: {
-        paddingLeft: resolveVariable('mediumGutter'),
-      },
-      rightContainer: {
-        paddingRight: resolveVariable('mediumGutter'),
-      },
-
-      '.clear': {
-        container: {
-          backgroundColor: 'transparent',
-          borderBottomColor: 'transparent',
-        },
-      },
-
-      '.featured': {
-        title: {
-          color: resolveVariable('featuredNavBarTitleColor'),
-        },
-        icon: {
-          color: resolveVariable('featuredNavBarIconsColor'),
-        },
-
-        container: {
-          backgroundColor: resolveVariable('featuredColor'),
-          borderBottomWidth: 0,
-          shadowOpacity: 0,
-        },
-      },
-
-      '.no-border': {
-        container: {
-          borderBottomWidth: 0,
-          shadowOpacity: 0,
-        },
-      },
-
-      boxingAnimation(driver) {
-        return {
-          container: {
-            borderBottomColor: driver.interpolate({
-              // Animate to approx title top offset
-              inputRange: [0, 45],
-              outputRange: [
-                'transparent',
-                resolveVariable('navBarBorderColor'),
-              ],
-              extrapolate: 'clamp',
-            }),
-            borderBottomWidth: 1,
-          },
-          title: {
-            opacity: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: [0, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-        };
-      },
-
-      solidifyAnimation(driver) {
-        return {
-          icon: {
-            opacity: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: [0, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-          title: {
-            color: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: ['transparent', resolveVariable('navBarText.color')],
-              extrapolate: 'clamp',
-            }),
-          },
-          container: {
-            backgroundColor: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: ['transparent', resolveVariable('navBarBackground')],
-              extrapolate: 'clamp',
-            }),
-            borderBottomColor: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: [
-                'transparent',
-                resolveVariable('navBarBorderColor'),
-              ],
-              extrapolate: 'clamp',
-            }),
-            opacity: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: [0, 1],
-              extrapolate: 'clamp',
-            }),
-          },
-        };
-      },
-
-      fadeAnimation(driver) {
-        return {
-          container: {
-            gradient: {
-              colors: ['transparent', 'rgba(0, 0, 0, 0.5)', 'transparent'],
-              locations: [0.0, 0.25, 1.0],
-              opacity: driver.interpolate({
-                inputRange: [250, 300],
-                outputRange: [1, 0],
-              }),
-            },
-          },
-        };
-      },
-    },
-
-    // Deprecated on ShoutEm platform ( not used for navigationBar elements )
-    'shoutem.ui.navigation.NavigationBar': {
-      [INCLUDE]: ['navigationBar'],
-
-      '.fade': {
-        // Clear navigation bar is currently disabled on Android
-        // due to overflow issues.
-        gradient: {
-          [INCLUDE]: ['fillParent'],
-          colors: ['transparent', 'rgba(0, 0, 0, 0.15)', 'transparent'],
-          locations: [0.0, 0.25, 1.0],
-          solidifyAnimation(driver) {
-            return {
-              opacity: driver.interpolate({
-                inputRange: [250, 300],
-                outputRange: [1, 0],
-              }),
-            };
-          },
-        },
-      },
-
-      container: {
-        paddingTop: NAVIGATION_BAR_HEIGHT,
-        backgroundColor: resolveVariable('navBarBackground'),
-        borderBottomColor: resolveVariable('navBarBorderColor'),
-        borderBottomWidth: StyleSheet.hairlineWidth,
-      },
-      navigationHeader: {
-        position: 'absolute',
-        top: Device.select({
-          iPhoneX: 6,
-          iPhoneXR: 8,
-          default: isAndroid ? 0 : -4,
-        }),
-        left: 0,
-        right: 0,
-        height: NAVIGATION_BAR_HEIGHT,
-      },
-      statusBar: {
-        backgroundColor: resolveVariable('statusBarColor'),
-        statusBarStyle: resolveVariable('statusBarStyle'),
-        height: Device.select({
-          iPhoneX: IPHONE_X_NOTCH_PADDING,
-          iPhoneXR: IPHONE_XR_NOTCH_PADDING,
-          default: 0,
-        }),
-      },
-      screenBackground: resolveVariable('backgroundColor'),
-      navigationBarImage: {
-        marginTop: Device.select({
-          iPhoneX: IPHONE_X_NOTCH_PADDING,
-          iPhoneXR: IPHONE_XR_NOTCH_PADDING,
-          default: 0,
-        }),
-        flex: 1,
-        flexGrow: 1,
-        height: NAVIGATION_HEADER_HEIGHT,
-        left: 0,
-        solidifyAnimation(driver) {
-          return {
-            opacity: driver.interpolate({
-              inputRange: [250, 300],
-              outputRange: [0, 1],
-              extrapolate: 'clamp',
-            }),
-          };
-        },
-        boxingAnimation() {
-          return {};
-        },
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        width: window.width,
-      },
-    },
 
     sectionHeaderDivider: {
       'shoutem.ui.Caption': {

package/components/NavigationBar/NavigationBar.js

@@ -1,113 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Animated, Platform, StatusBar, View } from 'react-native';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import color from 'tinycolor2';
-import { connectAnimation } from '@shoutem/animation';
-import { connectStyle } from '@shoutem/theme';
-import { Device } from '../../helpers';
-import composeChildren from './composeChildren';
-
-function getBackgroundColor(style) {
-  const styleWithBg = _.find(
-    style,
-    styleDef =>
-      styleDef.backgroundColor && styleDef.backgroundColor !== 'transparent',
-  );
-
-  return (styleWithBg && styleWithBg.backgroundColor) || 'transparent';
-}
-
-// eslint-disable-next-line react/prefer-stateless-function
-class NavigationBar extends PureComponent {
-  setStatusBarStyle(backgroundColor) {
-    function chooseBarStyle(bgColor) {
-      return color(bgColor).isDark() ? 'light-content' : 'default';
-    }
-
-    function setStyle(bgColor) {
-      const statusBarColor = _.get(this.props, 'statusBarColor', bgColor);
-
-      const color = statusBarColor || bgColor;
-
-      if (Platform.OS === 'android') {
-        StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
-      } else {
-        const barStyle = chooseBarStyle(color);
-        StatusBar.setBarStyle(barStyle);
-      }
-    }
-
-    // This is little bit hacky, but is the only way
-    // to determine the current value of interpolated Animated.Value
-    // Other way would be to ask developer to provide Animated.Value
-    // used to interpolate backgroundColor. But this way developer doesn't
-    // have to concern about status bar if he animates navigation bar color
-    if (backgroundColor && backgroundColor._parent instanceof Animated.Value) {
-      backgroundColor._parent.addListener(animation => {
-        setStyle(backgroundColor._interpolation(animation.value));
-      });
-      setStyle(backgroundColor._interpolation(0));
-    } else {
-      setStyle(backgroundColor);
-    }
-  }
-
-  renderStatusBar() {
-    const { style } = this.props;
-
-    return Device.select({
-      iPhoneX: <View style={style.statusBar} />,
-      default: null,
-    });
-  }
-
-  render() {
-    const {
-      leftComponent,
-      rightComponent,
-      centerComponent,
-      style,
-      id,
-    } = this.props;
-
-    const backgroundColor = getBackgroundColor(style);
-    this.setStatusBarStyle(backgroundColor);
-    // Key must be set to render new screen NavigationBar
-    return (
-      <Animated.View style={style.container} key={id}>
-        {this.renderStatusBar()}
-        <View style={style.componentsContainer}>
-          <View style={style.leftComponent}>{leftComponent}</View>
-          <View style={style.centerComponent}>{centerComponent}</View>
-          <View style={style.rightComponent}>{rightComponent}</View>
-        </View>
-      </Animated.View>
-    );
-  }
-}
-
-NavigationBar.propTypes = {
-  style: PropTypes.object.isRequired,
-  centerComponent: PropTypes.node,
-  id: PropTypes.string,
-  leftComponent: PropTypes.node,
-  rightComponent: PropTypes.node,
-  // eslint-disable-next-line react/no-unused-prop-types
-  statusBarColor: PropTypes.string,
-};
-
-NavigationBar.defaultProps = {
-  id: 'default',
-  leftComponent: undefined,
-  centerComponent: undefined,
-  rightComponent: undefined,
-  statusBarColor: undefined,
-};
-
-const AnimatedNavigationBar = connectAnimation(composeChildren(NavigationBar));
-const StyledNavigationBar = connectStyle('shoutem.ui.NavigationBar')(
-  AnimatedNavigationBar,
-);
-
-export { StyledNavigationBar as NavigationBar };

package/components/NavigationBar/NavigationBarAnimations.js

@@ -1,47 +0,0 @@
-import _ from 'lodash';
-
-class ColorAnimation {
-  constructor(options) {
-    _.assign(this, options);
-    if (!_.isFunction(this[this.preset])) {
-      throw new Error(`Color animation preset:(${options.preset})
-        you tried to create doesn't exist`);
-    }
-    this.animatedValue = this.driver.value;
-    this.style = {};
-  }
-
-  setColors(backgroundColor, textColor) {
-    this.backgroundColor = backgroundColor;
-    this.textColor = textColor;
-
-    this.style = this[this.preset](this.scrollOffset);
-  }
-
-  clearToStandard(atAnimatedValue) {
-    const defaultAnimatedValue = atAnimatedValue || 150;
-    const standardTextColor = this.textColor || 'rgba(0,0,0,1)';
-    const { animatedValue } = this;
-    return {
-      color: animatedValue.interpolate({
-        inputRange: [0, defaultAnimatedValue],
-        outputRange: ['rgba(0,0,0,0)', standardTextColor],
-        extrapolate: 'clamp',
-      }),
-      backgroundColor: animatedValue.interpolate({
-        inputRange: [0, defaultAnimatedValue],
-        outputRange: ['rgba(0,0,0,0)', 'rgba(255,255,255,1)'],
-        extrapolate: 'clamp',
-      }),
-      borderBottomColor: animatedValue.interpolate({
-        inputRange: [defaultAnimatedValue / 2, defaultAnimatedValue],
-        outputRange: ['rgba(0,0,0,0)', 'rgba(51, 51, 51, 0.2)'],
-        extrapolate: 'clamp',
-      }),
-    };
-  }
-}
-
-export const NavigationBarAnimations = {
-  ColorAnimation,
-};

package/components/NavigationBar/composeChildren.js

@@ -1,86 +0,0 @@
-import React, { PureComponent } from 'react';
-import _ from 'lodash';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { ShareButton } from '../ShareButton';
-import { Title } from '../Text';
-
-const composers = {
-  title: (value, props) => ({
-    centerComponent: (
-      <Title animationName={props.animationName} numberOfLines={1}>
-        {value || ''}
-      </Title>
-    ),
-  }),
-  share: (value, props) => {
-    if (!value.link) {
-      return null;
-    }
-
-    const { title, text, link } = value;
-
-    return {
-      rightComponent: (
-        <ShareButton
-          animationName={props.animationName}
-          title={title || props.title}
-          message={text}
-          url={link}
-        />
-      ),
-    };
-  },
-  hasHistory: (value, props) => {
-    const { navigateBack } = props;
-
-    /**
-     * onPress sets `event` as first param, which leads to ignoring default navigateBack
-     * first argument (navigator) so we have to wrap navigateBack into function to leave first
-     * argument empty, default
-     */
-    function navigateBackWithoutEventParameter() {
-      navigateBack();
-    }
-
-    const leftComponent = value ? (
-      <Button styleName="clear" onPress={navigateBackWithoutEventParameter}>
-        <Icon name="back" animationName={props.animationName} />
-      </Button>
-    ) : null;
-
-    return { leftComponent };
-  },
-};
-
-/**
- * If source (usually state set by component) has undefined
- * property values, ignore those properties.
- * @param objValue
- * @param srcValue
- * @returns {*}
- */
-function skipUndefined(objValue, srcValue) {
-  return _.isUndefined(srcValue) ? objValue : srcValue;
-}
-
-// eslint-disable-next-line react/prefer-stateless-function
-const composeChildren = NavigationBarComponent =>
-  class extends PureComponent {
-    render() {
-      const newProps = {};
-      _.forEach(this.props, (value, key) => {
-        if (_.isFunction(composers[key])) {
-          _.assign(newProps, composers[key](value, this.props));
-        }
-      });
-
-      return (
-        <NavigationBarComponent
-          {..._.assignWith(newProps, this.props, skipUndefined)}
-        />
-      );
-    }
-  };
-
-export default composeChildren;

package/components/NavigationBar/index.js

@@ -1,2 +0,0 @@
-export { NavigationBar } from './NavigationBar';
-export { NavigationBarAnimations } from './NavigationBarAnimations';