@quintype/native-components 2.20.3 → 2.20.5

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.5](https://github.com/quintype/native-components/compare/v2.20.4...v2.20.5) (2023-03-21)
+
+### [2.20.4](https://github.com/quintype/native-components/compare/v2.20.3...v2.20.4) (2023-02-01)
+
+
+### Bug Fixes
+
+* **fonts:** Fixes font for Related-Stories and Also-Read on Android :hammer: ([#197](https://github.com/quintype/native-components/issues/197)) ([952c95b](https://github.com/quintype/native-components/commit/952c95b43b76f55eeb25cf9e071a88a3d939ce60))
+
 ### [2.20.3](https://github.com/quintype/native-components/compare/v2.20.2...v2.20.3) (2023-02-01)
 
 

package/package.json

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

package/src/components/AlsoRead/index.js

@@ -25,8 +25,8 @@ export const AlsoRead = (props) => {
   const linkedImage = get(linkedStories, [linkedStoryId, 'hero-image-s3-key']);
 
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, DARK_MODE, CustomFallBackIcon ,translate} = theme;
-  const styles = alsoReadStyles(COLORS, FONT_SIZE, DARK_MODE);
+  const { CustomFallBackIcon, translate } = theme;
+  const styles = alsoReadStyles(theme);
 
   const fallBackIcon = CustomFallBackIcon ? <CustomFallBackIcon /> : <FallbackIcon />;
 

package/src/components/AlsoRead/styles.js

@@ -1,30 +1,33 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet } from "react-native";
 
-export const alsoReadStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
-  wrapper: {
-    padding: 10,
-  },
-  container: {
-    flexDirection: 'row',
-  },
-  alsoReadContentWrapper: {
-    paddingLeft: 12,
-    flex: 1,
-  },
-  alsoReadText: {
-    fontSize: FONT_SIZE.h2,
-    fontWeight: 'bold',
-    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
-  },
-  alsoReadTitle: {
-    fontSize: FONT_SIZE.h2,
-    color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
-  },
-  fallBackImageWrapper: {
-    backgroundColor: COLORS.BRAND_WHITE,
-    width: 150,
-    height: 84,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export const alsoReadStyles = (appThemeContext) => {
+  const { COLORS, FONT_SIZE, FONT_FAMILY, DARK_MODE } = appThemeContext;
+  return StyleSheet.create({
+    wrapper: {
+      padding: 10,
+    },
+    container: {
+      flexDirection: "row",
+    },
+    alsoReadContentWrapper: {
+      paddingLeft: 12,
+      flex: 1,
+    },
+    alsoReadText: {
+      fontSize: FONT_SIZE.h2,
+      fontFamily: FONT_FAMILY.secondaryBold,
+      color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
+    },
+    alsoReadTitle: {
+      fontSize: FONT_SIZE.h2,
+      color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_1,
+    },
+    fallBackImageWrapper: {
+      backgroundColor: COLORS.BRAND_WHITE,
+      width: 150,
+      height: 84,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  });
+};

package/src/components/RelatedStoriesCard/styles.js

@@ -1,11 +1,11 @@
 import { StyleSheet,I18nManager } from 'react-native';
 
 export const relatedStoriesStyles = (appThemeContext) => {
-  const { COLORS, FONT_SIZE } = appThemeContext;
+  const { COLORS, FONT_SIZE, FONT_FAMILY } = appThemeContext;
   return StyleSheet.create({
     titleStyle: {
       fontSize: FONT_SIZE.title,
-      fontWeight: 'bold',
+      fontFamily: FONT_FAMILY.secondaryBold,
       color: COLORS.BRAND_BLACK,
       writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
       paddingHorizontal:5,

package/src/components/StorySlideshow/index.js

@@ -1,4 +1,3 @@
-
 import PropTypes from "prop-types";
 import React, { useContext, useRef, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
@@ -23,15 +22,15 @@ export const StorySlideshow = ({ card, cdn }) => {
 
   const moveNext = () => {
     if (!lastSlide) {
-      flatlistRef.current.scrollToIndex({ index: currentIndex + 1 });
+      flatlistRef.current.scrollToIndex({ index: Math.floor(Math.min(currentIndex + 1, totalSlides - 1))});
       setCurrentTabIndex(currentIndex + 1);
     }
   };
 
   const movePrev = () => {
     if (!firstSlide) {
-      flatlistRef.current.scrollToIndex({ index: currentIndex - 1 });
-      setCurrentTabIndex(currentIndex - 1);
+      flatlistRef.current.scrollToIndex({ index: Math.ceil(Math.max(currentIndex - 1, 0)) });
+      setCurrentTabIndex(Math.max(currentIndex - 1, 0));
     }
   };
 
@@ -49,6 +48,23 @@ export const StorySlideshow = ({ card, cdn }) => {
     );
   };
 
+  const handleScroll = (event) => {
+    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 ))){
+      setCurrentTabIndex(value * totalSlides);
+    } else if(xOffset < leftThreshold){
+      setCurrentTabIndex(0);
+    } else if(xOffset >= rightThreshold){
+      setCurrentTabIndex(totalSlides-1);
+    }
+  }
+
   return (
     <View style={styles.wrapper}>
       <Text primary style={styles.titleText}>
@@ -62,6 +78,7 @@ export const StorySlideshow = ({ card, cdn }) => {
         keyExtractor={(item) => item.id}
         horizontal
         extraData={currentIndex}
+        onScroll={handleScroll}
       />
 
       {!firstSlide && showArrow("left")}