NTP-8070 | Rohitaksh | RN integration iOS (#14407)

Signed-off-by: kishan kumar <kishan.kumar@navi.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Chirayu <chirayu.mor@navi.com>
Co-authored-by: Prakhar Saxena <prakhar.saxena@navi.com>
Co-authored-by: Shivam Goyal <shivam.goyal@navi.com>
Co-authored-by: vedant aggarwal <vedant.aggarwal@navi.com>
Co-authored-by: A Shrihari Raju <shrihari.raju@navi.com>
Co-authored-by: Prajjaval Verma <prajjaval.verma@navi.com>
Co-authored-by: Raaj Gopal <raaj.gopal@navi.com>
Co-authored-by: Aman S <aman.s@navi.com>
Co-authored-by: Aman <amankasyapp@gmail.com>
Co-authored-by: Sanjay P <sanjay.p@navi.com>
Co-authored-by: Varun Jain <varun.jain@navi.com>
Co-authored-by: Shiv Natani <shiv.natani@navi.com>
Co-authored-by: Hardik Chaudhary <hardik.chaudhary@navi.com>
Co-authored-by: Kishan Kumar <kishan.kumar@navi.com>
Co-authored-by: Balrambhai Sharma <sharma.balrambhai@navi.com>
Co-authored-by: Ujjwal Kumar <ujjwal.kumar@navi.com>
Co-authored-by: Aditya Narayan Malik <aditya.narayan@navi.com>
Co-authored-by: Ayushman Sharma <ayushman.sharma@navi.com>
Co-authored-by: Anmol Agrawal <anmol.agrawal@navi.com>
Co-authored-by: Soumya Ranjan Patra <soumya.ranjan@navi.com>
Co-authored-by: Sohan Reddy Atukula <sohan.reddy@navi.com>
Co-authored-by: Sayed Owais Ali <sayed.owais@navi.com>
Co-authored-by: Ankit Yadav <ankit.yadav@navi.com>
Co-authored-by: Shaurya Rehan <shaurya.rehan@navi.com>
Co-authored-by: saksham-mahajan_navi <saksham.mahajan@navi.com>
Co-authored-by: shankar yadav <shankar.yadav@navi.com>
Co-authored-by: Mehul Garg <mehul.garg@navi.com>
Co-authored-by: Somarapu Vamshi <somarapu.vamshi@navi.com>
Co-authored-by: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>
Co-authored-by: Sandeep Kumar <sandeep.ku@navi.com>
Co-authored-by: Aparna Vadlamani <aparna.vadlamani@navi.com>
Co-authored-by: Siddiboina Susai <siddiboina.susai@navi.com>
Co-authored-by: Kamalesh Garnayak <kamalesh.garnayak@navi.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Divyesh Shinde <divyesh.shinde@navi.com>
Co-authored-by: Mohit Rajput <mohit.rajput@navi.com>
Co-authored-by: Akshita Singh <akshita.singh@navi.com>
Co-authored-by: shreyansu raj <shreyansu.raj@navi.com>
Co-authored-by: Venkat Praneeth Reddy <venkat.praneeth@navi.com>

.github/workflows/rn_nexus_upload.yml

@@ -0,0 +1,40 @@
+name: RN - Publish node_modules ZIP to Nexus
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - package.json
+  workflow_dispatch:
+  
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  pack-and-upload-js:
+    runs-on: [ default ]
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.0
+      - name: Clean NPM Modules
+        run: npm cache clean --force
+      - name: Install yarn
+        run: npm install --global yarn
+      - name: Install Node Modules
+        run: yarn install
+      - name: Get Version from package.json
+        id: get-version
+        shell: bash
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+      - name: Create ZIP Archive of /node_modules
+        run: zip -r node_modules.zip node_modules
+      - name: Publish ZIP to Nexus
+        run: curl -u "${{ secrets.NEXUS_USERNAME }}:${{ secrets.NEXUS_PASSWORD }}" --upload-file node_modules.zip https://nexus.cmd.navi-tech.in/repository/android-apk-artifacts/react-native/${{ env.VERSION }}.zip

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "IOS"]
+	path = IOS
+	url = git@github.com:navi-ios/ios-consumer-app.git

