@100mslive/react-native-room-kit 0.1.0 → 1.0.0

package/lib/typescript/utils/functions.d.ts

@@ -1,4 +1,4 @@
-import { HMSPeer, HMSTrack, HMSVideoTrack } from '@100mslive/react-native-hms';
+import { HMSPeer, HMSTrack, HMSVideoTrack, HMSRole } from '@100mslive/react-native-hms';
 import type { PeerTrackNode } from './types';
 import { PERMISSIONS } from 'react-native-permissions';
 export declare const getMeetingUrl: () => string;
@@ -7,6 +7,7 @@ export declare const getInitials: (name?: String) => String;
 export declare const parseMetadata: (metadata?: string) => {
     isHandRaised?: boolean;
     isBRBOn?: boolean;
+    prevRole?: string;
 };
 export declare const requestExternalStoragePermission: () => Promise<boolean>;
 export declare const callService: (roomID: string, success: Function, failure: Function) => Promise<void>;
@@ -58,4 +59,5 @@ export declare function groupIntoPairs(totalNumber: number): number[][];
  * Example: If list is `[a, b, c, d]`, then output will be `[ [a, b, c], [d] ]`
  */
 export declare function groupIntoTriplets<T>(list: T[], fill?: boolean): (T | undefined)[][];
+export declare const isParticipantHostOrBroadcaster: (role: HMSRole) => boolean;
 //# sourceMappingURL=functions.d.ts.map

