@quintype/native-components 2.20.7 → 2.20.9

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.9](https://github.com/quintype/native-components/compare/v2.20.8...v2.20.9) (2023-07-10)
+
+### [2.20.8](https://github.com/quintype/native-components/compare/v2.20.7...v2.20.8) (2023-06-30)
+
+
+### Bug Fixes
+
+* **misc:** Fixes slideshow arrow align, adds resizeImagesToFit config 🔨  ([#205](https://github.com/quintype/native-components/issues/205)) ([094bf6f](https://github.com/quintype/native-components/commit/094bf6f31e28d9f61df878de398af5bb1e101760))
+
 ### [2.20.7](https://github.com/quintype/native-components/compare/v2.20.6...v2.20.7) (2023-06-16)
 
 

package/package.json

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

package/src/components/JSEmbedElement/index.js

@@ -131,6 +131,7 @@ export const JSEmbedElement = (props) => {
         }}
         source={constructSource()}
         mixedContentMode="always"
+        mediaPlaybackRequiresUserAction={true}
       />
     </View>
   );

package/src/components/ResponsiveImage/index.js

@@ -15,7 +15,9 @@ import {
 const ResponsiveImageBase = (props) => {
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
-  const { COLORS, CustomFallBackIcon, CustomFallBackBackground } = theme;
+  const {
+    COLORS, CustomFallBackIcon, CustomFallBackBackground, resizeImagesToFit,
+  } = theme;
 
   const flattenedImageStyle = StyleSheet.flatten([
     styles.defaultImage,
@@ -70,13 +72,15 @@ const ResponsiveImageBase = (props) => {
     cache: FastImage.cacheControl.web,
   };
 
+  const preferredResizeMode = resizeImagesToFit ? FastImage.resizeMode.contain : FastImage.resizeMode.cover;
+
   return (
     <View>
       <FastImage
         style={flattenedImageStyle}
         source={sourceURI}
         onLoad={onLoadHandler}
-        resizeMode={props?.elementType === 'gallery' && !(props.hero) ? FastImage.resizeMode.contain : FastImage.resizeMode.cover}
+        resizeMode={props?.elementType === 'gallery' && !(props.hero) ? FastImage.resizeMode.contain : preferredResizeMode}
         {...props}
       />
       {placeholder && (

package/src/components/StoryGallery/index.js

@@ -7,6 +7,7 @@ import {
   SafeAreaView,
   FlatList,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import FastImage from 'react-native-fast-image';
@@ -104,7 +105,7 @@ export const StoryGallery = ({ cdn, card }) => {
     const imageUri = `${data?.cdn}/${data?.slug}`;
 
     return (
-      <View style={galleryStyles.carouselContainer}>
+      <ScrollView style={galleryStyles.carouselContainer}>
         <FastImage
           source={{ uri: imageUri }}
           resizeMode={FastImage.resizeMode.contain}
@@ -128,7 +129,7 @@ export const StoryGallery = ({ cdn, card }) => {
             Linking.openURL(href);
           }}
         />
-      </View>
+      </ScrollView>
     );
   };
 

package/src/components/StoryGallery/styles.js

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { AppTheme } from '../../utils';
 
 export const styles = ({ FONT_SIZE }) => {
-  const { width: deviceWidth } = Dimensions.get('window');
+  const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
   const { theme } = useContext(AppTheme);
   const { COLORS, DARK_MODE, FONT_FAMILY } = theme;
 
@@ -16,16 +16,15 @@ export const styles = ({ FONT_SIZE }) => {
       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,
+      width: (deviceWidth - 40) / 3,
+      height: (deviceWidth - 40) / 3,
+      margin: 2.5,
     },
     descText: {
       fontSize: FONT_SIZE.h2,
@@ -110,7 +109,7 @@ export const styles = ({ FONT_SIZE }) => {
     },
     carouselImage: {
       width: '100%',
-      height: '80%',
+      height: 2*deviceHeight/3,
     },
     carouselContainer: {
       width: deviceWidth - 10,

package/src/components/StorySlideshow/index.js

@@ -4,7 +4,6 @@ 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';
 
@@ -41,7 +40,7 @@ export const StorySlideshow = ({ card, cdn }) => {
     return (
       <View style={arrowStyles}>
         <TouchableOpacity onPress={onPressHandler}>
-          <Icon name={direction} size={22} color={COLORS?.MONO7} />
+          <Icon name={direction} size={24} color={COLORS?.MONO7} />
         </TouchableOpacity>
       </View>
     );
@@ -65,11 +64,7 @@ export const StorySlideshow = ({ card, cdn }) => {
   };
 
   return (
-    <View>
-      <Text primary style={styles.titleText}>
-        {card.title}
-      </Text>
-
+    <View style={styles.cardsContainer}>
       <FlatList
         ref={flatlistRef}
         data={card['story-elements']}
@@ -79,7 +74,6 @@ export const StorySlideshow = ({ card, cdn }) => {
         extraData={currentIndex}
         onScroll={handleScroll}
       />
-
       {!firstSlide && showArrow('left')}
 
       {!lastSlide && showArrow('right')}

package/src/components/StorySlideshow/styles.js

@@ -1,19 +1,19 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
 
-export const storySlideshowStyles = ({ FONT_SIZE, COLORS }) => StyleSheet.create({
-  titleText: {
-    fontWeight: 'normal',
-    marginBottom: 10,
-    fontSize: FONT_SIZE.h1,
-    opacity: 0.8,
+const { width } = Dimensions.get('window');
+
+export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
+  cardsContainer: {
+    marginTop: 10,
+    position: 'relative',
   },
   leftArrow: {
     position: 'absolute',
-    top: '46%',
-    right: '95%',
-    left: 20,
+    marginTop: -20,
+    top: width * 0.28125, // width * 9/16 / 2
+    left: 0,
     zIndex: 999,
-    width: 30,
+    width: 40,
     height: 40,
     backgroundColor: COLORS.TRANSPARENT_BLACK,
     display: 'flex',
@@ -22,11 +22,11 @@ export const storySlideshowStyles = ({ FONT_SIZE, COLORS }) => StyleSheet.create
   },
   rightArrow: {
     position: 'absolute',
-    top: '46%',
-    left: '93%',
-    right: 20,
+    marginTop: -20,
+    top: width * 0.28125, // width * 9/16 / 2
+    right: 0,
     zIndex: 999,
-    width: 30,
+    width: 40,
     height: 40,
     backgroundColor: COLORS.TRANSPARENT_BLACK,
     display: 'flex',

package/src/components/WebView/index.js

@@ -9,7 +9,7 @@ import styles from './styles';
 const WebViewComponent = (props) => (
   <View style={styles.container}>
     <Header rightComponent={props.closeButton} />
-    <WebView {...props} />
+    <WebView {...props} mediaPlaybackRequiresUserAction={true} />
   </View>
 );