fix: sample-app crash because of viewport changes

GetStream · Nov 21, 2023 · 8f6e5ec · 8f6e5ec
1 parent 2e39142
commit 8f6e5ec
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 55 deletions.
diff --git a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import dayjs from 'dayjs';
-import { Avatar, Spinner, useTheme, vw } from 'stream-chat-react-native';
+import { Avatar, Spinner, useTheme, useViewport } from 'stream-chat-react-native';
 
 import { MESSAGE_SEARCH_LIMIT } from '../../hooks/usePaginatedSearchedMessages';
 
@@ -43,9 +43,6 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
   },
   title: { fontSize: 14, fontWeight: '700' },
-  titleContainer: {
-    maxWidth: vw(80) - 16 - 40,
-  },
 });
 
 export type MessageSearchListProps = {
@@ -73,6 +70,7 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
         colors: { black, border, grey, white_snow },
       },
     } = useTheme();
+    const { vw } = useViewport();
     const navigation = useNavigation();
 
     if (loading && !refreshing && (!messages || messages.length === 0)) {
@@ -134,7 +132,10 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
               />
               <View style={styles.flex}>
                 <View style={styles.row}>
-                  <Text numberOfLines={1} style={[styles.titleContainer, { color: black }]}>
+                  <Text
+                    numberOfLines={1}
+                    style={[styles.titleContainer, { color: black, maxWidth: vw(80) - 16 - 40 }]}
+                  >
                     <Text style={styles.title}>{`${item.user?.name} `}</Text>
                     {!!item.channel?.name && (
                       <Text style={styles.detailsText}>

diff --git a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import dayjs from 'dayjs';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
-import { Avatar, CheckSend, Close, useTheme, vw } from 'stream-chat-react-native';
+import { Avatar, CheckSend, Close, useTheme, useViewport } from 'stream-chat-react-native';
 
 import { useUserSearchContext } from '../../context/UserSearchContext';
 
@@ -103,6 +103,7 @@ export const UserSearchResults: React.FC<UserSearchResultsProps> = ({
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const results = resultsProp || resultsContext;
   const resultsLength = results.length;

diff --git a/examples/SampleApp/src/components/UserSearch/UserSearchResultsGrid.tsx b/examples/SampleApp/src/components/UserSearch/UserSearchResultsGrid.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActivityIndicator, FlatList, StyleSheet, Text, View } from 'react-native';
-import { vw } from 'stream-chat-react-native';
+import { useViewport } from 'stream-chat-react-native';
 
 import { UserGridItem } from './UserGridItem';
 
@@ -10,8 +10,6 @@ import type { UserResponse } from 'stream-chat';
 
 import type { StreamChatGenerics } from '../../types';
 
-const totalUserSpace = vw(100) - 56; // 36 = outside margin 8 * 2 + inner padding 20 * 2;
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -47,48 +45,53 @@ export const UserSearchResultsGrid: React.FC<UserSearchResultsGridProps> = ({
   onPress,
   results,
   searchText,
-}) => (
-  <View style={styles.container}>
-    {loading && results.length === 0 && searchText === '' ? (
-      <ActivityIndicator size='small' />
-    ) : (
-      <FlatList
-        contentContainerStyle={styles.contentContainer}
-        data={results}
-        keyboardDismissMode='interactive'
-        keyboardShouldPersistTaps='handled'
-        keyExtractor={(item, index) => `${item.id}-${index}`}
-        ListEmptyComponent={() => (
-          <View style={styles.emptyResultIndicator}>
-            <EmptySearchState height={124} width={124} />
-            <Text>No user matches these keywords</Text>
-            <Text>{loading ? 'true' : 'false'}</Text>
-            <Text>{results.length}</Text>
-          </View>
-        )}
-        numColumns={gridSize}
-        onEndReached={loadMore}
-        renderItem={({ index, item: user }) => (
-          <View
-            style={[
-              styles.userGridItemContainer,
-              {
-                marginLeft: index % gridSize !== 0 ? (totalUserSpace - 64 * gridSize) / 3 : 0,
-              },
-            ]}
-          >
-            <UserGridItem
-              onPress={() => {
-                onPress(user);
-              }}
-              removeButton={false}
-              user={user}
-            />
-          </View>
-        )}
-        showsVerticalScrollIndicator={false}
-        style={styles.flex}
-      />
-    )}
-  </View>
-);
+}) => {
+  const { vw } = useViewport();
+  const totalUserSpace = vw(100) - 56; // 36 = outside margin 8 * 2 + inner padding 20 * 2;
+
+  return (
+    <View style={styles.container}>
+      {loading && results.length === 0 && searchText === '' ? (
+        <ActivityIndicator size='small' />
+      ) : (
+        <FlatList
+          contentContainerStyle={styles.contentContainer}
+          data={results}
+          keyboardDismissMode='interactive'
+          keyboardShouldPersistTaps='handled'
+          keyExtractor={(item, index) => `${item.id}-${index}`}
+          ListEmptyComponent={() => (
+            <View style={styles.emptyResultIndicator}>
+              <EmptySearchState height={124} width={124} />
+              <Text>No user matches these keywords</Text>
+              <Text>{loading ? 'true' : 'false'}</Text>
+              <Text>{results.length}</Text>
+            </View>
+          )}
+          numColumns={gridSize}
+          onEndReached={loadMore}
+          renderItem={({ index, item: user }) => (
+            <View
+              style={[
+                styles.userGridItemContainer,
+                {
+                  marginLeft: index % gridSize !== 0 ? (totalUserSpace - 64 * gridSize) / 3 : 0,
+                },
+              ]}
+            >
+              <UserGridItem
+                onPress={() => {
+                  onPress(user);
+                }}
+                removeButton={false}
+                user={user}
+              />
+            </View>
+          )}
+          showsVerticalScrollIndicator={false}
+          style={styles.flex}
+        />
+      )}
+    </View>
+  );
+};
diff --git a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, TextInput, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
-import { Check, generateRandomId, useTheme, vw } from 'stream-chat-react-native';
+import { Check, generateRandomId, useTheme, useViewport } from 'stream-chat-react-native';
 
 import { RoundButton } from '../components/RoundButton';
 import { ScreenHeader } from '../components/ScreenHeader';
@@ -89,6 +89,7 @@ export const NewGroupChannelAssignNameScreen: React.FC<NewGroupChannelAssignName
       colors: { bg_gradient_end, bg_gradient_start, black, border, grey, white_snow },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const [groupName, setGroupName] = useState('');