package/lib/typescript/utils/functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/utils/functions.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,QAAQ,EAGR,aAAa,EACd,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EACL,WAAW,EAIZ,MAAM,0BAA0B,CAAC;AAGlC,eAAO,MAAM,aAAa,cACmC,CAAC;AAG9D,eAAO,MAAM,cAAc,cAAsB,CAAC;AAElD,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,MAkB3C,CAAC;AAEF,eAAO,MAAM,aAAa,cACb,MAAM,KAChB;IACD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CAWnB,CAAC;AAEF,eAAO,MAAM,gCAAgC,QAAa,QAAQ,OAAO,CAkCxE,CAAC;AAEF,eAAO,MAAM,WAAW,WACd,MAAM,WACL,QAAQ,WACR,QAAQ,kBA8ClB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAS,MAAM,OAAO,MAAM,WAE9D,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,MAAM,WAM7C,CAAC;AAEF,eAAO,MAAM,YAAY,mBACP,aAAa,EAAE,UACvB,MAAM,KACb,aAAa,EAQf,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBACZ,aAAa,EAAE,QACzB,OAAO,UACL,QAAQ,KACf,aAAa,EAaf,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBACd,aAAa,EAAE,cACnB,OAAO,KAClB,aAAa,EAOf,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBACf,aAAa,EAAE,QACzB,OAAO,SACN,QAAQ,KACd,aAAa,EAcf,CAAC;AAEF,eAAO,MAAM,eAAe,mBACV,aAAa,EAAE,QACzB,OAAO,KACZ,aAAa,EAUf,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,OAAO,UACL,QAAQ,KACf,aAgBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBACV,aAAa,EAAE,yBACd,aAAa,EAAE,KACrC,aAAa,EAWf,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,OAc1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,gBACd,MACX,CAAC,OAAO,YAAY,OAAO,CAAC,CAAC,MAAM,OAAO,YAAY,OAAO,CAAC,CAC/D,KACA,QAAQ,OAAO,CAyCjB,CAAC;AAEF,eAAO,MAAM,QAAQ,4BACM,aAAa,EAAE,SACjC,MAAM,0BACW,MAAM,GAAG,IAAI,sBAsCtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qBACV,MAAM,GAAG,SAAS,GAAG,IAAI,cAC/B;IACV,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,qBAAqB,CAAC,EAAE,QAAQ,CAAC;IACjC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC5B;;;;CAuBF,CAAC;AAEF,eAAO,MAAM,yBAAyB,gBACvB,MAAM,OACd,MAAM,UACH,MAAM,yBACS,OAAO;;;CAoC/B,CAAC;AAKF,eAAO,MAAM,kBAAkB,gBAAiB,aAAa,EAAE,EAAE,8BAwBhE,CAAC;AAEF,eAAO,MAAM,OAAO,cAAe,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAQlE,CAAC;AAEF,eAAO,MAAM,2BAA2B,SAAU,IAAI,WAWrD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,cAUjD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,uBAsB7D"}
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/utils/functions.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,OAAO,EACP,QAAQ,EAGR,aAAa,EACb,OAAO,EACR,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EACL,WAAW,EAIZ,MAAM,0BAA0B,CAAC;AAGlC,eAAO,MAAM,aAAa,cACmC,CAAC;AAG9D,eAAO,MAAM,cAAc,cAAsB,CAAC;AAElD,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,MAkB3C,CAAC;AAEF,eAAO,MAAM,aAAa,cACb,MAAM,KAChB;IACD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAWnB,CAAC;AAEF,eAAO,MAAM,gCAAgC,QAAa,QAAQ,OAAO,CAkCxE,CAAC;AAEF,eAAO,MAAM,WAAW,WACd,MAAM,WACL,QAAQ,WACR,QAAQ,kBA8ClB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,QAAS,MAAM,OAAO,MAAM,WAE9D,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,MAAM,WAM7C,CAAC;AAEF,eAAO,MAAM,YAAY,mBACP,aAAa,EAAE,UACvB,MAAM,KACb,aAAa,EAQf,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBACZ,aAAa,EAAE,QACzB,OAAO,UACL,QAAQ,KACf,aAAa,EAaf,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBACd,aAAa,EAAE,cACnB,OAAO,KAClB,aAAa,EAOf,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBACf,aAAa,EAAE,QACzB,OAAO,SACN,QAAQ,KACd,aAAa,EAcf,CAAC;AAEF,eAAO,MAAM,eAAe,mBACV,aAAa,EAAE,QACzB,OAAO,KACZ,aAAa,EAUf,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,OAAO,UACL,QAAQ,KACf,aAgBF,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBACV,aAAa,EAAE,yBACd,aAAa,EAAE,KACrC,aAAa,EAWf,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,OAc1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,gBACd,MACX,CAAC,OAAO,YAAY,OAAO,CAAC,CAAC,MAAM,OAAO,YAAY,OAAO,CAAC,CAC/D,KACA,QAAQ,OAAO,CAyCjB,CAAC;AAEF,eAAO,MAAM,QAAQ,4BACM,aAAa,EAAE,SACjC,MAAM,0BACW,MAAM,GAAG,IAAI,sBAsCtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qBACV,MAAM,GAAG,SAAS,GAAG,IAAI,cAC/B;IACV,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,qBAAqB,CAAC,EAAE,QAAQ,CAAC;IACjC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;CAC5B;;;;CAuBF,CAAC;AAEF,eAAO,MAAM,yBAAyB,gBACvB,MAAM,OACd,MAAM,UACH,MAAM,yBACS,OAAO;;;CAoC/B,CAAC;AAKF,eAAO,MAAM,kBAAkB,gBAAiB,aAAa,EAAE,EAAE,8BAwBhE,CAAC;AAEF,eAAO,MAAM,OAAO,cAAe,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAQlE,CAAC;AAEF,eAAO,MAAM,2BAA2B,SAAU,IAAI,WAWrD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,cAUjD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,uBAsB7D;AAED,eAAO,MAAM,8BAA8B,SAAU,OAAO,KAAG,OAK9D,CAAC"}

package/lib/typescript/utils/theme.d.ts

@@ -129,6 +129,6 @@ export declare const COLORS: {
     };
 };
 export declare function hexToRgbA(hex: string, alpha?: number): string;
-export declare const DEFAULT_TYPOGRAPHY: Typography;
+export declare const DEFAULT_TYPOGRAPHY: Required<Typography>;
 export declare const DEFAULT_THEME: Required<Theme>;
 //# sourceMappingURL=theme.d.ts.map

package/lib/typescript/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/utils/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,KAAK,EACL,UAAU,EACX,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ChB,CAAC;AAEH,eAAO,MAAM,oBAAoB,EAAE,YAyClC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFlB,CAAC;AAEF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU,UAavD;AAED,eAAO,MAAM,kBAAkB,EAAE,UAEhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,KAAK,CAIzC,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/utils/theme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,EACZ,KAAK,EACL,UAAU,EACX,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ChB,CAAC;AAEH,eAAO,MAAM,oBAAoB,EAAE,YAyClC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFlB,CAAC;AAEF,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU,UAavD;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,UAAU,CAEnD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,KAAK,CAKzC,CAAC"}

package/lib/typescript/utils/types.d.ts

