@quintype/native-components 2.28.1 → 2.28.3

package/package.json

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

package/src/components/PDFReader/styles.js

@@ -19,6 +19,7 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE, lineHeightMultiplier) =>
     marginLeft: 5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
     fontStyle: 'italic',
+    width:'90%'
   },
   pdfButton: {
     flexDirection: 'row',

package/src/components/RelatedStoriesCard/index.js

@@ -39,7 +39,7 @@ export const RelatedStoriesCard = ({
             onPress: () => onStoryPress(secondaryStory),
             key: secondaryStory?.id,
           };
-            <SecondaryStoryCard
+            return <SecondaryStoryCard
               {...storyCardProps}
               iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
               imageWidth={getScreenPercentageWidth(28)}

package/src/components/ResponsiveImage/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {
   memo, useCallback, useContext, useState,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ImageBackground } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
@@ -23,6 +23,18 @@ const ResponsiveImageBase = (props) => {
     roundedImageCorners,
   } = theme;
 
+  const flattenedBackgroudStyle = StyleSheet.flatten([
+    {marginTop: props.styles?.marginTop ?? 0},
+    roundedImageCorners && {
+      borderRadius: 12,
+      overflow: "hidden",
+    },
+    props.imageWidth && {
+      width: props.imageWidth,
+      height: (props.imageWidth * 9) / 16,
+    },
+  ])
+
   const flattenedImageStyle = StyleSheet.flatten([
     styles.defaultImage,
     props.styles,
@@ -30,15 +42,11 @@ const ResponsiveImageBase = (props) => {
       width: props.imageWidth,
       height: (props.imageWidth * 9) / 16,
     },
-    props?.elementType === 'gallery' && {
-      backgroundColor: COLORS.BRAND_BLACK,
-    },
-    roundedImageCorners && {
-      borderRadius: 12,
-      overflow: "hidden",
-    },
+    props.styles?.marginTop && { marginTop: 0 } ,
+
   ]);
 
+
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
     ...props.styles,
@@ -47,6 +55,7 @@ const ResponsiveImageBase = (props) => {
     justifyContent: "center",
     alignItems: "center",
     borderRadius: roundedImageCorners ? 12 : 0,
+    marginTop: 0
   };
 
   const fallBackIcon = CustomFallBackIcon ? (
@@ -55,13 +64,8 @@ const ResponsiveImageBase = (props) => {
     <FallbackIcon />
   );
 
-  let imageUrl = '';
 
-  if (props?.elementType === 'gallery') {
-    imageUrl = getCustomResolutionImageURL(props, [1, 1]);
-  } else {
-    imageUrl = getImageURL(props);
-  }
+  let imageUrl  = getImageURL(props)
 
   const userFallback = () => <Icon name="user" size={20} />;
 
@@ -77,6 +81,11 @@ const ResponsiveImageBase = (props) => {
 
   const onLoadHandler = useCallback(handleImageLoad, []);
 
+  const lowestQualitySourceURI = {
+    uri: decodeURIComponent(getImageURL(props,2)),
+    priority: FastImage.priority.high,
+  }
+
   const sourceURI = {
     uri: decodeURIComponent(imageUrl),
     priority: FastImage.priority.high,
@@ -85,15 +94,27 @@ const ResponsiveImageBase = (props) => {
 
   const preferredResizeMode = resizeImagesToFit ? FastImage.resizeMode.contain : FastImage.resizeMode.cover;
 
-  return (
-    <View>
+    const ImageLayout = () => {
+    return (
       <FastImage
         style={flattenedImageStyle}
         source={sourceURI}
-        onLoad={onLoadHandler}
-        resizeMode={props?.elementType === 'gallery' && !(props.hero) ? FastImage.resizeMode.contain : preferredResizeMode}
+        resizeMode={FastImage.resizeMode.contain}
         {...props}
       />
+    )
+  }
+
+  return (
+    <View style={flattenedBackgroudStyle}>
+      <ImageBackground
+      source={lowestQualitySourceURI}
+      resizeMode='cover'
+      blurRadius={50}
+      onLoad={()=>setPlaceholder(false)}
+      >
+        <ImageLayout />
+      </ImageBackground>
       {placeholder && (
         <View style={placeholderStyle} testID={props.containerTestID}>
           {showFallBackIcon()}

package/src/components/SecondaryStoryCard/styles.js

@@ -16,7 +16,6 @@ export const storyStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultipli
     gap: 10,
   },
   image: {
-    marginBottom: 4,
     marginTop: storyCardOptions.enableSectionName ? FONT_SIZE.h4 * lineHeightMultiplier + 8 : 4,
   },
   icon: {

package/src/components/ShareButton/index.js

@@ -19,7 +19,7 @@ const ShareButtonBase = (props) => {
     const { url } = story || {};
     switch (type) {
       case 'story':
-        return url;
+        return url || slug;
       case 'card':
         return `${url}${slug}`;
       case 'image':

package/src/components/StoryGallery/index.js

@@ -138,7 +138,7 @@ export const StoryGallery = ({ cdn, card }) => {
 
             const style = galleryStyles.fullWidth;
             return (
-              <TouchableOpacity>
+              <TouchableOpacity style={galleryStyles.subContainer}>
                 <LightBoxImage
                   onClickHandler={onPressHandler}
                   hero={!!data.metaData['focus-point']}

package/src/components/StoryGallery/styles.js

@@ -129,5 +129,8 @@ export const styles = ({ FONT_SIZE }) => {
       position: 'absolute',
       color: COLORS.BRAND_WHITE,
     },
+    subContainer: {
+      margin:0.3
+    }
   });
 };

package/src/components/StoryTemplateIcon/index.js

@@ -55,4 +55,4 @@ export const StoryTemplateIcon = ({
     default:
       return null;
   }
-};
+};

package/src/components/StoryTemplateIcon/styles.js

@@ -20,4 +20,4 @@ export const storyTemplateIconStyles = (COLORS, FONT_SIZE, cardType) => StyleShe
     borderRadius: 50,
     backgroundColor: COLORS.BRAND_3,
   },
-});
+});

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 { StoryCardDetailsRow } from './StoryCardDetailsRow';
 export { TextA } from './TextA'
-export { TextQ } from './TextQ'
-export { StoryTemplateIcon } from './StoryTemplateIcon'
+export { TextQ } from './TextQ'