fix: sample-app crash because of viewport changes (#2313)

GetStream · Nov 15, 2023 · be241e1 · be241e1
1 parent 26d1d44
commit be241e1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,2 +1,3 @@
 export * from './useAppStateListener';
 export * from './useStreami18n';
+export * from './useViewport';