@@ -39,10 +39,9 @@ export declare enum ModalTypes {
     LEAVE_ROOM = "leaveRoom",
     END_ROOM = "endRoom",
     SETTINGS = "settings",
-    CHAT = "chat",
     ZOOM = "zoom",
     PREVIEW = "preview",
-    PARTICIPANTS = "participants",
+    CHAT_AND_PARTICIPANTS = "chat_and_participants",
     AUDIO_MIXING_MODE = "audioMixingMode",
     SET_AUDIO_SHARE_VOLUME = "setAudioShareVolume",
     WELCOME_SETTINGS = "welcomeSettings",
@@ -80,7 +79,12 @@ export declare const SUPPORTED_ASPECT_RATIOS: {
     id: string;
 }[];
 export declare enum MaxTilesInOnePage {
+    IN_PORTRAIT_WITH_SCREENSHARES = 2,
     IN_PORTRAIT = 6,
     IN_LANDSCAPE = 2
 }
+export declare const ChatBottomSheetTabs: readonly ["Chat", "Participants"];
+export declare const ChatBroadcastFilter: {
+    readonly name: "everyone";
+};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CAEtB,CAAC;AAEF,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,KAAK;CACb;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,KAAK;CACb;AAED,oBAAY,UAAU;IACpB,kBAAkB,qBAAqB;IACvC,mBAAmB,sBAAsB;IACzC,iBAAiB,oBAAoB;IACrC,WAAW,eAAe;IAC1B,YAAY,qBAAqB;IACjC,iBAAiB,yBAAyB;IAC1C,WAAW,eAAe;IAC1B,aAAa,iBAAiB;IAC9B,iBAAiB,oBAAoB;IACrC,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,SAAS,aAAa;IACtB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,cAAc;IACxB,UAAU,cAAc;IACxB,QAAQ,YAAY;IACpB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,iBAAiB,oBAAoB;IACrC,sBAAsB,wBAAwB;IAC9C,gBAAgB,oBAAoB;IACpC,gBAAgB,mBAAmB;IACnC,aAAa,iBAAiB;IAC9B,yBAAyB,4BAA4B;IACrD,uBAAuB,yBAAyB;IAChD,cAAc,kBAAkB;IAChC,OAAO,KAAK;CACb;AAED,oBAAY,WAAW;IACrB,YAAY,uBAAuB;IACnC,QAAQ,aAAa;IACrB,aAAa,kBAAkB;IAC/B,OAAO,SAAS;CACjB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,QAAQ;IAClB,aAAa,KAAK;IAClB,MAAM,IAAI;IACV,QAAQ,IAAI;CACb;AAED,oBAAY,SAAS;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;GAMnC,CAAC;AAEF,oBAAY,iBAAiB;IAC3B,WAAW,IAAI;IACf,YAAY,IAAI;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CAEtB,CAAC;AAEF,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,OAAO,KAAK;CACb;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,KAAK;CACb;AAED,oBAAY,UAAU;IACpB,kBAAkB,qBAAqB;IACvC,mBAAmB,sBAAsB;IACzC,iBAAiB,oBAAoB;IACrC,WAAW,eAAe;IAC1B,YAAY,qBAAqB;IACjC,iBAAiB,yBAAyB;IAC1C,WAAW,eAAe;IAC1B,aAAa,iBAAiB;IAC9B,iBAAiB,oBAAoB;IACrC,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,SAAS,aAAa;IACtB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,cAAc;IACxB,UAAU,cAAc;IACxB,QAAQ,YAAY;IACpB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,qBAAqB,0BAA0B;IAC/C,iBAAiB,oBAAoB;IACrC,sBAAsB,wBAAwB;IAC9C,gBAAgB,oBAAoB;IACpC,gBAAgB,mBAAmB;IACnC,aAAa,iBAAiB;IAC9B,yBAAyB,4BAA4B;IACrD,uBAAuB,yBAAyB;IAChD,cAAc,kBAAkB;IAChC,OAAO,KAAK;CACb;AAED,oBAAY,WAAW;IACrB,YAAY,uBAAuB;IACnC,QAAQ,aAAa;IACrB,aAAa,kBAAkB;IAC/B,OAAO,SAAS;CACjB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,QAAQ;IAClB,aAAa,KAAK;IAClB,MAAM,IAAI;IACV,QAAQ,IAAI;CACb;AAED,oBAAY,SAAS;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;GAMnC,CAAC;AAEF,oBAAY,iBAAiB;IAC3B,6BAA6B,IAAI;IACjC,WAAW,IAAI;IACf,YAAY,IAAI;CACjB;AAED,eAAO,MAAM,mBAAmB,mCAAoC,CAAC;AAErE,eAAO,MAAM,mBAAmB;;CAAgC,CAAC"}

package/lib/typescript/utils.d.ts

@@ -8,5 +8,10 @@ declare const DEFAULT_JOINING_CONFIG: {
     autoResize: boolean;
 };
 export declare const getJoinConfig: () => typeof DEFAULT_JOINING_CONFIG;
+export declare enum NotificationTypes {
+    ROLE_CHANGE_DECLINED = "role_change_declined",
+    HAND_RAISE = "hand_raise",
+    LOCAL_SCREENSHARE = "local_screenshare"
+}
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,sBAAsB;;;;;;;;CAQ3B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,6BAShC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,sBAAsB;;;;;;;;CAQ3B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,6BAShC,CAAC;AAEF,oBAAY,iBAAiB;IAC3B,oBAAoB,yBAAyB;IAC7C,UAAU,eAAe;IACzB,iBAAiB,sBAAsB;CACxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,12 +51,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@100mslive/types-prebuilt": "^0.12.0",
     "@react-navigation/native": "^6.0.8",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0"
   },
   "devDependencies": {
-    "@100mslive/types-prebuilt": "^0.8.0",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
@@ -64,7 +64,6 @@
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "^0.64.5",
-    "@types/react-native-vector-icons": "^6.4.8",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -80,19 +79,21 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "github:100mslive/100ms-react-native#release1.8.0",
+    "@100mslive/react-native-hms": "1.8.0",
+    "@react-native-community/blur": "^4.3.2",
+    "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",
+    "lottie-react-native": "5.1.6",
     "react": "*",
     "react-native": "*",
-    "react-native-avoid-softinput": "^2.4.8",
     "react-native-gesture-handler": "^2.12.1",
+    "react-native-keyboard-controller": "^1.6.1",
     "react-native-linear-gradient": "^2.7.3",
     "react-native-modal": "^12.1.0",
     "react-native-permissions": "3.4.0",
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^3.3.0",
-    "react-native-simple-toast": "^1.1.3",
-    "react-native-vector-icons": "^9.1.0"
+    "react-native-simple-toast": "^1.1.3"
   },
   "resolutions": {
     "@types/react": "17.0.21"
@@ -173,6 +174,10 @@
           "tsc": "node_modules/typescript/bin/tsc"
         }
       ]
