Skip to content

Commit f060df9

Browse files
khushal87khushal87
committed
fix: sample app ui bugs
1 parent 9bda6ea commit f060df9

11 files changed

+125
-112
lines changed

‎examples/SampleApp/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { ChannelPinnedMessagesScreen } from './src/screens/ChannelPinnedMessages
2727
import { ChatScreen } from './src/screens/ChatScreen';
2828
import { GroupChannelDetailsScreen } from './src/screens/GroupChannelDetailsScreen';
2929
import { LoadingScreen } from './src/screens/LoadingScreen';
30-
import { MenuDrawer } from './src/screens/MenuDrawer';
30+
import { MenuDrawer } from './src/components/MenuDrawer';
3131
import { NewDirectMessagingScreen } from './src/screens/NewDirectMessagingScreen';
3232
import { NewGroupChannelAddMemberScreen } from './src/screens/NewGroupChannelAddMemberScreen';
3333
import { NewGroupChannelAssignNameScreen } from './src/screens/NewGroupChannelAssignNameScreen';

‎examples/SampleApp/src/components/AddMemberBottomSheet.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useState } from 'react';
2-
import { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';
3-
import { TouchableOpacity } from '@gorhom/bottom-sheet';
2+
import {
3+
ActivityIndicator,
4+
StyleSheet,
5+
Text,
6+
TextInput,
7+
TouchableOpacity,
8+
View,
9+
} from 'react-native';
410
import { useSafeAreaInsets } from 'react-native-safe-area-context';
511
import { CircleClose, Search, useTheme } from 'stream-chat-react-native';
612

@@ -37,16 +43,15 @@ const styles = StyleSheet.create({
3743
alignItems: 'center',
3844
borderRadius: 18,
3945
borderWidth: 1,
40-
flex: 1,
4146
flexDirection: 'row',
42-
marginRight: 16,
4347
paddingHorizontal: 10,
4448
paddingVertical: 8,
4549
},
4650
inputRow: {
4751
alignItems: 'center',
4852
flexDirection: 'row',
4953
padding: 16,
54+
justifyContent: 'center',
5055
},
5156
text: {
5257
marginLeft: 10,
@@ -135,10 +140,10 @@ export const AddMemberBottomSheet: React.FC = () => {
135140
]}
136141
value={searchText}
137142
/>
143+
<TouchableOpacity onPress={clearText}>
144+
<CircleClose pathFill={grey} />
145+
</TouchableOpacity>
138146
</View>
139-
<TouchableOpacity onPress={clearText}>
140-
<CircleClose pathFill={grey} />
141-
</TouchableOpacity>
142147
</View>
143148
<View style={styles.flex}>
144149
{addMemberQueryInProgress && (

‎examples/SampleApp/src/components/ChannelInfoOverlay.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import Animated, {
2323
import {
2424
Avatar,
2525
CircleClose,
26+
Delete,
2627
User,
2728
UserMinus,
2829
useTheme,
@@ -32,7 +33,6 @@ import {
3233
import { useAppOverlayContext } from '../context/AppOverlayContext';
3334
import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
3435
import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
35-
import { Delete } from '../icons/Delete';
3636

3737
dayjs.extend(relativeTime);
3838

@@ -77,9 +77,10 @@ const styles = StyleSheet.create({
7777
borderBottomWidth: 1,
7878
borderTopWidth: 1,
7979
flexDirection: 'row',
80+
paddingVertical: 16,
8081
},
81-
row: { alignItems: 'center', borderTopWidth: 1, flexDirection: 'row' },
82-
rowInner: { paddingLeft: 16, paddingRight: 10, paddingVertical: 20 },
82+
row: { alignItems: 'center', borderTopWidth: 1, flexDirection: 'row', paddingVertical: 16 },
83+
rowInner: { paddingLeft: 16, paddingRight: 10 },
8384
rowText: {
8485
fontSize: 14,
8586
fontWeight: '700',
@@ -408,7 +409,7 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
408409
]}
409410
>
410411
<View style={styles.rowInner}>
411-
<Delete height={32} pathFill={accent_red} width={32} />
412+
<Delete size={24} fill={accent_red} />
412413
</View>
413414
<Text style={[styles.rowText, { color: accent_red }]}>
414415
Delete conversation

‎examples/SampleApp/src/components/ChannelPreview.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Swipeable from 'react-native-gesture-handler/Swipeable';
66
import {
77
ChannelPreviewMessenger,
88
ChannelPreviewMessengerProps,
9+
Delete,
910
MenuPointHorizontal,
1011
useChatContext,
1112
useTheme,
@@ -18,7 +19,6 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
1819
import type { StackNavigationProp } from '@react-navigation/stack';
1920

2021
import type { StackNavigatorParamList, StreamChatGenerics } from '../types';
21-
import { Delete } from '../icons/Delete';
2222

2323
const styles = StyleSheet.create({
2424
leftSwipeableButton: {
@@ -99,7 +99,7 @@ export const ChannelPreview: React.FC<ChannelPreviewMessengerProps<StreamChatGen
9999
}}
100100
style={[styles.rightSwipeableButton]}
101101
>
102-
<Delete height={32} pathFill={accent_red} width={32} />
102+
<Delete size={32} fill={accent_red} />
103103
</RectButton>
104104
</View>
105105
)}

‎examples/SampleApp/src/components/ConfirmationBottomSheet.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
3-
import { TouchableOpacity } from '@gorhom/bottom-sheet';
2+
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
43
import { useSafeAreaInsets } from 'react-native-safe-area-context';
5-
import { UserMinus, useTheme } from 'stream-chat-react-native';
4+
import { Delete, UserMinus, useTheme } from 'stream-chat-react-native';
65

76
import { useAppOverlayContext } from '../context/AppOverlayContext';
87
import {
98
isAddMemberBottomSheetData,
109
useBottomSheetOverlayContext,
1110
} from '../context/BottomSheetOverlayContext';
12-
import { Delete } from '../icons/Delete';
1311

1412
const styles = StyleSheet.create({
1513
actionButtonLeft: {
@@ -79,7 +77,7 @@ export const ConfirmationBottomSheet: React.FC = () => {
7977
{confirmText === 'LEAVE' ? (
8078
<UserMinus pathFill={grey} />
8179
) : (
82-
<Delete height={32} pathFill={accent_red} width={32} />
80+
<Delete size={32} fill={accent_red} />
8381
)}
8482
<Text style={[styles.title, { color: black }]}>{title}</Text>
8583
<Text style={[styles.subtext, { color: black }]}>{subtext}</Text>

‎examples/SampleApp/src/screens/MenuDrawer.tsx ‎examples/SampleApp/src/components/MenuDrawer.tsx

+60-58
Original file line numberDiff line numberDiff line change
@@ -57,48 +57,68 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
5757
}
5858

5959
return (
60-
<SafeAreaView style={[styles.container, { backgroundColor: white }]}>
61-
<View style={styles.userRow}>
62-
<Image
63-
source={{
64-
uri: chatClient.user?.image,
65-
}}
66-
style={styles.avatar}
67-
/>
68-
<Text
69-
style={[
70-
styles.userName,
71-
{
72-
color: black,
73-
},
74-
]}
75-
>
76-
{chatClient.user?.name}
77-
</Text>
78-
</View>
79-
<View style={styles.menuContainer}>
80-
<View>
81-
<TouchableOpacity
82-
onPress={() => navigation.navigate('NewDirectMessagingScreen')}
83-
style={styles.menuItem}
60+
<View style={[styles.container, { backgroundColor: white }]}>
61+
<SafeAreaView style={{ flex: 1 }}>
62+
<View style={[styles.userRow]}>
63+
<Image
64+
source={{
65+
uri: chatClient.user?.image,
66+
}}
67+
style={styles.avatar}
68+
/>
69+
<Text
70+
style={[
71+
styles.userName,
72+
{
73+
color: black,
74+
},
75+
]}
8476
>
85-
<Edit height={24} pathFill={grey} width={24} />
86-
<Text
87-
style={[
88-
styles.menuTitle,
89-
{
90-
color: black,
91-
},
92-
]}
77+
{chatClient.user?.name}
78+
</Text>
79+
</View>
80+
<View style={styles.menuContainer}>
81+
<View>
82+
<TouchableOpacity
83+
onPress={() => navigation.navigate('NewDirectMessagingScreen')}
84+
style={styles.menuItem}
9385
>
94-
New Direct Messages
95-
</Text>
96-
</TouchableOpacity>
86+
<Edit height={24} pathFill={grey} width={24} />
87+
<Text
88+
style={[
89+
styles.menuTitle,
90+
{
91+
color: black,
92+
},
93+
]}
94+
>
95+
New Direct Messages
96+
</Text>
97+
</TouchableOpacity>
98+
<TouchableOpacity
99+
onPress={() => navigation.navigate('NewGroupChannelAddMemberScreen')}
100+
style={styles.menuItem}
101+
>
102+
<Group height={24} pathFill={grey} width={24} />
103+
<Text
104+
style={[
105+
styles.menuTitle,
106+
{
107+
color: black,
108+
},
109+
]}
110+
>
111+
New Group
112+
</Text>
113+
</TouchableOpacity>
114+
</View>
97115
<TouchableOpacity
98-
onPress={() => navigation.navigate('NewGroupChannelAddMemberScreen')}
116+
onPress={() => {
117+
logout();
118+
}}
99119
style={styles.menuItem}
100120
>
101-
<Group height={24} pathFill={grey} width={24} />
121+
<User height={24} pathFill={grey} width={24} />
102122
<Text
103123
style={[
104124
styles.menuTitle,
@@ -107,29 +127,11 @@ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
107127
},
108128
]}
109129
>
110-
New Group
130+
Sign Out
111131
</Text>
112132
</TouchableOpacity>
113133
</View>
114-
<TouchableOpacity
115-
onPress={() => {
116-
logout();
117-
}}
118-
style={styles.menuItem}
119-
>
120-
<User height={24} pathFill={grey} width={24} />
121-
<Text
122-
style={[
123-
styles.menuTitle,
124-
{
125-
color: black,
126-
},
127-
]}
128-
>
129-
Sign Out
130-
</Text>
131-
</TouchableOpacity>
132-
</View>
133-
</SafeAreaView>
134+
</SafeAreaView>
135+
</View>
134136
);
135137
};

‎examples/SampleApp/src/components/ScreenHeader.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
165165
color: black,
166166
},
167167
]}
168+
numberOfLines={1}
168169
>
169170
{titleText}
170171
</Text>
@@ -182,6 +183,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
182183
color: grey,
183184
},
184185
]}
186+
numberOfLines={1}
185187
>
186188
{subtitleText}
187189
</Text>

‎examples/SampleApp/src/components/UserInfoOverlay.tsx

+18-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import { Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
2+
import { Alert, Keyboard, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
33
import dayjs from 'dayjs';
44
import relativeTime from 'dayjs/plugin/relativeTime';
55
import {
@@ -302,14 +302,24 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
302302
members,
303303
});
304304

305-
const newChannel =
306-
channels.length === 1
307-
? channels[0]
308-
: client.channel('messaging', {
309-
members,
310-
});
305+
console.log('channels', channels.length);
306+
let newChannel;
307+
if (channels.length === 1) {
308+
newChannel = channels[0];
309+
} else {
310+
try {
311+
newChannel = client.channel('messaging', { members });
312+
await newChannel.watch();
313+
} catch (error) {
314+
newChannel = undefined;
315+
if (error instanceof Error) {
316+
Alert.alert('Error creating channel', error.message);
317+
}
318+
}
319+
}
320+
311321
setOverlay('none');
312-
if (navigation) {
322+
if (navigation && newChannel) {
313323
navigation.navigate('OneOnOneChannelDetailScreen', {
314324
channel: newChannel,
315325
});

0 commit comments

Comments
 (0)