@quintype/native-components 2.20.0-fix-rtl-issues.1 → 2.20.0

package/CHANGELOG.md

@@ -2,6 +2,128 @@
 
 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.0](https://github.com/quintype/native-components/compare/v2.19.28...v2.20.0) (2023-01-09)
+
+
+### Features
+
+* **enhancement:** Adds toggles for hideCollectionTitle, readTime, shareButton 🔧 ([#193](https://github.com/quintype/native-components/issues/193)) ([53fcafc](https://github.com/quintype/native-components/commit/53fcafc2d8546abb5eea1e36820dc37c22436644))
+
+### [2.19.28](https://github.com/quintype/native-components/compare/v2.19.27...v2.19.28) (2022-12-28)
+
+### [2.19.27](https://github.com/quintype/native-components/compare/v2.19.26...v2.19.27) (2022-12-16)
+
+
+### Bug Fixes
+
+* **time-util:** Fix spacing for time-distance from now :hammer: ([67d9f37](https://github.com/quintype/native-components/commit/67d9f37459ee220f3c1ef1dd38b12ca7b65cf50e))
+
+### [2.19.26](https://github.com/quintype/native-components/compare/v2.19.25...v2.19.26) (2022-12-16)
+
+### [2.19.25](https://github.com/quintype/native-components/compare/v2.19.24...v2.19.25) (2022-12-07)
+
+### [2.19.24](https://github.com/quintype/native-components/compare/v2.19.23...v2.19.24) (2022-12-06)
+
+### [2.19.23](https://github.com/quintype/native-components/compare/v2.19.22...v2.19.23) (2022-12-06)
+
+### [2.19.22](https://github.com/quintype/native-components/compare/v2.19.21...v2.19.22) (2022-12-06)
+
+### [2.19.21](https://github.com/quintype/native-components/compare/v2.19.20...v2.19.21) (2022-11-18)
+
+
+### Bug Fixes
+
+* **fonts:** Fixes fonts for CollectionTitle and Caption/Attribution HTML 🔨  ([#188](https://github.com/quintype/native-components/issues/188)) ([94c61ff](https://github.com/quintype/native-components/commit/94c61ff385df2225f6a3d1b14c1f5d2ce3a1ed89))
+
+### [2.19.20](https://github.com/quintype/native-components/compare/v2.19.19...v2.19.20) (2022-11-07)
+
+
+### Bug Fixes
+
+* **android:** Fixes Nov 4 critical issue that breaks Android :hammer: ([e6d6c27](https://github.com/quintype/native-components/commit/e6d6c27e55ddbe9542ef3c7733273e4bbe9a1aa2))
+
+### [2.19.19](https://github.com/quintype/native-components/compare/v2.19.18...v2.19.19) (2022-08-24)
+
+
+### Bug Fixes
+
+* **Ads:** Change midcontentAd logic for video-story :hammer: ([#186](https://github.com/quintype/native-components/issues/186)) ([b04a16c](https://github.com/quintype/native-components/commit/b04a16cb74f06c3a3f5639df31b39b2ecd4b6704))
+* **deps:** Fixes dependency-conflict due to incorrect react-native version :hammer: ([b43e8ae](https://github.com/quintype/native-components/commit/b43e8ae0e4cf92d3fce21336c3cdd6c2d73db582))
+
+### [2.19.18](https://github.com/quintype/native-components/compare/v2.19.17...v2.19.18) (2022-07-04)
+
+### [2.19.17](https://github.com/quintype/native-components/compare/v2.19.14...v2.19.17) (2022-06-29)
+
+
+### Bug Fixes
+
+* **story-page:** Fixes crash if image-metadata is null 🔨  ([#184](https://github.com/quintype/native-components/issues/184)) ([8f703d1](https://github.com/quintype/native-components/commit/8f703d19c90c4a5c7844e2251c6691263f9b3d4b))
+* **story-template:** Fixed story-template-icon color :hammer: ([#182](https://github.com/quintype/native-components/issues/182)) ([95f750d](https://github.com/quintype/native-components/commit/95f750d7df5f7cc400095317be26900c0cffd3e1))
+
+### [2.19.16](https://github.com/quintype/native-components/compare/v2.19.15...v2.19.16) (2022-05-09)
+
+
+### Bug Fixes
+
+* **story-template:** Fixed story-template-icon color :hammer: ([#182](https://github.com/quintype/native-components/issues/182)) ([95f750d](https://github.com/quintype/native-components/commit/95f750d7df5f7cc400095317be26900c0cffd3e1))
+
+### [2.19.15](https://github.com/quintype/native-components/compare/v2.19.14...v2.19.15) (2022-04-12)
+
+### [2.19.14](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.14) (2022-04-04)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.12](https://github.com/quintype/native-components/compare/v2.19.11...v2.19.12) (2022-02-08)
+
+### [2.19.11](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.11) (2022-01-24)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.10](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.10) (2022-01-24)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.9](https://github.com/quintype/native-components/compare/v2.19.8...v2.19.9) (2022-01-13)
+
+### [2.19.8](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.8) (2022-01-10)
+
+### [2.19.7](https://github.com/quintype/native-components/compare/v2.19.0...v2.19.7) (2022-01-07)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+* **AlsoRead:** Fixed card height :hammer: ([#174](https://github.com/quintype/native-components/issues/174)) ([6ce7a60](https://github.com/quintype/native-components/commit/6ce7a6078ec699f0f3df74d8136fc64070921caa))
+* **Navigator:** Fixed Section title text overflow :hammer: ([#176](https://github.com/quintype/native-components/issues/176)) ([249672b](https://github.com/quintype/native-components/commit/249672b44f6559190e930fc78a11d83a8e94c009))
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
+### [2.19.6](https://github.com/quintype/native-components/compare/v2.19.5...v2.19.6) (2021-12-30)
+
+### [2.19.5](https://github.com/quintype/native-components/compare/v2.19.3...v2.19.5) (2021-12-29)
+
+
+### Bug Fixes
+
+* **Navigator:** Fixed Section title text overflow :hammer: ([#176](https://github.com/quintype/native-components/issues/176)) ([249672b](https://github.com/quintype/native-components/commit/249672b44f6559190e930fc78a11d83a8e94c009))
+
+### [2.19.3](https://github.com/quintype/native-components/compare/v2.18.4...v2.19.3) (2021-10-28)
+
+
+### Bug Fixes
+
+* **AlsoRead:** Changed dark-mode color for the text :hammer: ([#170](https://github.com/quintype/native-components/issues/170)) ([67f1e61](https://github.com/quintype/native-components/commit/67f1e61fd4b76ea6fa65f565006214981d0bb8a8))
+* **AlsoRead:** Fixed card height :hammer: ([#174](https://github.com/quintype/native-components/issues/174)) ([6ce7a60](https://github.com/quintype/native-components/commit/6ce7a6078ec699f0f3df74d8136fc64070921caa))
+* **old-UI:** Fixes all padding/image-aspect-ratio inconsistencies 🔨  ([#169](https://github.com/quintype/native-components/issues/169)) ([f3b8850](https://github.com/quintype/native-components/commit/f3b88507c02985ff83aadd266e0dbd04438fd441))
+
 ### [2.19.2](https://github.com/quintype/native-components/compare/v2.19.1...v2.19.2) (2021-10-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.0-fix-rtl-issues.1",
+  "version": "2.20.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -24,17 +24,16 @@
     "react-native-share": "^3.7.0",
     "react-native-render-html": "^4.2.3",
     "react-native-vector-icons": "^7.0.0",
-    "react-native-webview": "^10.6.0",
     "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",
     "lodash": ">=4.17.20",
-    "react": ">=16.13.1",
-    "react-native": ">=0.63.2",
+    "react": ">=17.0.2",
+    "react-native": ">=0.67.5",
     "react-native-fast-image": ">=8.3.2",
     "react-native-pdf": ">=6.2.0",
-    "react-native-webview": ">=10.6.0",
+    "react-native-webview": ">=11.0.0",
     "rn-fetch-blob": ">=0.12.0"
   },
   "devDependencies": {
@@ -54,11 +53,11 @@
     "husky": "^4.2.5",
     "jest": "^26.4.0",
     "metro-react-native-babel-preset": "^0.62.0",
-    "react": "^16.13.1",
-    "react-native": ">=0.63.2",
+    "react": "17.0.2",
+    "react-native": "0.67.4",
     "react-native-device-info": "^5.6.5",
     "react-native-gesture-handler": "^1.9.0",
-    "react-native-svg": "^12.1.0",
+    "react-native-svg": "^12.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"
   },

package/src/Icons/ClockIcon/index.js

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Svg, { Path } from 'react-native-svg';
+import { AppTheme } from "../../utils/context";
 
-export const ClockIcon = (props) => (
-  <Svg width={24} height={24} {...props}>
+export const ClockIcon = (props) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
+  const color = COLORS.BRAND_BLACK;
+  return <Svg width={24} height={24} {...props}>
     <Path
-      fill="#333"
+      fill={color}
       d="M12 4.25c1.396 0 2.687.349 3.875 1.047a7.831 7.831 0 012.828 2.828A7.513 7.513 0 0119.75 12a7.513 7.513 0 01-1.047 3.875 7.831 7.831 0 01-2.828 2.828A7.513 7.513 0 0112 19.75a7.513 7.513 0 01-3.875-1.047 7.831 7.831 0 01-2.828-2.828A7.513 7.513 0 014.25 12c0-1.396.349-2.687 1.047-3.875a7.831 7.831 0 012.828-2.828A7.513 7.513 0 0112 4.25zM18.75 12a6.58 6.58 0 00-.906-3.39 6.72 6.72 0 00-2.469-2.454 6.641 6.641 0 00-3.39-.906 6.558 6.558 0 00-3.376.906 6.72 6.72 0 00-2.453 2.469 6.641 6.641 0 00-.906 3.39c0 1.22.302 2.344.906 3.376a6.72 6.72 0 002.469 2.453 6.641 6.641 0 003.39.906 6.558 6.558 0 003.376-.906 6.72 6.72 0 002.453-2.469A6.613 6.613 0 0018.75 12zm-4.656 2.75l-2.532-1.844a.307.307 0 01-.156-.281v-5c0-.104.037-.193.11-.266a.362.362 0 01.265-.109h.438c.104 0 .192.036.265.11.073.072.11.16.11.265v4.563l2.218 1.625a.33.33 0 01.141.234.349.349 0 01-.038.202l-.29.439a.342.342 0 01-.25.14.389.389 0 01-.281-.078z"
     />
   </Svg>
-);
+}

package/src/components/ActionText/ActionText.js

@@ -1,18 +1,17 @@
-import { throttle } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { throttle } from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
-export const ActionText = ({
-  onPress, endPoint, children, actionTextID, disablePress,
-}) => {
+export const ActionText = ({ onPress, endPoint, children, disablePress }) => {
   const handleTagPress = () => onPress(endPoint);
   const throttledOnpress = throttle(handleTagPress, 1000);
 
   return (
     <TouchableOpacity
       onPress={throttledOnpress}
-      testID={actionTextID}
+      testID={COMP_GENERAL_CONSTANTS.actionTextTouch}
       disabled={disablePress}
     >
       {children}
@@ -25,5 +24,4 @@ ActionText.propTypes = {
   endPoint: PropTypes.object,
   disablePress: PropTypes.bool,
   children: PropTypes.any,
-  actionTextID: PropTypes.string,
 };

package/src/components/ActionText/ActionText.test.js

@@ -4,22 +4,19 @@ import 'react-native';
 import { mockContext } from '../../utils';
 import { Text } from '../Text';
 import { ActionText } from './ActionText';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 describe('Test Action Text :', () => {
   test('should render properly :', () => {
     const throttle = jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     expect(element.props.children).toBeDefined();
   });
 
@@ -27,17 +24,13 @@ describe('Test Action Text :', () => {
     const throttle = await jest.fn();
     const { getByTestId } = render(
       mockContext(
-        <ActionText
-          onPress={throttle}
-          endPoint={{ slug: '/sample-data' }}
-          actionTextID="actionText"
-        >
+        <ActionText onPress={throttle} endPoint={{ slug: '/sample-data' }}>
           <Text testID="sampleText">Sample Data</Text>
         </ActionText>,
       ),
     );
 
-    const element = getByTestId('actionText');
+    const element = getByTestId(COMP_GENERAL_CONSTANTS.actionTextTouch);
     fireEvent(element, 'press');
     expect(throttle).toHaveBeenCalled();
   });

package/src/components/AlsoRead/index.js

@@ -58,7 +58,7 @@ export const AlsoRead = (props) => {
           {getImageComponent()}
           <View style={styles.alsoReadContentWrapper}>
             <Text style={styles.alsoReadText}>{translate("Also Read")}</Text>
-            <Text primary numberOfLines={3} style={styles.alsoReadText}>
+            <Text primary numberOfLines={2} style={styles.alsoReadTitle}>
               {text}
             </Text>
           </View>

package/src/components/AlsoRead/styles.js

@@ -13,10 +13,12 @@ export const alsoReadStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.creat
   },
   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,

package/src/components/AuthorRow/AuthorRow.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import 'react-native';
 import { mockContext } from '../../utils';
 import { AuthorRow } from './index';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants';
 
 const data = [
   {
@@ -26,15 +27,9 @@ const data = [
 describe('Test Author Row :', () => {
   test('should render Author name properly', () => {
     const { getByTestId } = render(
-      mockContext(
-        <AuthorRow
-          authors={data}
-          authorNameTestID="authorName"
-          cdn="gumlet.assettype.com"
-        />,
-      ),
+      mockContext(<AuthorRow authors={data} cdn="gumlet.assettype.com" />),
     );
-    const element = getByTestId('authorName');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorName);
     expect(element.props.children).toBe('Raghavendra Vaidya');
   });
 
@@ -49,7 +44,7 @@ describe('Test Author Row :', () => {
         />,
       ),
     );
-    const element = getByTestId('authorImage');
+    const element = getByTestId(COMP_CONTENT_CONSTANTS.authorImage);
     expect(element.props.children).toBeDefined();
   });
 });

package/src/components/AuthorRow/index.js

@@ -7,20 +7,18 @@ import { ActionText } from '../ActionText/ActionText';
 
 import { authorRowStyleSheet } from './styles';
 import { AppTheme } from '../../utils';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 export const AuthorRow = ({
   authors,
   onPress,
   cdn,
-  authorImageTestID,
-  actionTextID,
   authorFallBackTestID,
-  authorNameTestID,
   readtime,
   disablePress,
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS ,translate} = theme;
+  const { COLORS, translate, enableReadTimeOnStoryScreen } = theme;
   const styles = authorRowStyleSheet(theme);
 
   return (
@@ -31,7 +29,10 @@ export const AuthorRow = ({
         }
         return (
           <View style={styles.container} key={author.id}>
-            <View style={styles.imageBlock} testID={authorImageTestID}>
+            <View
+              style={styles.imageBlock}
+              testID={COMP_CONTENT_CONSTANTS.authorImage}
+            >
               {author?.['avatar-s3-key'] ? (
                 <ResponsiveImage
                   source={{
@@ -55,11 +56,13 @@ export const AuthorRow = ({
             <ActionText
               onPress={onPress}
               endPoint={author}
-              testID={actionTextID}
               disablePress={disablePress}
             >
               <View style={styles.descriptionBlock}>
-                <Text style={styles.authorStyle} testID={authorNameTestID}>
+                <Text
+                  style={styles.authorStyle}
+                  testID={COMP_CONTENT_CONSTANTS.authorName}
+                >
                   {author.name}
                 </Text>
               </View>
@@ -67,9 +70,13 @@ export const AuthorRow = ({
           </View>
         );
       })}
-      {readtime ? (
+      {enableReadTimeOnStoryScreen && readtime ? (
         <View style={styles.readtimeComponent}>
-          <Text style={styles.readtime}>{`|  ${readtime} ${translate("min read")}`}</Text>
+          <Text style={styles.readtime}>
+            {`|  ${readtime} ${translate(
+              'min read',
+            )}`}
+          </Text>
         </View>
       ) : null}
     </View>
@@ -82,8 +89,5 @@ AuthorRow.propTypes = {
   cdn: PropTypes.string.isRequired,
   disablePress: PropTypes.bool,
   authorFallBackTestID: PropTypes.string,
-  authorImageTestID: PropTypes.string,
-  authorNameTestID: PropTypes.string,
-  actionTextID: PropTypes.string,
   readtime: PropTypes.number,
 };

package/src/components/BackNavigator/styles.js

@@ -6,6 +6,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     container: {
       flexDirection: 'row',
       justifyContent: 'flex-start',
+      marginRight: 20,
       alignItems: 'center',
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
     },
@@ -29,6 +30,7 @@ export const backNavigatorStyles = (appThemeContext) => {
     text: {
       marginLeft: 10,
       opacity: 0.9,
+      flexShrink: 1,
     },
   });
 };

package/src/components/Button/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
-  StyleSheet, TouchableOpacity,
+  StyleSheet,
+  TouchableOpacity,
   View,
-
   ViewPropTypes,
-} from 'react-native';
-import { AppTheme } from '../../utils';
-import { Text } from '../Text';
-import { styles } from './styles';
+} from "react-native";
+import { AppTheme } from "../../utils";
+import { Text } from "../Text";
+import { styles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const Button = (props) => {
   const { icon, text, onPress } = props;
@@ -21,7 +22,10 @@ export const Button = (props) => {
 
   return (
     <View>
-      <TouchableOpacity onPress={onPress}>
+      <TouchableOpacity
+        onPress={onPress}
+        testID={COMP_GENERAL_CONSTANTS.buttonTouch}
+      >
         <View style={btnStyle}>
           <Text style={textStyle}>{text}</Text>
           {icon}

package/src/components/CollectionCard/index.js

@@ -17,17 +17,21 @@ export const CollectionCard = ({
   onStoryPress,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
   return (
     <>
+      {!hideCollectionTitle
+      && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCard
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
@@ -62,6 +66,7 @@ CollectionCard.propTypes = {
   onStoryPress: PropTypes.func,
   offset: PropTypes.number,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCard.defaultProps = {

package/src/components/CollectionCardNew/index.js

@@ -19,18 +19,21 @@ const CollectionCardNewBase = ({
   collectionTestID,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
 
   return (
     <>
+      {!hideCollectionTitle && (
       <CollectionTitleNew
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCardNew
         collectionTestID={collectionTestID}
         onPress={() => {
@@ -71,6 +74,7 @@ CollectionCardNewBase.propTypes = {
   onStoryPress: PropTypes.func,
   collectionTestID: PropTypes.string,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCardNewBase.defaultProps = {

package/src/components/CollectionTitleNew/styles.js

@@ -13,7 +13,6 @@ export const collectionTitleStyles = (appThemeContext) => {
     },
     title: {
       fontSize: FONT_SIZE.h3,
-      fontWeight: 'bold',
       color: COLORS.BRAND_5,
     },
   });

package/src/components/CustomSwitch/index.js

@@ -1,23 +1,29 @@
-import React, { useContext, useState } from 'react';
-import { Switch, View } from 'react-native';
-import PropTypes from 'prop-types';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import { Text } from '../Text';
-import { AppTheme } from '../../utils';
-import { customSwitchStyles } from './styles';
+import React, { useContext, useState } from "react";
+import { Switch, View } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { Text } from "../Text";
+import { AppTheme } from "../../utils";
+import { customSwitchStyles } from "./styles";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
 
 export const CustomSwitch = ({
-  label = '', callback, isEnabled = true, iconSize = 20, iconName, isSwitchDisabled = false,
+  label = "",
+  callback,
+  isEnabled = true,
+  iconSize = 20,
+  iconName,
+  isSwitchDisabled = false,
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS } = theme;
   const styles = customSwitchStyles();
   const handleToggle = () => {
-    typeof callback === 'function' && callback(!isEnabled);
+    typeof callback === "function" && callback(!isEnabled);
   };
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container} testID={COMP_GENERAL_CONSTANTS.customSwitch}>
       <View style={styles.textContainer}>
         {!iconName ? null : (
           <View style={styles.iconStyle}>

package/src/components/Header/index.js

@@ -1,14 +1,15 @@
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
 import {
   StyleSheet,
   TouchableOpacity,
   View,
   ViewPropTypes,
-} from 'react-native';
+} from "react-native";
 
-import { headerStyles } from './styles';
-import { AppTheme } from '../../utils';
+import { headerStyles } from "./styles";
+import { AppTheme } from "../../utils";
+import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
@@ -19,11 +20,15 @@ export const Header = (props) => {
     props.logoComponentStyle,
   ]);
   return (
-    <View testID={props.testID} style={headerStyle}>
+    <View style={headerStyle}>
       <View>
         {props.leftComponent && props.leftComponent}
         {props.logoComponent && (
-          <TouchableOpacity style={logoComponentStyle} onPress={props.onPress}>
+          <TouchableOpacity
+            style={logoComponentStyle}
+            onPress={props.onPress}
+            testID={COMP_GENERAL_CONSTANTS.headerLogoTouch}
+          >
             {props.logoComponent}
           </TouchableOpacity>
         )}
@@ -34,7 +39,7 @@ export const Header = (props) => {
 };
 
 Header.defaultProps = {
-  onPress: () => { },
+  onPress: () => {},
 };
 
 Header.propTypes = {
@@ -43,7 +48,6 @@ Header.propTypes = {
   logoComponent: PropTypes.element,
   style: ViewPropTypes.style,
   logoComponentStyle: PropTypes.object,
-  testID: PropTypes.string,
   onPress: PropTypes.func,
   noBorder: PropTypes.bool,
 };

package/src/components/JSEmbedElement/index.js

@@ -81,7 +81,9 @@ export const JSEmbedElement = (props) => {
     <View testID="embed-js">
       <WebView
         ref={webViewRef}
-        style={{ width, height, flex: 0 }}
+        style={{
+          width, height, flex: 0, opacity: 0.99,
+        }}
         automaticallyAdjustContentInsets={false}
         scrollEnabled={false}
         onMessage={handleOnMessage}

package/src/components/PDFReader/styles.js

@@ -43,5 +43,6 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
     width: '20%',
     justifyContent: 'center',
     alignItems: 'center',
+    margin : 10
   },
 });