-    ]
+    ],
+    "main": "lib/commonjs/index.js",
+    "module": "lib/module/index.js",
+    "react-native": "src/index.ts",
+    "types": "lib/typescript/index.d.ts"
   }
 }

package/src/HMSPrebuilt.tsx

@@ -4,6 +4,7 @@ import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import { store } from './redux/index';
 import { HMSContainer } from './HMSContainer';
@@ -18,6 +19,7 @@ export interface HMSPrebuiltProps {
     endPoints?: {
       init: string;
       token: string;
+      layout: string;
     };
     debugMode?: boolean;
     ios?: HMSIOSScreenShareConfig;
@@ -34,21 +36,19 @@ const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
   // We just want to check if SafeAreaProvider exists or not
   const safeAreaProviderExists = !!SafeAreaInsetsContext.Consumer._currentValue;
 
-  if (safeAreaProviderExists) {
-    return (
+  const content = (
+    <KeyboardProvider>
       <Provider store={store}>
         <HMSContainer />
       </Provider>
-    );
+    </KeyboardProvider>
+  );
+
+  if (safeAreaProviderExists) {
+    return content;
   }
 
-  return (
-    <SafeAreaProvider>
-      <Provider store={store}>
-        <HMSContainer />
-      </Provider>
-    </SafeAreaProvider>
-  );
+  return <SafeAreaProvider>{content}</SafeAreaProvider>;
 };
 
 // TODO: handle props change

package/src/HMSRoomSetup.tsx

@@ -39,6 +39,7 @@ import {
   useHMSRoomStyle,
   useHMSSessionStore,
   useLeaveMethods,
+  isPublishingAllowed,
 } from './hooks-util';
 import {
   peerTrackNodeExistForPeerAndTrack,
@@ -50,8 +51,15 @@ import { MeetingState } from './types';
 import { getJoinConfig } from './utils';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { HMSMeetingEnded } from './components/HMSMeetingEnded';
-import { selectIsHLSViewer, selectShouldGoLive } from './hooks-util-selectors';
+import {
+  selectChatLayoutConfig,
+  selectIsHLSViewer,
+  selectLayoutConfigForRole,
+  selectShouldGoLive,
+  selectVideoTileLayoutConfig,
+} from './hooks-util-selectors';
 import type { RootState } from './redux';
+import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
 
 type PreviewData = {
   room: HMSRoom;
@@ -64,6 +72,7 @@ export const HMSRoomSetup = () => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore<RootState>();
+  const { goToPreview } = useLeaveMethods(true);
 
   const { getConfig, clearConfig } = useHMSConfig();
   const meetingState = useSelector(
@@ -71,7 +80,6 @@ export const HMSRoomSetup = () => {
   );
   const [peerTrackNodes, setPeerTrackNodes] = useState<PeerTrackNode[]>([]);
   const [loading, setLoading] = useState(false);
-  const { goToPreview } = useLeaveMethods();
 
   const joinMeeting = useCallback(async () => {
     setLoading(true);
@@ -193,13 +201,38 @@ export const HMSRoomSetup = () => {
       const peer = localPeer;
       const track = localPeer.videoTrack as HMSTrack | undefined;
 
+      const currentLayoutConfig = selectLayoutConfigForRole(
+        reduxState.hmsStates.layoutConfig,
+        localPeer.role || null
+      );
+
+      const isHLSViewer = selectIsHLSViewer(
+        localPeer.role,
+        currentLayoutConfig
+      );
+
       // Creating `PeerTrackNode` for local peer
       const localPeerTrackNode = createPeerTrackNode(peer, track);
 
+      const enableLocalTileInset =
+        selectVideoTileLayoutConfig(currentLayoutConfig)?.grid
+          ?.enable_local_tile_inset;
+
+      const canCreateTile = isPublishingAllowed(localPeer) && !isHLSViewer;
+
       batch(() => {
-        if (selectIsHLSViewer(localPeer)) {
+        const chatConfig = selectChatLayoutConfig(currentLayoutConfig);
+        const overlayChatInitialState =
+          chatConfig && chatConfig.is_overlay && chatConfig.initial_state;
+
+        if (
+          !!chatConfig &&
+          overlayChatInitialState === Chat_ChatState.CHAT_STATE_OPEN
+        ) {
           dispatch({ type: 'SET_SHOW_CHAT_VIEW', showChatView: true });
-        } else {
+        }
+
+        if (canCreateTile) {
           if (reduxState.app.localPeerTrackNode) {
             dispatch(
               updateLocalPeerTrackNode({ peer, track: peer.videoTrack })
@@ -210,8 +243,11 @@ export const HMSRoomSetup = () => {
           }
 
           // setting local `PeerTrackNode` as node for MiniView
-          dispatch(setMiniViewPeerTrackNode(localPeerTrackNode));
+          if (enableLocalTileInset) {
+            dispatch(setMiniViewPeerTrackNode(localPeerTrackNode));
+          }
         }
+
         dispatch(setHMSRoomState(data.room));
         dispatch(setHMSLocalPeerState(data.room.localPeer));
       });
@@ -232,8 +268,10 @@ export const HMSRoomSetup = () => {
           return replacePeerTrackNodes(prevPeerTrackNodes, peer);
         }
 
-        //   const hmsLocalPeer = createPeerTrackNode(peer, track);
-        //   return [hmsLocalPeer, ...prevPeerTrackNodes];
+        // setting local `PeerTrackNode` in regular peerTrackNodes array when inset tile is disabled
+        if (!enableLocalTileInset && canCreateTile) {
+          return [localPeerTrackNode, ...prevPeerTrackNodes];
+        }
 
         return prevPeerTrackNodes;
       });
@@ -295,31 +333,15 @@ export const HMSRoomSetup = () => {
     }
   }, [meetingEnded]);
 
+  const { leave } = useLeaveMethods(true);
+
   useEffect(() => {
     return () => {
       ignoreHLSStreamPromise.current = true;
-
-      // TODOS:
-      // - Check If we have already left meeting, or destroyed native HMSSDK
-      //    - No need to reset redux state?
-      //    - HMSInstance will be available till this point
-      //    - If we have callback fn, call it
-      //    - When we are navigated away from screen, HMSInstance will be not available
-      // - Otherwise
-      //    - call leave method, if not called
-      //    - call destroy method, if not called
-      //    - Reset Redux States or No need?
-      //    - If we have callback fn, call it
-      //    - When we are navigated away from screen, HMSInstance will be not available
-      hmsInstance.leave().finally(() => {
-        hmsInstance.destroy();
-        dispatch(clearStore());
-      });
-      //dispatch(clearHmsReference());
-      // dispatch(clearMessageData());
-      // dispatch(clearPeerData());
+      leave();
+      dispatch(clearStore());
     };
-  }, [hmsInstance]);
+  }, []);
 
   const emptyViewStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.background_dim,

package/src/Icons/AlertTriangle/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface AlertTriangleIconProps extends Omit<ImageProps, 'source'> {}
+interface AlertTriangleIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'fill' | 'line';
+}
 
 export const AlertTriangleIcon: React.FC<AlertTriangleIconProps> = ({
   style,
+  type = 'line',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,7 +19,11 @@ export const AlertTriangleIcon: React.FC<AlertTriangleIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/alert-triangle.png')}
+      source={
+        type === 'fill'
+          ? require('./assets/alert-triangle-filled.png')
+          : require('./assets/alert-triangle.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/Eye/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface EyeIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'small';
+}
+
+export const EyeIcon: React.FC<EyeIconProps> = ({
+  style,
+  size = 'small',
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/eye-on-small.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 16,
+    height: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Person/index.tsx

@@ -2,15 +2,26 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
-interface PersonIconProps extends Omit<ImageProps, 'source'> {}
+interface PersonIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'off' | 'normal' | 'left' | 'rectangle';
+}
 
 export const PersonIcon: React.FC<PersonIconProps> = ({
   style,
+  type = 'normal',
   ...restProps
 }) => {
   return (
     <Image
-      source={require('./assets/person.png')}
+      source={
+        type === 'off'
+          ? require('./assets/person-off.png')
+          : type === 'left'
+          ? require('./assets/person-left.png')
+          : type === 'rectangle'
+          ? require('./assets/person-rectangle.png')
+          : require('./assets/person.png')
+      }
       style={[styles.icon, style]}
       {...restProps}
     />

package/src/Icons/Radio/index.tsx

@@ -1,27 +1,76 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
-import type { ImageProps } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
+import type { ImageProps, StyleProp, ViewStyle } from 'react-native';
 
-interface RadioIconProps extends Omit<ImageProps, 'source'> {}
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+type RadioIconProps = Omit<ImageProps, 'source'> &
+  (
+    | {
+        size?: 'normal';
+      }
+    | {
+        size?: 'extra-large';
+        containerStyle?: StyleProp<ViewStyle>;
+      }
+  );
 
 export const RadioIcon: React.FC<RadioIconProps> = ({
   style,
   ...restProps
 }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_high,
+    },
+  }));
+
+  if (restProps.size === 'extra-large') {
+    return (
+      <View
+        style={[
+          styles.container,
+          hmsRoomStyles.container,
+          restProps.containerStyle,
+        ]}
+      >
+        <Image
+          source={require('./assets/radio-xlarge.png')}
+          style={[styles.icon, styles.xLargeIcon, hmsRoomStyles.icon, style]}
+          {...restProps}
+        />
+      </View>
+    );
+  }
+
   return (
     <Image
       source={require('./assets/radio.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, hmsRoomStyles.icon, style]}
       {...restProps}
     />
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   icon: {
     width: 24,
     height: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  xLargeIcon: {
+    width: 56,
+    height: 56,
+  },
 });

package/src/Icons/Search/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface SearchIconProps extends Omit<ImageProps, 'source'> {}
+
+export const SearchIcon: React.FC<SearchIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/search.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Stop/index.tsx

@@ -6,10 +6,7 @@ import { useHMSRoomStyle } from '../../hooks-util';
 
 interface StopIconProps extends Omit<ImageProps, 'source'> {}
 
-export const StopIcon: React.FC<StopIconProps> = ({
-  style,
-  ...restProps
-}) => {
+export const StopIcon: React.FC<StopIconProps> = ({ style, ...restProps }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));

package/src/Icons/index.ts

@@ -35,3 +35,5 @@ export * from './Recording';
 export * from './AlertTriangle';
 export * from './Hamburger';
 export * from './Stop';
+export * from './Eye';
+export * from './Search';