App/common/constants/NumericalConstants.ts

@@ -1,6 +1,7 @@
 export const HEADER_LOTTIE_WIDGET_HEIGHT = 180;
 export const HEADER_LOTTIE_TITLE_HEIGHT = 84;
 export const BOTTOMSHEET_ANIMATION_DURATION = 200;
+export const BOTTOMSHEET_DISMISS_ANIMATION_DURATION = 100;
 export const INITIAL_Y_VALUE = 0;
 export const THRESHOLD_Y_BENEFIT = 50;
 export const SCREEN_MID = 0.5;

App/common/constants/StringConstant.ts

@@ -68,6 +68,13 @@ export enum SeparatorOrientationType {
   HORIZONTAL = "horizontal",
 }
 
+export const FontMapping = {
+  tt_bold: "NaviHeadline-Bold",
+  tt_regular: "NaviBody-Regular",
+  tt_semi_bold: "NaviBody-DemiBold",
+  tt_medium: "NaviHeadline-Reg",
+};
+
 export const UrlConstants = {
   MIGRATION_BENEFIT_SCREEN_URL: "GI_MIGRATION_BENEFIT",
   RENEWAL_PLAN_MIGRATION_SCREEN_URL: "GI_RENEWAL_PLAN_MIGRATION_SCREEN",

App/common/hooks/useBottomSheet.tsx

@@ -43,7 +43,7 @@ export const useBottomSheet = (
   const replaceBottomSheet = (modalView: ModalView) => {
     setTimeout(() => {
       removeBottomSheet();
-    }, BOTTOMSHEET_ANIMATION_DURATION);
+    }, BOTTOMSHEET_DISMISS_ANIMATION_DURATION); // This delay ensures the first bottom sheet closes before the next one appears.
     setTimeout(() => {
       addBottomSheet(modalView);
     }, BOTTOMSHEET_ANIMATION_DURATION);

App/common/utilities/MiscUtils.ts

@@ -1,5 +1,5 @@
 import { CtaData } from "../interface";
-import { SPACE_UNICODE } from "../constants/StringConstant";
+import { FontMapping, SPACE_UNICODE } from "../constants/StringConstant";
 import {
   AnalyticsEventNameConstants,
   BASE_SCREEN,
@@ -72,6 +72,19 @@ export const getTextWithHtmlSpace = (text?: string) => {
   return text?.split(" ").join(SPACE_UNICODE);
 };
 
+type FontKey = keyof typeof FontMapping;
+
+export const getMappedFontForIos = (currentFont?: string): string => {
+  if (!currentFont) {
+    return "";
+  }
+  const currentFontKey = currentFont as FontKey;
+  if (FontMapping[currentFontKey]) {
+    return FontMapping[currentFontKey];
+  }
+  return currentFont;
+};
+
 export const parseString = (value: string) => {
   switch (value) {
     case "true":

components/bottomsheet/title-subtitle-with-dropdown-bottom-sheet/TitleSubtitleWithDropdownBottomSheet.tsx

@@ -3,6 +3,7 @@ import {
   Animated,
   FlatList,
   LayoutAnimation,
+  Platform,
   ScrollView,
   TouchableOpacity,
   View,
@@ -17,6 +18,7 @@ import {
 import { StyledImage } from "../../StyledImage";
 import { StyledText } from "../../widgets/styled-text/StyledText";
 import styles from "./TitleSubtitleWithDropdownBottomSheetStyles";
+import { OsTypeConstants } from "../../../App/common/constants";
 
 const InfoItemComponent = ({ item }: { item: KeyValueInfoData }) => {
   return (
@@ -47,7 +49,9 @@ const DropDownComponent = ({
     setIsExpanded(value => !value);
     if (!!dropdownData?.title?.cta?.analyticsEventProperties && isExpanded)
       sendAsAnalyticsEvent(dropdownData?.title?.cta?.analyticsEventProperties);
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (Platform.OS === OsTypeConstants.ANDROID) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    }
     Animated.timing(rotateAnimation, {
       toValue: isExpanded ? 0 : 1,
       duration: 300,

components/bottomsheet/top-section-expandable-bottom-sheet/TopSectionExpandableBottomSheet.tsx

@@ -4,6 +4,7 @@ import {
   LayoutAnimation,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  Platform,
   ScrollView,
   TouchableOpacity,
   View,
@@ -14,7 +15,10 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
-import { INITIAL_Y_VALUE } from "../../../App/common/constants";
+import {
+  INITIAL_Y_VALUE,
+  OsTypeConstants,
+} from "../../../App/common/constants";
 import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
 import { NaviLinearGradient } from "../../../App/common/hooks/useGradient";
 import {
@@ -139,7 +143,9 @@ const DropDownComponent = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const toggleOpen = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (Platform.OS === OsTypeConstants.ANDROID) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    }
     setIsExpanded(value => !value);
     dropdownData?.toggleEvent &&
       sendAsAnalyticsEvent(dropdownData?.toggleEvent);

components/reusable/cta-button/CtaButton.tsx

@@ -4,6 +4,9 @@ import { ButtonState } from "../../../App/common/interface/widgets/widgetData/Fo
 import { LottieFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
 import { StyledLottie } from "../../widgets/styled-lottie/StyledLottie";
 import styles from "./CtaButtonStyle";
+import { Platform } from "react-native";
+import { OsTypeConstants } from "../../../App/common/constants/BuildConfigConstants";
+import LottieView from "../../widgets/styled-lottie/StyledLottieIos";
 
 const CtaButton = ({
   onPress,
@@ -23,13 +26,17 @@ const CtaButton = ({
   };
   return (
     <TouchableOpacity
-    activeOpacity={1}
+      activeOpacity={1}
       onPress={onPress}
       disabled={state === ButtonState.DISABLED || state === ButtonState.LOADING}
       style={[styles.footerButtonContainer, style]}
     >
       {state === ButtonState.LOADING ? (
-        <StyledLottie lottieFieldData={loaderData} />
+        Platform.OS === OsTypeConstants.IOS ? (
+          <LottieView />
+        ) : (
+          <StyledLottie lottieFieldData={loaderData} />
+        )
       ) : (
         children
       )}

components/widgets/styled-lottie/StyledLottieIos.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { requireNativeComponent, ViewStyle } from "react-native";
+import type { StyleProp } from "react-native";
+import styles from "./StyledLottieComponentStyle";
+
+type LottieViewProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+const LottieViewNative = requireNativeComponent<LottieViewProps>("LottieView");
+
+const LottieView = () => {
+  return <LottieViewNative style={styles.lottie} />;
+};
+
+export default LottieView;

components/widgets/styled-text/StyledText.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
 import { CtaData } from "../../../App/common/interface";
@@ -12,6 +12,8 @@ import {
 import { StyledImage } from "../../StyledImage";
 import { StyledLottie } from "../styled-lottie/StyledLottie";
 import styles from "./StyledTextComponentStyle";
+import { OsTypeConstants } from "../../../App/common/constants";
+import { getMappedFontForIos } from "../../../App/common/utilities/MiscUtils";
 
 export const StyledText = ({
   textFieldData,
@@ -25,6 +27,12 @@ export const StyledText = ({
     actionPayloadList: GenericActionPayload | undefined,
   ) => void;
 }) => {
+  if (Platform.OS === OsTypeConstants.IOS) {
+    textFieldData.textStyle = {
+      ...textFieldData.textStyle,
+      fontFamily: getMappedFontForIos(textFieldData.textStyle?.fontFamily),
+    };
+  }
   let text: string = textFieldData.text;
   let topImage: ImageFieldData | undefined =
     textFieldData?.textDrawableData?.top;
@@ -154,6 +162,12 @@ const TextComponent = ({ textFieldData }: { textFieldData: TextFieldData }) => {
 
   textFieldData.substringStyles?.forEach(({ substring, textStyle }, index) => {
     textFieldString = substringStyleMap?.pop()?.substring || textFieldData.text;
+    if (Platform.OS === OsTypeConstants.IOS) {
+      textStyle = {
+        ...textStyle,
+        fontFamily: getMappedFontForIos(textStyle?.fontFamily),
+      };
+    }
     if (substring) {
       const splitArray = textFieldString.split(substring);
       const part1: SubstringStyle = {