@quintype/native-components 2.20.8 → 2.20.9

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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)
 
 

package/package.json

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

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,