From 2c5e692ee81abd4add67f2e59852f52438b98298 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 15 Nov 2023 19:06:54 +0530
Subject: [PATCH] fix: sample-app crash because of viewport changes

---
 .../SampleApp/src/components/BottomSheetOverlay.tsx  |  6 +++---
 .../SampleApp/src/components/ChannelInfoOverlay.tsx  | 12 ++++++------
 .../SampleApp/src/components/UserInfoOverlay.tsx     |  9 +++++----
 package/src/hooks/index.ts                           |  1 +
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/examples/SampleApp/src/components/BottomSheetOverlay.tsx b/examples/SampleApp/src/components/BottomSheetOverlay.tsx
index e84ab42e24..403082a028 100644
--- a/examples/SampleApp/src/components/BottomSheetOverlay.tsx
+++ b/examples/SampleApp/src/components/BottomSheetOverlay.tsx
@@ -19,7 +19,7 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { KeyboardCompatibleView, useTheme, vh } from 'stream-chat-react-native';
+import { KeyboardCompatibleView, useTheme, useViewport } from 'stream-chat-react-native';
 
 import { AddMemberBottomSheet } from './AddMemberBottomSheet';
 import { ConfirmationBottomSheet } from './ConfirmationBottomSheet';
@@ -44,12 +44,12 @@ export type BottomSheetOverlayProps = {
   visible: boolean;
 };
 
-const screenHeight = vh(100);
-
 export const BottomSheetOverlay = (props: BottomSheetOverlayProps) => {
   const { overlayOpacity, visible } = props;
 
   const { overlay, setOverlay } = useAppOverlayContext();
+  const { vh } = useViewport();
+  const screenHeight = vh(100);
 
   const { reset } = useBottomSheetOverlayContext();
 
diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx
index 1b1f71b4bc..ac14c1c97e 100644
--- a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx
+++ b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx
@@ -27,8 +27,7 @@ import {
   User,
   UserMinus,
   useTheme,
-  vh,
-  vw,
+  useViewport,
 } from 'stream-chat-react-native';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
@@ -94,10 +93,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const screenHeight = vh(100);
-const halfScreenHeight = vh(50);
-const width = vw(100) - 60;
-
 export type ChannelInfoOverlayProps = {
   overlayOpacity: Animated.SharedValue<number>;
   visible?: boolean;
@@ -109,6 +104,11 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
   const { overlay, setOverlay } = useAppOverlayContext();
   const { setData } = useBottomSheetOverlayContext();
   const { data, reset } = useChannelInfoOverlayContext();
+  const { vh, vw } = useViewport();
+
+  const screenHeight = vh(100);
+  const halfScreenHeight = vh(50);
+  const width = vw(100) - 60;
 
   const { channel, clientId, navigation } = data || {};
 
diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx
index 47c81ec193..3d7e79d30a 100644
--- a/examples/SampleApp/src/components/UserInfoOverlay.tsx
+++ b/examples/SampleApp/src/components/UserInfoOverlay.tsx
@@ -28,7 +28,7 @@ import {
   User,
   UserMinus,
   useTheme,
-  vh,
+  useViewport,
 } from 'stream-chat-react-native';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
@@ -96,9 +96,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const screenHeight = vh(100);
-const halfScreenHeight = vh(50);
-
 export type UserInfoOverlayProps = {
   overlayOpacity: Animated.SharedValue<number>;
   visible?: boolean;
@@ -111,6 +108,10 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
   const { client } = useChatContext<StreamChatGenerics>();
   const { setData } = useBottomSheetOverlayContext();
   const { data, reset } = useUserInfoOverlayContext();
+  const { vh } = useViewport();
+
+  const screenHeight = vh(100);
+  const halfScreenHeight = vh(50);
 
   const { channel, member, navigation } = data || {};
 
diff --git a/package/src/hooks/index.ts b/package/src/hooks/index.ts
index 2976442b21..ae05c13853 100644
--- a/package/src/hooks/index.ts
+++ b/package/src/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './useAppStateListener';
 export * from './useStreami18n';
+export * from './useViewport';