@quintype/native-components 2.20.28 → 2.20.30

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.30](https://github.com/quintype/native-components/compare/v2.20.29...v2.20.30) (2024-06-04)
+
+### [2.20.29](https://github.com/quintype/native-components/compare/v2.20.28...v2.20.29) (2024-06-04)
+
 ### [2.20.28](https://github.com/quintype/native-components/compare/v2.20.27...v2.20.28) (2024-05-17)
 
 ### [2.20.27](https://github.com/quintype/native-components/compare/v2.20.26...v2.20.27) (2024-05-17)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.28",
+  "version": "2.20.30",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -23,7 +23,8 @@
     "react-native-pdf": "^5.1.4",
     "react-native-render-html": "^4.2.3",
     "react-native-share": "^8.1.0",
-    "rn-fetch-blob": "^0.10.16"
+    "rn-fetch-blob": "^0.10.16",
+    "react-native-star-rating-widget": "^1.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",

package/src/Icons/FallBackIcon/index.js

@@ -1,18 +1,10 @@
-import React from "react";
-import Icon from "react-native-vector-icons/Ionicons";
-import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { AppTheme } from "../../utils";
 
-const DEFAULT_FALLBACK_SIZE = 25;
+export const FallbackIcon = () => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
 
-export const FallbackIcon = ({ size = DEFAULT_FALLBACK_SIZE, color }) => (
-  <Icon
-    name="images"
-    size={size}
-    color={color}
-  />
-);
-
-FallbackIcon.propTypes = {
-  size: PropTypes.number,
-  color: PropTypes.string,
+  return <Icon name="image" size={25} color={COLORS.MONO4} />;
 };

package/src/components/Rating/index.js

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { View } from "react-native";
+import { Text } from "../Text";
+import {ratingStyles} from './styles'
+import { AppTheme } from "../../utils";
+import { StarRatingDisplay } from 'react-native-star-rating-widget';
+
+export const RatingLayout = ({ reviewTitle, ratingValue, ratingLabel }) => {  
+    const { theme } = useContext(AppTheme);
+    const {
+      COLORS, FONT_FAMILY, FONT_SIZE
+    } = theme;
+    const styles = ratingStyles(COLORS, FONT_SIZE, FONT_FAMILY);
+    
+    return (
+        <View style={styles.container}>
+          {reviewTitle && <Text
+            style={styles.reviewTitle}
+          >
+            {reviewTitle}
+          </Text>}
+          {ratingValue && <View style={styles.child}>
+            <Text
+              style={styles.ratingLabel}
+            >
+              {`${ratingLabel}/5`}
+            </Text>
+            <StarRatingDisplay
+              rating={ratingValue}
+              starSize={FONT_SIZE.title}
+              color={COLORS.REVIEW_STAR_COLOR ?? '#F5A623'}
+              style={styles.starContiner}
+              starStyle={styles.starStyle}
+            />
+          </View>}
+        </View>
+      );
+};
+
+RatingLayout.propTypes = {
+  reviewTitle: PropTypes.string.isRequired,
+  ratingValue: PropTypes.number.isRequired,
+  ratingLabel: PropTypes.string.isRequired
+};

package/src/components/Rating/styles.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export const ratingStyles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
+  container: { marginLeft: 10, marginTop: 10 },
+  reviewTitle: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.primary,
+    color: COLORS.BRAND_BLACK,
+    marginBottom:7
+  },
+  child: { display: "flex", flexDirection: "row", alignItems: "center"},
+  ratingLabel: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.secondary,
+    color: COLORS.BRAND_BLACK,
+  },
+  starContainer: { marginLeft: 10 },
+  starStyle: { marginHorizontal: 0 }
+});

package/src/components/ResponsiveImage/index.js

@@ -33,7 +33,7 @@ const ResponsiveImageBase = (props) => {
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: CustomFallBackBackground || COLORS.MONO6,
+    backgroundColor: (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
     justifyContent: 'center',
     alignItems: 'center',
   };

package/src/components/StoryHeader/index.js

@@ -18,6 +18,7 @@ import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
+import { RatingLayout } from '../Rating';
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -73,7 +74,8 @@ export const StoryHeader = (props) => {
   const caption = story['hero-image-caption'];
   const attribution = story['hero-image-attribution'];
   const isPremiumStory = story['access'] === 'subscription';
-
+  const reviewTitle = story['metadata'] && story['metadata']['review-title'];
+  const reviewData = story['metadata'] && story['metadata']['review-rating'];
 
   const showAttribution = () => {
     if (!caption && !attribution) {
@@ -128,6 +130,7 @@ export const StoryHeader = (props) => {
         cdn={props.cdn}
         readtime={story['read-time']}
       />
+      {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>
   );
 };