@quintype/native-components 2.20.6 → 2.20.7

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.20.7](https://github.com/quintype/native-components/compare/v2.20.6...v2.20.7) (2023-06-16)
+
+
+### Bug Fixes
+
+* **images:** Fixes crop issues and adds rich-text support for attribution ([#201](https://github.com/quintype/native-components/issues/201)) ([c0a5ca0](https://github.com/quintype/native-components/commit/c0a5ca0f593f1ce3459ae0fcc2aba3f06f21e053))
+
 ### [2.20.6](https://github.com/quintype/native-components/compare/v2.20.5...v2.20.6) (2023-06-15)
 
 ### [2.20.5](https://github.com/quintype/native-components/compare/v2.20.4...v2.20.5) (2023-03-21)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.6",
+  "version": "2.20.7",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/JSEmbedElement/index.js

@@ -18,26 +18,29 @@ const replaceDefaultProtocol = (content) => {
 };
 
 const removeWidthnHeight = (htmlContent) => {
-  let temp = htmlContent.split(' ');
+  const temp = htmlContent.split(' ');
   let finalHtml = '';
-  if(temp[0]==='<iframe'){
-    for(let i=0; i<temp.length; i++){
-      if((temp[i].includes('width') || temp[i].includes('height')) && !temp[i].includes('/')){
+  if (temp[0] === '<iframe') {
+    for (let i = 0; i < temp.length; i++) {
+      if (
+        (temp[i].includes('width') || temp[i].includes('height'))
+        && !temp[i].includes('/')
+      ) {
         continue;
       }
-      finalHtml = finalHtml + temp[i] + " ";
+      finalHtml = `${finalHtml + temp[i]} `;
     }
 
     return finalHtml;
   }
   return htmlContent;
-}
+};
 
 const getHTMLContent = (embedJs) => {
-  const width =  Dimensions.get('window').width;
+  const { width } = Dimensions.get('window');
   const decodedContent = getDecodedContent(embedJs);
-  let htmlContent = replaceDefaultProtocol(decodedContent)
-  htmlContent = removeWidthnHeight(htmlContent)
+  let htmlContent = replaceDefaultProtocol(decodedContent);
+  htmlContent = removeWidthnHeight(htmlContent);
   const webViewScript = `
     <script type="application/javascript">
         var interValId;
@@ -60,8 +63,8 @@ const getHTMLContent = (embedJs) => {
                     <meta name="viewport" content="width=device-width, initial-scale=1">
                     <style>
                       iframe{
-                        width:${width-20}px;
-                        height:${width-20}px;
+                        width:${width - 20}px;
+                        height:${width - 20}px;
                       }
                     </style>
                 </head>
@@ -75,7 +78,11 @@ const getHTMLContent = (embedJs) => {
 export const JSEmbedElement = (props) => {
   const [height, setHeight] = useState(300);
   const webViewRef = useRef(null);
-  const width = get(props, ['currentLayout', 'width'], Dimensions.get('window').width);
+  const width = get(
+    props,
+    ['currentLayout', 'width'],
+    Dimensions.get('window').width,
+  );
 
   useEffect(() => {
     webViewRef?.current?.reload();
@@ -94,10 +101,10 @@ export const JSEmbedElement = (props) => {
 
     const baseUrl = urlMapper[props.element.subtype] || 'https://twitter.com';
 
-    return ({
+    return {
       html: getHTMLContent(props.element['embed-js']),
       baseUrl,
-    });
+    };
   };
 
   return (
@@ -105,7 +112,10 @@ export const JSEmbedElement = (props) => {
       <WebView
         ref={webViewRef}
         style={{
-          width, height, flex: 0, opacity: 0.99,
+          width,
+          height,
+          flex: 0,
+          opacity: 0.99,
         }}
         automaticallyAdjustContentInsets={false}
         scrollEnabled={false}

package/src/components/LightBoxImage/index.js

@@ -6,20 +6,23 @@ import { LightBox } from '../LightBox';
 import { getImageHeight } from '../../utils';
 
 export const LightBoxImage = ({
-  data, hero, currentLayout, additionalStyles, elementType, onClickHandler = ()=>{}, index
+  data, hero, currentLayout, additionalStyles, elementType, onClickHandler = () => {}, index,
 }) => {
-  const { cdn, slug, metaData } = data;
+  const {
+    cdn, slug, metaData, imageWidth: previewWidth,
+  } = data;
   const { width, height } = metaData || {};
   const imageHeight = getImageHeight(width, height);
   const imageUri = `${data?.cdn}/${data?.slug}`;
   const [showModal, setShowModal] = useState(false);
 
   const toggleModal = () => {
-    if(elementType === 'gallery'){
+    if (elementType === 'gallery') {
       onClickHandler(index);
-    } else{
-      setShowModal(!showModal)
-    }};
+    } else {
+      setShowModal(!showModal);
+    }
+  };
 
   const styles = {
     image: {
@@ -39,7 +42,8 @@ export const LightBoxImage = ({
           metaData={metaData}
           hero={hero || false}
           styles={cumulativeStyles}
-          elementType={elementType ? elementType : null}
+          imageWidth={previewWidth}
+          elementType={elementType || null}
         />
       </TouchableOpacity>
     </>
@@ -47,9 +51,11 @@ export const LightBoxImage = ({
 };
 
 LightBoxImage.propTypes = {
-  children: PropTypes.element,
   data: PropTypes.object,
   hero: PropTypes.bool,
   currentLayout: PropTypes.object,
   additionalStyles: PropTypes.object,
+  elementType: PropTypes.string,
+  onClickHandler: PropTypes.func,
+  index: PropTypes.number,
 };

package/src/components/ResponsiveImage/index.js

@@ -5,18 +5,18 @@ import React, {
 import { StyleSheet, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { isTablet } from 'react-native-device-info';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
 import { AppTheme } from '../../utils';
-import { getImageURL, getCustomResolutionImageURL } from '../../utils/imageUtils';
+import {
+  getImageURL,
+  getCustomResolutionImageURL,
+} from '../../utils/imageUtils';
 
 const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const { COLORS, CustomFallBackIcon, CustomFallBackBackground } = theme;
 
-  const HERO_IMAGE_HEIGHT = isTablet() ? 300 : 232;
-
   const flattenedImageStyle = StyleSheet.flatten([
     styles.defaultImage,
     props.styles,
@@ -24,15 +24,9 @@ const ResponsiveImageBase = (props) => {
       width: props.imageWidth,
       height: (props.imageWidth * 9) / 16,
     },
-    (props.hero && props?.elementType !== 'gallery' ) && {
-      width: '100%',
-      height: HERO_IMAGE_HEIGHT,
-      alignSelf: 'stretch',
-    },
     props?.elementType === 'gallery' && {
-      backgroundColor: COLORS.BRAND_BLACK
-    }
-
+      backgroundColor: COLORS.BRAND_BLACK,
+    },
   ]);
 
   const placeholderStyle = {
@@ -48,9 +42,9 @@ const ResponsiveImageBase = (props) => {
     <FallbackIcon />
   );
 
-  let imageUrl = ''
+  let imageUrl = '';
 
-  if(props?.elementType === 'gallery'){
+  if (props?.elementType === 'gallery') {
     imageUrl = getCustomResolutionImageURL(props, [1, 1]);
   } else {
     imageUrl = getImageURL(props);
@@ -82,7 +76,7 @@ const ResponsiveImageBase = (props) => {
         style={flattenedImageStyle}
         source={sourceURI}
         onLoad={onLoadHandler}
-        resizeMode={props.hero ? FastImage.resizeMode.cover : FastImage.resizeMode.contain}
+        resizeMode={props?.elementType === 'gallery' && !(props.hero) ? FastImage.resizeMode.contain : FastImage.resizeMode.cover}
         {...props}
       />
       {placeholder && (
@@ -105,6 +99,7 @@ ResponsiveImageBase.propTypes = {
   testID: PropTypes.string,
   containerTestID: PropTypes.string,
   imageWidth: PropTypes.number,
+  elementType: PropTypes.string,
 };
 
 ResponsiveImageBase.defaultProps = {

package/src/components/SlideshowStoryCard/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { Text, View } from 'react-native';
+import { View, Linking } from 'react-native';
+import HTML from 'react-native-render-html';
 import { AppTheme, getScreenPercentageWidth } from '../../utils/index';
 import { LightBoxImage } from '../LightBoxImage';
 import { slideshowStoryCardStyles } from './styles';
@@ -9,26 +10,37 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
   const attribution = card['image-attribution'];
   const { title } = card;
   const { theme } = useContext(AppTheme);
-  const displayDivider = attribution && title ? ' | ' : '';
-  const styles = slideshowStoryCardStyles(theme)
+  const { CAN_COPY_TEXT } = theme;
+  const styles = slideshowStoryCardStyles(theme);
   const imgData = {
     cdn,
     slug: card['image-s3-key'],
-    imageWidth: getScreenPercentageWidth(60),
+    imageWidth: getScreenPercentageWidth(100),
     metaData: card['image-metadata'],
   };
 
   return (
     <View style={styles.container}>
-      <View style={styles.image}>
-        <LightBoxImage data={imgData} hero />
-      </View>
-
+      <LightBoxImage data={imgData} />
       <View style={styles.textContainer}>
-        <Text style={styles.attributionText} lato>
-          {`${attribution}${displayDivider}`}
-          <Text style={styles.cardTitleText}>{`${title}`}</Text>
-        </Text>
+        <HTML
+          html={title}
+          textSelectable={CAN_COPY_TEXT}
+          key={Math.random()}
+          baseFontStyle={styles.cardTitleText}
+          onLinkPress={(e, href) => {
+            Linking.openURL(href);
+          }}
+        />
+        <HTML
+          html={attribution}
+          textSelectable={CAN_COPY_TEXT}
+          key={Math.random()}
+          baseFontStyle={styles.attributionText}
+          onLinkPress={(e, href) => {
+            Linking.openURL(href);
+          }}
+        />
       </View>
     </View>
   );
@@ -37,5 +49,4 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
 SlideshowStoryCard.propTypes = {
   cdn: PropTypes.string.isRequired,
   card: PropTypes.object,
-  imageSize: PropTypes.object,
 };

package/src/components/SlideshowStoryCard/styles.js

@@ -1,28 +1,26 @@
 import { StyleSheet, Dimensions } from 'react-native';
-import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
+
 const { width } = Dimensions.get('window');
 
-export const slideshowStoryCardStyles = ({ COLORS }) => {
-  return StyleSheet.create({
-    image: {
-      marginRight: 10,
-      width,
-    },
-    textContainer: {
-      marginTop: 10,
-      opacity: 0.8,
-      width,
-    },
-    cardTitleText: {
-      opacity: 0.7,
-      color: COLORS.BRAND_BLACK
-    },
-    container: {
-      flexDirection: 'column',
-    },
-    attributionText: {
-      color: COLORS.BRAND_BLACK,
-      textAlign : COMP_GENERAL_CONSTANTS.textAlignment
-    }
-  })
-}
+export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.create({
+  textContainer: {
+    paddingHorizontal: 10,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    marginTop: 10,
+  },
+  cardTitleText: {
+    opacity: 0.7,
+    color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
+  },
+  container: {
+    flexDirection: 'column',
+    width,
+  },
+  attributionText: {
+    color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
+    opacity: 0.8,
+  },
+});

package/src/components/StoryGallery/index.js

@@ -1,17 +1,24 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useState, useRef } from 'react';
-import { View, Modal, SafeAreaView, Dimensions, Image, FlatList, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Modal,
+  Linking,
+  SafeAreaView,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import FastImage from 'react-native-fast-image';
+import HTML from 'react-native-render-html';
 import { styles } from './styles';
 import { Text } from '../index';
-import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
+import { AppTheme } from '../../utils/index';
 import { LightBoxImage } from '../LightBoxImage';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import FastImage from 'react-native-fast-image';
-import { resolve } from 'path-browserify';
 
 export const StoryGallery = ({ cdn, card }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, DARK_MODE } = theme;
+  const { COLORS, DARK_MODE, CAN_COPY_TEXT } = theme;
   const galleryStyles = styles(theme);
   const storyElements = card['story-elements'];
   const [showModal, setShowModal] = useState(false);
@@ -20,34 +27,38 @@ export const StoryGallery = ({ cdn, card }) => {
 
   const flatlistRef = useRef();
   const [index, setIndex] = useState(0);
-  const totalSlides = card["story-elements"]?.length;
+  const totalSlides = card['story-elements']?.length;
   const lastSlide = currentIndex + 1 === totalSlides;
   const firstSlide = currentIndex === 0;
   const [galleryLastImgUrl, setGalleryLastImageUrl] = useState('');
 
   const onPressHandler = (index = 5) => {
-    setIndex(index)
+    setIndex(index);
     setShowModal(true);
-  }
+  };
 
   const moveNext = () => {
     if (!lastSlide) {
-      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1))});
+      flatlistRef.current.scrollToIndex({
+        index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1)),
+      });
       setCurrentTabIndex(currentIndex + 1);
     }
   };
 
   const movePrev = () => {
     if (!firstSlide) {
-      flatlistRef.current.scrollToIndex({ index: Math.ceil(Math.max(currentIndex - 1, 0)) });
+      flatlistRef.current.scrollToIndex({
+        index: Math.ceil(Math.max(currentIndex - 1, 0)),
+      });
       setCurrentTabIndex(Math.max(currentIndex - 1, 0));
     }
   };
 
   const showArrow = (direction) => {
-    const arrowStyles = direction === "left" ? galleryStyles.leftArrow : galleryStyles.rightArrow;
-    const onPressHandler = direction === "left" ? movePrev : moveNext;
-    const iconName = direction === "left" ? 'chevron-left' : 'chevron-right'
+    const arrowStyles = direction === 'left' ? galleryStyles.leftArrow : galleryStyles.rightArrow;
+    const onPressHandler = direction === 'left' ? movePrev : moveNext;
+    const iconName = direction === 'left' ? 'chevron-left' : 'chevron-right';
     return (
       <View style={arrowStyles}>
         <TouchableOpacity onPress={onPressHandler}>
@@ -61,23 +72,26 @@ export const StoryGallery = ({ cdn, card }) => {
     const xOffset = event.nativeEvent?.contentOffset?.x;
     const contentWidth = event.nativeEvent?.contentSize?.width;
     const layoutWidth = event.nativeEvent?.layoutMeasurement?.width;
-    const value = (xOffset / contentWidth);
-    const leftThreshold = contentWidth / ( 2 * totalSlides );
-    const rightThreshold = contentWidth - ( 1.5 ) * layoutWidth;
-
-    if((leftThreshold <= xOffset && (layoutWidth > xOffset || rightThreshold > xOffset ))){
+    const value = xOffset / contentWidth;
+    const leftThreshold = contentWidth / (2 * totalSlides);
+    const rightThreshold = contentWidth - 1.5 * layoutWidth;
+
+    if (
+      leftThreshold <= xOffset
+      && (layoutWidth > xOffset || rightThreshold > xOffset)
+    ) {
       setCurrentTabIndex(value * totalSlides);
-    } else if(xOffset < leftThreshold){
+    } else if (xOffset < leftThreshold) {
       setCurrentTabIndex(0);
-    } else if(xOffset >= rightThreshold){
-      setCurrentTabIndex(totalSlides-1);
+    } else if (xOffset >= rightThreshold) {
+      setCurrentTabIndex(totalSlides - 1);
     }
-  }
+  };
 
   const closeModalHandler = () => {
     setShowModal(false);
     setCurrentTabIndex(0);
-  }
+  };
 
   const renderItem = (item) => {
     const data = {
@@ -85,20 +99,38 @@ export const StoryGallery = ({ cdn, card }) => {
       slug: item.item['image-s3-key'],
       metaData: item.item['image-metadata'],
     };
-
+    const { title } = item.item;
+    const attribution = item.item['image-attribution'];
     const imageUri = `${data?.cdn}/${data?.slug}`;
 
-    return <View style={galleryStyles.carouselContainer}>
-      <FastImage
-        source={{uri:imageUri}}
-        resizeMode={FastImage.resizeMode.contain}
-        style={galleryStyles.carouselImage}
-      />
-      <Text primary style={galleryStyles.titleText}>
-        {item.item?.title}
-      </Text>
-    </View>
-  }
+    return (
+      <View style={galleryStyles.carouselContainer}>
+        <FastImage
+          source={{ uri: imageUri }}
+          resizeMode={FastImage.resizeMode.contain}
+          style={galleryStyles.carouselImage}
+        />
+        <HTML
+          html={title}
+          textSelectable={CAN_COPY_TEXT}
+          key={Math.random()}
+          baseFontStyle={galleryStyles.titleText}
+          onLinkPress={(e, href) => {
+            Linking.openURL(href);
+          }}
+        />
+        <HTML
+          html={attribution}
+          textSelectable={CAN_COPY_TEXT}
+          key={Math.random()}
+          baseFontStyle={galleryStyles.attributionText}
+          onLinkPress={(e, href) => {
+            Linking.openURL(href);
+          }}
+        />
+      </View>
+    );
+  };
 
   return (
     <>
@@ -107,35 +139,54 @@ export const StoryGallery = ({ cdn, card }) => {
 
         <View style={galleryStyles.imgContainer}>
           {storyElements.map((element, index) => {
-
             const data = {
               cdn,
               slug: element['image-s3-key'],
               metaData: element['image-metadata'],
-              imageWidth: getScreenPercentageWidth(100),
             };
 
-            if(storyElements.length >6 && index >= 5){
+            if (storyElements.length > 6 && index >= 5) {
               const imageUri = `${data?.cdn}/${data?.slug}`;
-              if(galleryLastImgUrl === ''){
+              if (galleryLastImgUrl === '') {
                 setGalleryLastImageUrl(imageUri);
               }
               return null;
             }
 
             const style = galleryStyles.fullWidth;
-            return <TouchableOpacity>
-                      <LightBoxImage onClickHandler={onPressHandler} hero={data.metaData['focus-point'] ? true : false} key={index} data={data} additionalStyles={style} elementType={card?.metadata?.type} index={index} />
-            </TouchableOpacity>
+            return (
+              <TouchableOpacity>
+                <LightBoxImage
+                  onClickHandler={onPressHandler}
+                  hero={!!data.metaData['focus-point']}
+                  key={Math.random()}
+                  data={data}
+                  additionalStyles={style}
+                  elementType={card?.metadata?.type}
+                  index={index}
+                />
+              </TouchableOpacity>
+            );
           })}
-          {storyElements && storyElements.length > 6 && <TouchableOpacity onPress={()=>onPressHandler(5)} style={[galleryStyles.fullWidth, galleryStyles.showMoreImageContainer]}>
-          <FastImage
-            source={{uri: galleryLastImgUrl}}
-            resizeMode={FastImage.resizeMode.cover}
-            style={galleryStyles.showMoreImage}
-          />
-            <Text style={galleryStyles.showMoreText}>+{storyElements.length-5}</Text>
-          </TouchableOpacity>}
+          {storyElements && storyElements.length > 6 && (
+            <TouchableOpacity
+              onPress={() => onPressHandler(5)}
+              style={[
+                galleryStyles.fullWidth,
+                galleryStyles.showMoreImageContainer,
+              ]}
+            >
+              <FastImage
+                source={{ uri: galleryLastImgUrl }}
+                resizeMode={FastImage.resizeMode.cover}
+                style={galleryStyles.showMoreImage}
+              />
+              <Text style={galleryStyles.showMoreText}>
+                +
+                {storyElements.length - 5}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
         <Text style={galleryStyles.descText} lato>
           {card.description}
@@ -151,34 +202,40 @@ export const StoryGallery = ({ cdn, card }) => {
       >
         <SafeAreaView style={galleryStyles.safeAreaView}>
           <View style={galleryStyles.modalContainer}>
-<TouchableOpacity onPress={closeModalHandler}>
+            <TouchableOpacity onPress={closeModalHandler}>
               <View style={galleryStyles.close}>
-                <Icon name="times" size={20} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
+                <Icon
+                  name="times"
+                  size={20}
+                  color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE}
+                />
               </View>
             </TouchableOpacity>
-          <View style={galleryStyles.wrapper}>
-
-            <FlatList
-              ref={flatlistRef}
-              data={card["story-elements"]}
-              renderItem={renderItem}
-              keyExtractor={(item) => item.id}
-              horizontal
-              extraData={currentIndex}
-              onScroll={handleScroll}
-              initialScrollIndex={index}
-              onScrollToIndexFailed = { info => {
-                const wait = new Promise(resolve=>setTimeout(resolve, 500));
-                wait.then(()=>{
-                  flatlistRef.current?.scrollToIndex({index: info.index, animated: true});
-                });
-              }}
-            />
-
-            {!firstSlide && showArrow("left")}
-
-            {!lastSlide && showArrow("right")}
-          </View>
+            <View style={galleryStyles.wrapper}>
+              <FlatList
+                ref={flatlistRef}
+                data={card['story-elements']}
+                renderItem={renderItem}
+                keyExtractor={(item) => item.id}
+                horizontal
+                extraData={currentIndex}
+                onScroll={handleScroll}
+                initialScrollIndex={index}
+                onScrollToIndexFailed={(info) => {
+                  const wait = new Promise((resolve) => setTimeout(resolve, 500));
+                  wait.then(() => {
+                    flatlistRef.current?.scrollToIndex({
+                      index: info.index,
+                      animated: true,
+                    });
+                  });
+                }}
+              />
+
+              {!firstSlide && showArrow('left')}
+
+              {!lastSlide && showArrow('right')}
+            </View>
           </View>
         </SafeAreaView>
       </Modal>

package/src/components/StoryGallery/styles.js

@@ -1,131 +1,134 @@
 import { StyleSheet, Dimensions } from 'react-native';
 import { useContext } from 'react';
-import { isTablet } from 'react-native-device-info';
 import { AppTheme } from '../../utils';
 
-
 export const styles = ({ FONT_SIZE }) => {
   const { width: deviceWidth } = Dimensions.get('window');
   const { theme } = useContext(AppTheme);
-  const { COLORS, DARK_MODE } = theme;
+  const { COLORS, DARK_MODE, FONT_FAMILY } = theme;
 
   return StyleSheet.create({
-  container: {
-    width: '100%',
-    paddingHorizontal: 10,
-  },
-  titleText: {
-    fontSize: FONT_SIZE.h1,
-    marginBottom: 10,
-    opacity: 0.8,
-  },
-  imgContainer: {
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-  },
-  halfWidth: {
-    width: (deviceWidth - 30) / 2,
-    height: 124,
-  },
-  fullWidth: {
-    width: (deviceWidth - 30) / 3,
-    height: (deviceWidth - 30) / 3,
-    marginVertical: 2.5,
-  },
-  descText: {
-    fontSize: FONT_SIZE.h2,
-    opacity: 0.8,
-    paddingTop: 10,
-  },
-  modalContainer: {
-    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_BLACK,
-    flex: 1,
-    justifyContent: 'center',
-  },
-  safeAreaView: {
-    flex: 1,
-    backgroundColor: 'transparent',
-  },
-  close: {
-    justifyContent: 'flex-start',
-    padding: 10,
-    height: 40,
-    zIndex: 1,
-    marginTop: 25,
-  },
-  imageContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    height: '100%',
-  },
-  portrait: {
-    width: '100%',
-    height: '80%',
-  },
-  wrapper: {
-    paddingHorizontal: 10,
-    flex:1,
-    backgroundColor:'black',
-    width:'100%'
-  },
-  titleText: {
-    fontWeight: "normal",
-    marginBottom: 10,
-    fontSize: FONT_SIZE.h3,
-    opacity: 0.8,
-    color:'white',
-    marginTop:10,
-    marginHorizontal:10
-  },
-  leftArrow: {
-    position: "absolute",
-    top: "46%",
-    right: "95%",
-    left: 20,
-    zIndex: 999,
-    width: 30,
-    height: 40,
-    backgroundColor: COLORS.TRANSPARENT_BLACK,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  rightArrow: {
-    position: "absolute",
-    top: "46%",
-    left: "93%",
-    right: 20,
-    zIndex: 999,
-    width: 30,
-    height: 40,
-    backgroundColor: COLORS.TRANSPARENT_BLACK,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  carouselImage: {
-    width: '100%',
-    height: '80%'
-  },
-  carouselContainer:{
-    width: deviceWidth - 10,
-    margin: 10
-  },
-  showMoreImageContainer:{
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  showMoreImage:{
-    width: '100%',
-    height: '100%',
-    opacity: 0.5
-  },
-  showMoreText:{
-    fontSize: 30,
-    position: 'absolute',
-    color: COLORS.BRAND_WHITE
-  }
-})};
+    container: {
+      width: '100%',
+      paddingHorizontal: 10,
+    },
+    imgContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+    },
+    halfWidth: {
+      width: (deviceWidth - 30) / 2,
+      height: 124,
+    },
+    fullWidth: {
+      width: (deviceWidth - 30) / 3,
+      height: (deviceWidth - 30) / 3,
+      marginVertical: 2.5,
+    },
+    descText: {
+      fontSize: FONT_SIZE.h2,
+      opacity: 0.8,
+      paddingTop: 10,
+    },
+    modalContainer: {
+      backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_BLACK,
+      flex: 1,
+      justifyContent: 'center',
+    },
+    safeAreaView: {
+      flex: 1,
+      backgroundColor: 'transparent',
+    },
+    close: {
+      justifyContent: 'flex-start',
+      padding: 10,
+      height: 40,
+      zIndex: 1,
+      marginTop: 25,
+    },
+    imageContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+    },
+    portrait: {
+      width: '100%',
+      height: '80%',
+    },
+    wrapper: {
+      paddingHorizontal: 10,
+      flex: 1,
+      backgroundColor: 'black',
+      width: '100%',
+    },
+    titleText: {
+      fontWeight: 'normal',
+      fontSize: FONT_SIZE.h3,
+      opacity: 0.8,
+      color: 'white',
+      marginTop: 10,
+      marginHorizontal: 10,
+      fontFamily: FONT_FAMILY.secondary,
+    },
+    attributionText: {
+      fontWeight: 'normal',
+      marginBottom: 10,
+      fontSize: FONT_SIZE.h3,
+      opacity: 0.8,
+      color: 'white',
+      marginHorizontal: 10,
+      fontFamily: FONT_FAMILY.secondary,
+    },
+    leftArrow: {
+      position: 'absolute',
+      top: '46%',
+      right: '95%',
+      left: 20,
+      zIndex: 999,
+      width: 30,
+      height: 40,
+      backgroundColor: COLORS.TRANSPARENT_BLACK,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    rightArrow: {
+      position: 'absolute',
+      top: '46%',
+      left: '93%',
+      right: 20,
+      zIndex: 999,
+      width: 30,
+      height: 40,
+      backgroundColor: COLORS.TRANSPARENT_BLACK,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    carouselImage: {
+      width: '100%',
+      height: '80%',
+    },
+    carouselContainer: {
+      width: deviceWidth - 10,
+      margin: 10,
+    },
+    showMoreImageContainer: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    showMoreImage: {
+      width: '100%',
+      height: '100%',
+      opacity: 0.5,
+    },
+    showMoreText: {
+      fontSize: 30,
+      position: 'absolute',
+      color: COLORS.BRAND_WHITE,
+    },
+  });
+};

package/src/components/StoryHeader/index.js

@@ -33,7 +33,6 @@ const getHeroImage = (cdn, story) => {
       metaData={getImageMetadata(story)}
       slug={imageSlug}
       imageWidth={getScreenPercentageWidth(100)}
-      hero
     />
   );
 };

package/src/components/StorySlideshow/index.js

@@ -1,12 +1,12 @@
-import PropTypes from "prop-types";
-import React, { useContext, useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
-import Icon from "react-native-vector-icons/AntDesign";
-import { AppTheme } from "../../utils";
-import { Text } from "../index";
-import { SlideshowStoryCard } from "../SlideshowStoryCard";
-import { storySlideshowStyles } from "./styles";
+import PropTypes from 'prop-types';
+import React, { useContext, useRef, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import Icon from 'react-native-vector-icons/AntDesign';
+import { AppTheme } from '../../utils';
+import { Text } from '../index';
+import { SlideshowStoryCard } from '../SlideshowStoryCard';
+import { storySlideshowStyles } from './styles';
 
 export const StorySlideshow = ({ card, cdn }) => {
   const { theme } = useContext(AppTheme);
@@ -16,13 +16,13 @@ export const StorySlideshow = ({ card, cdn }) => {
 
   const flatlistRef = useRef();
 
-  const totalSlides = card["story-elements"]?.length;
+  const totalSlides = card['story-elements']?.length;
   const lastSlide = currentIndex + 1 === totalSlides;
   const firstSlide = currentIndex === 0;
 
   const moveNext = () => {
     if (!lastSlide) {
-      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1))});
+      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1)) });
       setCurrentTabIndex(currentIndex + 1);
     }
   };
@@ -35,9 +35,8 @@ export const StorySlideshow = ({ card, cdn }) => {
   };
 
   const showArrow = (direction) => {
-    const arrowStyles =
-      direction === "left" ? styles.leftArrow : styles.rightArrow;
-    const onPressHandler = direction === "left" ? movePrev : moveNext;
+    const arrowStyles = direction === 'left' ? styles.leftArrow : styles.rightArrow;
+    const onPressHandler = direction === 'left' ? movePrev : moveNext;
 
     return (
       <View style={arrowStyles}>
@@ -53,27 +52,27 @@ export const StorySlideshow = ({ card, cdn }) => {
     const contentWidth = event.nativeEvent?.contentSize?.width;
     const layoutWidth = event.nativeEvent?.layoutMeasurement?.width;
     const value = (xOffset / contentWidth);
-    const leftThreshold = contentWidth / ( 2 * totalSlides );
-    const rightThreshold = contentWidth - ( 1.5 ) * layoutWidth;
+    const leftThreshold = contentWidth / (2 * totalSlides);
+    const rightThreshold = contentWidth - (1.5) * layoutWidth;
 
-    if((leftThreshold <= xOffset && (layoutWidth > xOffset || rightThreshold > xOffset ))){
+    if ((leftThreshold <= xOffset && (layoutWidth > xOffset || rightThreshold > xOffset))) {
       setCurrentTabIndex(value * totalSlides);
-    } else if(xOffset < leftThreshold){
+    } else if (xOffset < leftThreshold) {
       setCurrentTabIndex(0);
-    } else if(xOffset >= rightThreshold){
-      setCurrentTabIndex(totalSlides-1);
+    } else if (xOffset >= rightThreshold) {
+      setCurrentTabIndex(totalSlides - 1);
     }
-  }
+  };
 
   return (
-    <View style={styles.wrapper}>
+    <View>
       <Text primary style={styles.titleText}>
         {card.title}
       </Text>
 
       <FlatList
         ref={flatlistRef}
-        data={card["story-elements"]}
+        data={card['story-elements']}
         renderItem={({ item }) => <SlideshowStoryCard card={item} cdn={cdn} />}
         keyExtractor={(item) => item.id}
         horizontal
@@ -81,9 +80,14 @@ export const StorySlideshow = ({ card, cdn }) => {
         onScroll={handleScroll}
       />
 
-      {!firstSlide && showArrow("left")}
+      {!firstSlide && showArrow('left')}
 
-      {!lastSlide && showArrow("right")}
+      {!lastSlide && showArrow('right')}
     </View>
   );
 };
+
+StorySlideshow.propTypes = {
+  cdn: PropTypes.string,
+  card: PropTypes.object,
+};

package/src/components/StorySlideshow/styles.js

@@ -1,40 +1,36 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet } from 'react-native';
 
-export const storySlideshowStyles = ({ FONT_SIZE, COLORS }) =>
-  StyleSheet.create({
-    wrapper: {
-      paddingHorizontal: 10,
-    },
-    titleText: {
-      fontWeight: "normal",
-      marginBottom: 10,
-      fontSize: FONT_SIZE.h1,
-      opacity: 0.8,
-    },
-    leftArrow: {
-      position: "absolute",
-      top: "46%",
-      right: "95%",
-      left: 20,
-      zIndex: 999,
-      width: 30,
-      height: 40,
-      backgroundColor: COLORS.TRANSPARENT_BLACK,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    rightArrow: {
-      position: "absolute",
-      top: "46%",
-      left: "93%",
-      right: 20,
-      zIndex: 999,
-      width: 30,
-      height: 40,
-      backgroundColor: COLORS.TRANSPARENT_BLACK,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  });
+export const storySlideshowStyles = ({ FONT_SIZE, COLORS }) => StyleSheet.create({
+  titleText: {
+    fontWeight: 'normal',
+    marginBottom: 10,
+    fontSize: FONT_SIZE.h1,
+    opacity: 0.8,
+  },
+  leftArrow: {
+    position: 'absolute',
+    top: '46%',
+    right: '95%',
+    left: 20,
+    zIndex: 999,
+    width: 30,
+    height: 40,
+    backgroundColor: COLORS.TRANSPARENT_BLACK,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rightArrow: {
+    position: 'absolute',
+    top: '46%',
+    left: '93%',
+    right: 20,
+    zIndex: 999,
+    width: 30,
+    height: 40,
+    backgroundColor: COLORS.TRANSPARENT_BLACK,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/utils/imageUtils.js

@@ -29,9 +29,11 @@ export function getImageQuality() {
   if (NETWORK_TYPE) {
     if (NETWORK_TYPE === 'wifi') {
       return 100;
-    } if (NETWORK_TYPE === '4g') {
+    }
+    if (NETWORK_TYPE === '4g') {
       return 85;
-    } if (NETWORK_TYPE === '3g') {
+    }
+    if (NETWORK_TYPE === '3g') {
       return 50;
     }
   }
@@ -124,13 +126,13 @@ export const getCustomResolutionImageURL = (props, customAspectRatio) => {
   const { IMAGE_QUALITY } = theme;
 
   const {
-     metaData, slug, imageWidth, cdn,
+    metaData, slug, imageWidth, cdn,
   } = props;
   const image = new FocusedImage(slug, metaData);
 
   const imageCdn = cdn || 'https://www.quintype.com';
-  return `${imageCdn}/${image.path(customAspectRatio , {
+  return `${imageCdn}/${image.path(customAspectRatio, {
     w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
     q: IMAGE_QUALITY,
   })}`;
-}
+};