How to use the @shoutem/ui.Device.select function in @shoutem/ui

resolveScrollViewProps() {
    const { navigationBarImage, style } = this.props;

    const navBarPadding = Device.select({
      iPhoneX: navigationBarImage ? (NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING) : 0,
      iPhoneXR: navigationBarImage ? (NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING) : 0,
      default: navigationBarImage ? NAVIGATION_HEADER_HEIGHT : 0,
    });

    return {
      style: {
        ...style.scrollView,
      },
      contentContainerStyle: {
        paddingTop: navBarPadding,
      }
    };
  }

},
      '.icon-only': {
        item: {
          justifyContent: 'center',
        },
      },
      '.text-only': {
        text: {
          fontSize: 15,
        },
        item: {
          justifyContent: 'center',
        },
      },
      '.selected': {
        item: Device.select({
          iPhoneX: {
            borderTopWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
          iPhoneXR: {
            borderTopWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
          default: {
            borderBottomWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
        }),
      },
      item: {
        height: TAB_BAR_ITEM_HEIGHT,

export default function resolveScrollViewProps(props) {
  const { style, isTabBar } = props;

  const homeIndicatorPadding = isTabBar ? 0 : IPHONE_X_HOME_INDICATOR_PADDING;
  const containerPadding = Device.select({
    iPhoneX: homeIndicatorPadding,
    iPhoneXR: homeIndicatorPadding,
    default: 0,
  });

  return {
    style: {
      ...style.scrollView,
    },
    contentContainerStyle: {
      paddingBottom: containerPadding,
    }
  };
}

resolveScrollViewProps() {
    const { style, isTabBar } = this.props;
    const { scrollingDirection } = this.getLayoutSettings();

    const homeIndicatorPadding = Device.select({
      iPhoneX: isTabBar ? 0 : IPHONE_X_HOME_INDICATOR_PADDING,
      iPhoneXR: isTabBar ? 0 : IPHONE_X_HOME_INDICATOR_PADDING,
      default: 0,
    });

    return {
      ...super.resolveScrollViewProps(),
      horizontal: scrollingDirection === 'horizontal',
      pagingEnabled: this.isPagingEnabled(),
      contentContainerStyle: {
        paddingBottom: homeIndicatorPadding,
      }
    };
  }

resolvePageProps() {
    const { style, isTabBar } = this.props;
    const { dimensions: { width, height } } = this.state;
    const { gridAlignment } = this.getLayoutSettings();

    const styleNames = [gridAlignment];
    const resolvedHeight = Device.select({
      iPhoneX: isTabBar ? height : (height - IPHONE_X_HOME_INDICATOR_PADDING),
      iPhoneXR: isTabBar ? height : (height - IPHONE_X_HOME_INDICATOR_PADDING),
      default: height,
    });

    if (this.hasPager()) {
      styleNames.push('lg-gutter-vertical');
    }

    return {
      style: {
        width,
        height: this.isPagingEnabled() ? resolvedHeight : null,
        ...this.scale(style.page),
      },
      styleName: styleNames.join(' '),

borderTopWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
          iPhoneXR: {
            borderTopWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
          default: {
            borderBottomWidth: 2,
            borderColor: variables.mainNavSelectedItemBorderColor,
          },
        }),
      },
      item: {
        height: TAB_BAR_ITEM_HEIGHT,
        marginBottom: Device.select({
          iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
          iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
          default: 0,
        }),
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderWidth: 0,
        borderRadius: 0,
        paddingHorizontal: variables.smallGutter,
        borderColor: 'transparent',
        touchableOpacity: {
          activeOpacity: 0.5,
        },
        touchableNativeFeedback: {
          background: Platform.OS === 'android' && (

resolvePageProps() {
    const { topOffset, listAlignment } = this.getLayoutSettings();
    const { dimensions: { height } } = this.state;
    const { style, isTabBar } = this.props;

    const homeBarHeight = Device.select({
      iPhoneX: IPHONE_X_HOME_INDICATOR_PADDING,
      iPhoneXR: IPHONE_X_HOME_INDICATOR_PADDING,
      default: 0,
    });

    return {
      style: {
        paddingTop: dimensionRelativeToIphone(topOffset),
        minHeight: isTabBar ? height : height - homeBarHeight,
        ...style.page,
      },
      styleName: listAlignment,
    };
  }