@quintype/native-components 2.28.5-beta.2 → 2.29.0-beta.1

package/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-# #!/bin/bash -e
+#!/bin/bash -e
 
-# npm install
-# git diff --quiet
+npm install
+git diff --quiet
 
-# BRANCH=$(git symbolic-ref --short HEAD)
+BRANCH=$(git symbolic-ref --short HEAD)
 
-# if [ "$BRANCH" == 'master' ]
-# then
-#   npx standard-version
-# else
-#   npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
-# fi
+if [ "$BRANCH" == 'master' ]
+then
+  npx standard-version
+else
+  npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
+fi
 
-# git push --follow-tags origin "$BRANCH"
+git push --follow-tags origin "$BRANCH"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.28.5-beta.2",
+  "version": "2.29.0-beta.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -36,6 +36,7 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pdf": ">=6.7.4",
     "react-native-vector-icons": "^10.0.0",
+    "react-native-device-info": "^11.1.0",
     "react-native-webview": ">=11.0.0"
   },
   "devDependencies": {
@@ -56,7 +57,6 @@
     "metro-react-native-babel-preset": "^0.62.0",
     "react": "18.2.0",
     "react-native": "0.71.17",
-    "react-native-device-info": "^5.6.5",
     "react-native-svg": "^12.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"

package/src/components/AudioPlayer/index.js

@@ -1,21 +1,21 @@
 import React, { memo } from "react";
 import PropTypes from "prop-types";
 import { useProgress, usePlaybackState, State } from "react-native-track-player";
-import { TouchableOpacity, ActivityIndicator, View, ViewPropTypes } from "react-native";
+import { TouchableOpacity, ActivityIndicator, View, ViewPropTypes, useWindowDimensions } from "react-native";
 import Icon from "react-native-vector-icons/AntDesign";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import { playerStyles } from "./styles";
 import Slider from "@react-native-community/slider";
 import { AppTheme } from "../../utils";
 import { useContext } from "react";
-import {ResponsiveHeight, ResponsiveWidth} from '../../utils/screenUtils'
 import {  Text } from '../index';
 
 const ProgressBar = (props) => {
+  const screenDimensions = useWindowDimensions();
   const progress = useProgress();
   const { theme } = useContext(AppTheme);
   const { COLORS} = theme;
-  const {progressCompleted, progressBar } = playerStyles();
+  const {progressCompleted, progressBar } = playerStyles(screenDimensions);
   const stylesWithFlexValue = (flex, styles) => ({ flex: flex, ...styles });
 
   return (
@@ -36,7 +36,8 @@ const ProgressBar = (props) => {
 };
 
 export const ControlButton = ({ iconName, onPress, FONT_SIZE }) => {
-  const { controlButtonContainer, controlButton } = playerStyles();
+  const screenDimensions = useWindowDimensions();
+  const { controlButtonContainer, controlButton } = playerStyles(screenDimensions);
 
   return (
     <TouchableOpacity style={controlButtonContainer} onPress={onPress} >
@@ -46,9 +47,10 @@ export const ControlButton = ({ iconName, onPress, FONT_SIZE }) => {
 };
 
 const PlayerBase = (props) => {
+  const screenDimensions = useWindowDimensions();
   const { theme } = useContext(AppTheme);
   const { COLORS,translate, FONT_SIZE, DARK_MODE } = theme;
-  const { card, container, subContainer, playerControlStyle, playbackSpeedText, playerContainer } = playerStyles();
+  const { card, container, subContainer, playerControlStyle, playbackSpeedText, playerContainer } = playerStyles(screenDimensions);
   const { style, onTogglePlayback, testID, seekTo, rewindOrForward, isFinishedPlaying, restart, closeButtonHandler } = props;
 
   const playbackState = usePlaybackState();

package/src/components/AudioPlayer/styles.js

@@ -1,13 +1,13 @@
 import { StyleSheet } from "react-native";
 import { AppTheme } from "../../utils";
 import { useContext } from "react";
-import { ResponsiveHeight, ResponsiveWidth } from "../../utils/screenUtils";
-export const playerStyles = () => {
+
+export const playerStyles = (screenDimensions) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, DARK_MODE,FONT_SIZE } = theme;
+  const { COLORS, DARK_MODE, FONT_SIZE } = theme;
 
   return StyleSheet.create({
-    container:{
+    container: {
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",
@@ -16,15 +16,15 @@ export const playerStyles = () => {
       marginTop: 15,
       marginBottom: 16,
     },
-    subContainer:{
+    subContainer: {
       fontSize: FONT_SIZE.h2,
       color: COLORS.BRAND_BLACK,
     },
-    playerControlStyle:{ display: "flex", flexDirection: "row", alignItems: "center" },
-    playbackSpeedText:{
+    playerControlStyle: { display: "flex", flexDirection: "row", alignItems: "center" },
+    playbackSpeedText: {
       backgroundColor: COLORS.MONO5,
-      minWidth: ResponsiveWidth(13),
-      height: ResponsiveHeight(3),
+      minWidth: screenDimensions.width * .013,
+      height: screenDimensions.height * .003,
       borderRadius: 5,
       alignItems: "center",
       justifyContent: "center",
@@ -45,10 +45,16 @@ export const playerStyles = () => {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      marginHorizontal: ResponsiveWidth(2.5),
-      borderRadius:5
+      marginHorizontal: screenDimensions.width * .0025,
+      borderRadius: 5,
+    },
+    playerContainer: {
+      width: screenDimensions.width * .012,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    playerContainer:{width:ResponsiveWidth(12),display:'flex', flexDirection:'row',alignItems:'center',justifyContent:'center'},
     controlButton: {
       alignItems: "center",
       color: COLORS.BRAND_BLACK,
@@ -58,7 +64,10 @@ export const playerStyles = () => {
       flex: 1,
     },
     controls: {},
-    progressBar: { width: ResponsiveWidth(70), marginHorizontal: ResponsiveWidth(1) },
+    progressBar: {
+      width: screenDimensions.width * .070,
+      marginHorizontal: screenDimensions.width * .001,
+    },
     progressCompleted: {
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
     },

package/src/components/CollectionCard/index.js

@@ -2,7 +2,6 @@ import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 import React, { memo } from 'react';
-import { getScreenPercentageWidth } from '../../utils/index';
 import {
   CollectionTitle,
   PrimaryStoryCard,
@@ -42,7 +41,6 @@ const CollectionCardBase = ({
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
         iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
-        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
         horizontalPadding={horizontalPadding}
       />
       {stories.slice(1, sliceLimit).map((currentStory) => {
@@ -55,7 +53,6 @@ const CollectionCardBase = ({
             cdn={cdn}
             story={secondaryStory}
             iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-            imageWidth={getScreenPercentageWidth(28)}
             horizontalPadding={horizontalPadding}
           />
         );

package/src/components/JSEmbedElement/index.js

@@ -2,7 +2,7 @@ import { decode as atob } from 'base-64';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { STORY_ELEMENT_SUBTYPES } from '../../constants/cardConstants';
 
@@ -37,7 +37,7 @@ const removeWidthnHeight = (htmlContent) => {
 };
 
 const getHTMLContent = (embedJs) => {
-  const { width } = Dimensions.get('window');
+  const width = useWindowDimensions().width;
   const decodedContent = getDecodedContent(embedJs);
   let htmlContent = replaceDefaultProtocol(decodedContent);
   htmlContent = removeWidthnHeight(htmlContent);
@@ -77,10 +77,11 @@ const getHTMLContent = (embedJs) => {
 export const JSEmbedElement = (props) => {
   const [height, setHeight] = useState(-1);
   const webViewRef = useRef(null);
+  const screenWidth = useWindowDimensions().width;
   const width = get(
     props,
     ['currentLayout', 'width'],
-    Dimensions.get('window').width,
+    screenWidth,
   );
 
   useEffect(() => {

package/src/components/LightBox/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  Dimensions, Image, Modal, SafeAreaView, TouchableOpacity, View,
+  useWindowDimensions, Image, Modal, SafeAreaView, TouchableOpacity, View,
 } from 'react-native';
 import ImageZoom from 'react-native-image-pan-zoom';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -13,7 +13,7 @@ export const LightBox = ({ visible, imageUri, closeModal }) => {
   const { COLORS, DARK_MODE } = theme;
   const styles = lightBoxStyles();
 
-  const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const imageZoomHeight = screenHeight - 80;
 
   return (

package/src/components/LightBoxImage/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { getImageHeight } from '../../utils';
 import { LightBox } from '../LightBox';
 import { ResponsiveImage } from '../ResponsiveImage';
@@ -11,8 +11,9 @@ export const LightBoxImage = ({
   const {
     cdn, slug, metaData, imageWidth: previewWidth,
   } = data;
+  const screenWidth = useWindowDimensions().width;
   const { width, height } = metaData || {};
-  const imageHeight = getImageHeight(width, height);
+  const imageHeight = getImageHeight(width, height, screenWidth);
   const imageUri = `${data?.cdn}/${data?.slug}`;
   const [showModal, setShowModal] = useState(false);
 

package/src/components/PrimaryStoryCard/index.js

@@ -1,7 +1,7 @@
 import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { memo, useContext } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, useWindowDimensions } from 'react-native';
 import PremiumIcons from '../../Icons/PremiumIcons/index';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -36,8 +36,9 @@ const PrimaryStoryCardBase = (props) => {
   ]);
 
   const isPremiumStory = story['access'] === 'subscription';
-
   const throttledOnpress = throttle(props.onPress, 1000);
+  const screenWidth = useWindowDimensions().width;
+  const imageWidth = screenWidth - 2 * props.horizontalPadding;
 
   return (
     <>
@@ -51,7 +52,7 @@ const PrimaryStoryCardBase = (props) => {
         metaData={getImageMetadata(story)}
         slug={getImageSlug(story)}
         cdn={props.cdn}
-        imageWidth={props.imageWidth}
+        imageWidth={imageWidth}
       >
         <View style={styles.storyTypeContainer}>
           <StoryTemplateIcon storyTemplate={story['story-template']} cardType="primary" theme={theme} />
@@ -89,7 +90,6 @@ const PrimaryStoryCardBase = (props) => {
 
 PrimaryStoryCardBase.propTypes = {
   cdn: PropTypes.string,
-  imageWidth: PropTypes.number,
   headlineStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,

package/src/components/RelatedStoriesCard/index.js

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { Text, View ,I18nManager} from 'react-native';
-import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
+import { AppTheme } from '../../utils/index';
 import { SecondaryStoryCard, ShareButton } from '../index';
 
 import { relatedStoriesStyles } from './styles';
@@ -42,7 +42,6 @@ export const RelatedStoriesCard = ({
             return <SecondaryStoryCard
               {...storyCardProps}
               iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-              imageWidth={getScreenPercentageWidth(28)}
               horizontalPadding={4}
             />
         })}

package/src/components/ResponsiveImage/index.js

@@ -2,17 +2,17 @@ import PropTypes from 'prop-types';
 import React, {
   memo, useCallback, useContext, useState,
 } from 'react';
-import { StyleSheet, View, ImageBackground } from 'react-native';
+import { StyleSheet, View, ImageBackground, useWindowDimensions } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
 import { AppTheme } from '../../utils';
 import {
   getImageURL,
-  getCustomResolutionImageURL,
 } from '../../utils/imageUtils';
 
 const ResponsiveImageBase = (props) => {
+  const screenWidth = useWindowDimensions().width;
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const {
@@ -61,7 +61,7 @@ const ResponsiveImageBase = (props) => {
   );
 
 
-  let imageUrl  = getImageURL(props)
+  let imageUrl  = getImageURL(props, screenWidth);
 
   const userFallback = () => <Icon name="user" size={20} />;
 
@@ -78,7 +78,7 @@ const ResponsiveImageBase = (props) => {
   const onLoadHandler = useCallback(handleImageLoad, []);
 
   const lowestQualitySourceURI = {
-    uri: decodeURIComponent(getImageURL(props,2)),
+    uri: decodeURIComponent(imageUrl),
     priority: FastImage.priority.high,
   }
 

package/src/components/SecondaryStoryCard/index.js

@@ -7,6 +7,7 @@ import {
   View,
   TextStyle,
   TouchableOpacityProps,
+  useWindowDimensions,
 } from 'react-native';
 import {
   AppTheme,
@@ -43,8 +44,9 @@ const SecondaryStoryCardBase = (props) => {
   ]);
 
   const isPremiumStory = story['access'] === 'subscription';
-
   const throttledOnpress = throttle(props.onPress, 1000);
+  const screenWidth = useWindowDimensions().width;
+  const imageWidth = screenWidth * .28;
 
   return (
     <>
@@ -60,7 +62,7 @@ const SecondaryStoryCardBase = (props) => {
             metaData={getImageMetadata(story)}
             slug={getImageSlug(story) || ''}
             cdn={props.cdn || ''}
-            imageWidth={props.imageWidth}
+            imageWidth={imageWidth}
           >
             <View style={styles.storyTypeContainer}>
               <StoryTemplateIcon storyTemplate={story['story-template']} theme={theme} />
@@ -98,7 +100,6 @@ const SecondaryStoryCardBase = (props) => {
 
 SecondaryStoryCardBase.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
-  imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,

package/src/components/SlideshowStoryCard/index.js

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import {
   AppTheme,
-  getScreenPercentageWidth,
   stripHTML,
 } from '../../utils/index';
 import { Text } from '../index';
@@ -14,11 +13,12 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
   const attribution = card['image-attribution'];
   const { title } = card;
   const { theme } = useContext(AppTheme);
-  const styles = slideshowStoryCardStyles(theme);
+  const screenWidth = useWindowDimensions().width;
+  const styles = slideshowStoryCardStyles(theme, screenWidth);
   const imgData = {
     cdn,
     slug: card['image-s3-key'],
-    imageWidth: getScreenPercentageWidth(100),
+    imageWidth: screenWidth,
     metaData: card['image-metadata'],
   };
 

package/src/components/SlideshowStoryCard/styles.js

@@ -1,8 +1,6 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-const { width } = Dimensions.get('window');
-
-export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.create({
+export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }, screenWidth) => StyleSheet.create({
   textContainer: {
     paddingHorizontal: 10,
     flexDirection: 'column',
@@ -16,7 +14,7 @@ export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.
   },
   container: {
     flexDirection: 'column',
-    width,
+    width: screenWidth,
   },
   attributionText: {
     color: COLORS.BRAND_BLACK,

package/src/components/StoryGallery/index.js

@@ -7,6 +7,7 @@ import {
   FlatList,
   TouchableOpacity,
   ScrollView,
+  useWindowDimensions,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import FastImage from 'react-native-fast-image';
@@ -18,7 +19,8 @@ import { LightBoxImage } from '../LightBoxImage';
 export const StoryGallery = ({ cdn, card }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS, DARK_MODE } = theme;
-  const galleryStyles = styles(theme);
+  const screenDimensions = useWindowDimensions();
+  const galleryStyles = styles(theme, screenDimensions);
   const storyElements = card['story-elements'];
   const [showModal, setShowModal] = useState(false);
 

package/src/components/StoryGallery/styles.js

@@ -1,9 +1,9 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useContext } from 'react';
 import { AppTheme } from '../../utils';
 
-export const styles = ({ FONT_SIZE }) => {
-  const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
+export const styles = ({ FONT_SIZE }, screenDimensions) => {
+  const { width: deviceWidth, height: deviceHeight } = screenDimensions;
   const { theme } = useContext(AppTheme);
   const { COLORS, DARK_MODE, FONT_FAMILY } = theme;
 

package/src/components/StoryHeader/index.js

@@ -1,12 +1,11 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 import {
   AppTheme,
   getImageMetadata,
-  getScreenPercentageWidth,
   getTimeInFormat
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
@@ -25,12 +24,14 @@ const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
 
+  const screenWidth = useWindowDimensions().width;
+
   return (
     <ResponsiveImage
       cdn={cdn}
       metaData={getImageMetadata(story)}
       slug={imageSlug}
-      imageWidth={getScreenPercentageWidth(100)}
+      imageWidth={screenWidth}
     />
   );
 };

package/src/components/StoryImage/index.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import { ShareButton } from '../index';
-import { AppTheme, getScreenPercentageWidth, stripHTML } from '../../utils';
+import { AppTheme, stripHTML } from '../../utils';
 import { Text } from '../index';
 import { LightBoxImage } from '../LightBoxImage';
 import { storyImageStyles } from './styles';
@@ -13,15 +13,16 @@ export const StoryImage = ({
   const slug = `?cardId=${card.id}`;
   const sharePhotoCard = storyType === 'photo';
   const { theme } = useContext(AppTheme);
+  const screenWidth = useWindowDimensions().width;
 
   const imageData = {
     cdn,
     slug: card['image-s3-key'],
     metaData: card['image-metadata'],
-    imageWidth: getScreenPercentageWidth(100),
+    imageWidth: screenWidth,
   };
 
-  const styles = storyImageStyles(theme, imageData.metaData);
+  const styles = storyImageStyles(theme, imageData.metaData, screenWidth);
 
   return (
     <>

package/src/components/StoryImage/styles.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
 import { getImageHeight } from '../../utils';
 
-export const storyImageStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }, metadata = {}) => {
+export const storyImageStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }, metadata = {}, screenWidth) => {
   const { width, height } = metadata || {};
-  const imageHeight = getImageHeight(width, height);
+  const imageHeight = getImageHeight(width, height, screenWidth);
 
   return StyleSheet.create({
     image: {

package/src/components/StorySlideshow/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { TouchableOpacity, View, FlatList } from 'react-native';
+import { TouchableOpacity, View, FlatList, useWindowDimensions } from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
 import { AppTheme } from '../../utils';
 import { SlideshowStoryCard } from '../SlideshowStoryCard';
@@ -9,7 +9,8 @@ import { storySlideshowStyles } from './styles';
 export const StorySlideshow = ({ card, cdn }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS } = theme;
-  const styles = storySlideshowStyles(theme);
+  const screenWidth = useWindowDimensions().width;
+  const styles = storySlideshowStyles(theme, screenWidth);
   const [currentIndex, setCurrentTabIndex] = useState(0);
 
   const flatlistRef = useRef();

package/src/components/StorySlideshow/styles.js

@@ -1,8 +1,6 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-const { width } = Dimensions.get('window');
-
-export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
+export const storySlideshowStyles = ({ COLORS }, screenWidth) => StyleSheet.create({
   cardsContainer: {
     marginTop: 10,
     position: 'relative',
@@ -10,7 +8,7 @@ export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
   leftArrow: {
     position: 'absolute',
     marginTop: -20,
-    top: width * 0.28125, // width * 9/16 / 2
+    top: screenWidth * 0.28125, // screenWidth * 9/16 / 2
     left: 0,
     zIndex: 999,
     width: 40,
@@ -23,7 +21,7 @@ export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
   rightArrow: {
     position: 'absolute',
     marginTop: -20,
-    top: width * 0.28125, // width * 9/16 / 2
+    top: screenWidth * 0.28125, // screenWidth * 9/16 / 2
     right: 0,
     zIndex: 999,
     width: 40,

package/src/components/YouTubePlayer/index.js

@@ -1,13 +1,13 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { View, Dimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import { WebView } from "react-native-webview";
 
 export const YouTubePlayer = ({ card = {} }) => {
   const ytEmbedURL = card['embed-url'];
   if (!ytEmbedURL) return null;
 
-  const windowWidth = Dimensions.get("window").width;
+  const windowWidth = useWindowDimensions().width;
   const styles = webviewStyles(windowWidth);
 
   const getYoutubeIframe = (ytEmbedURL) => {

package/src/components/index.js

@@ -40,7 +40,7 @@ export { IconText } from './IconText';
 export { CustomSwitch } from './CustomSwitch';
 export { RelatedStoriesCard } from './RelatedStoriesCard';
 export { References } from './References';
-export { StoryTemplateIcon } from './StoryTemplateIcon'
+export { StoryTemplateIcon } from './StoryTemplateIcon';
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
-export { TextA } from './TextA'
-export { TextQ } from './TextQ'
+export { TextA } from './TextA';
+export { TextQ } from './TextQ';

package/src/utils/imageUtils.js

@@ -1,11 +1,9 @@
 import { useContext } from 'react';
-import { PixelRatio, Dimensions } from 'react-native';
+import { PixelRatio } from 'react-native';
 import { FocusedImage } from 'quintype-js';
 import get from 'lodash/get';
 import { AppTheme } from '.';
 
-const { width: deviceWidth } = Dimensions.get('window');
-
 /**
  |--------------------------------------------------
  | Gets a higher resolution image if you are on a high pixel density device.
@@ -40,28 +38,18 @@ export function getImageQuality() {
   return 30;
 }
 
-/**
- |--------------------------------------------------
- | Gets the percentage width based on device width
- |--------------------------------------------------
- */
-
-export function getScreenPercentageWidth(percentage) {
-  return Math.round(0.01 * percentage * deviceWidth);
-}
-
 /**
  |--------------------------------------------------
  | Gets image height based on device width
  |--------------------------------------------------
  */
 
-export function getImageHeight(imageWidth, imageHeight) {
+export function getImageHeight(imageWidth, imageHeight, screenWidth) {
   /* Return back a default size if either of the params are falsy */
   if (!imageHeight || !imageWidth) {
     return 250;
   }
-  const ratio = deviceWidth / imageWidth;
+  const ratio = screenWidth / imageWidth;
   return imageHeight * ratio;
 }
 
@@ -105,7 +93,7 @@ export function getImageMetadata(story = {}) {
 /**
  * Returns an ImageURL
  */
-export const getImageURL = (props) => {
+export const getImageURL = (props, screenWidth) => {
   const { theme } = useContext(AppTheme);
   const { IMAGE_QUALITY } = theme;
 
@@ -113,26 +101,9 @@ export const getImageURL = (props) => {
     aspectRatio, metaData, slug, imageWidth, cdn,
   } = props;
   const image = new FocusedImage(slug, metaData);
-
   const imageCdn = cdn || 'https://www.quintype.com';
   return `${imageCdn}/${image.path(aspectRatio || [16, 9], {
-    w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
-    q: IMAGE_QUALITY,
-  })}`;
-};
-
-export const getCustomResolutionImageURL = (props, customAspectRatio) => {
-  const { theme } = useContext(AppTheme);
-  const { IMAGE_QUALITY } = theme;
-
-  const {
-    metaData, slug, imageWidth, cdn,
-  } = props;
-  const image = new FocusedImage(slug, metaData);
-
-  const imageCdn = cdn || 'https://www.quintype.com';
-  return `${imageCdn}/${image.path(customAspectRatio, {
-    w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
+    w: getPixelRatioForDevice(imageWidth) || Math.round(screenWidth),
     q: IMAGE_QUALITY,
   })}`;
 };

package/src/utils/screenUtils.js

@@ -1,6 +1,5 @@
 import get from "lodash/get";
 import { useNavigationState } from "@react-navigation/native";
-import { Dimensions } from "react-native";
 
 export const getScreenCount = (screenName) => {
   /* Note: To figure out if there are screen instances in the stack */
@@ -12,15 +11,3 @@ export const getScreenCount = (screenName) => {
     return acc;
   }, 0);
 };
-
-export const ResponsiveHeight = (height) => {
-  const deviceHeight = Dimensions.get("window").height;
-  const responsiveHeight = (deviceHeight * height) / 1000;
-  return responsiveHeight;
-};
-
-export const ResponsiveWidth = (width) => {
-  const deviceWidth = Dimensions.get("window").width;
-  const responsiveWidth = (deviceWidth * width) / 1000;
-  return responsiveWidth;
-};