Skip to content

Commit 11d056b

Browse files
nhannahnhannah
authored
Merge pull request #569 from GetStream/add-animations-to-reactions
CRNS-245: Add animations to reactions
2 parents 4d187bb + 9190dc0 commit 11d056b

File tree

9 files changed

+228
-116
lines changed

9 files changed

+228
-116
lines changed

‎examples/SampleApp/App.tsx‎

Lines changed: 103 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { LogBox, useColorScheme } from 'react-native';
2+
import { LogBox, Platform, useColorScheme } from 'react-native';
33
import { createDrawerNavigator } from '@react-navigation/drawer';
44
import {
55
DarkTheme,
@@ -11,7 +11,12 @@ import {
1111
SafeAreaProvider,
1212
useSafeAreaInsets,
1313
} from 'react-native-safe-area-context';
14-
import { Chat, OverlayProvider, ThemeProvider } from 'stream-chat-react-native';
14+
import {
15+
Chat,
16+
OverlayProvider,
17+
ThemeProvider,
18+
useOverlayContext,
19+
} from 'stream-chat-react-native';
1520

1621
import { AppContext } from './src/context/AppContext';
1722
import { AppOverlayProvider } from './src/context/AppOverlayProvider';
@@ -86,7 +91,7 @@ const App = () => {
8691
{isConnecting ? (
8792
<LoadingScreen />
8893
) : chatClient ? (
89-
<DrawerNavigator chatClient={chatClient} />
94+
<DrawerNavigatorWrapper chatClient={chatClient} />
9095
) : (
9196
<UserSelector />
9297
)}
@@ -96,7 +101,29 @@ const App = () => {
96101
);
97102
};
98103

99-
const DrawerNavigator: React.FC<{
104+
const DrawerNavigator: React.FC = () => {
105+
const { overlay } = useOverlayContext();
106+
107+
return (
108+
<Drawer.Navigator
109+
screenOptions={{
110+
gestureEnabled: Platform.OS === 'ios' && overlay === 'none',
111+
}}
112+
drawerContent={(props) => <MenuDrawer {...props} />}
113+
drawerStyle={{
114+
width: 300,
115+
}}
116+
>
117+
<Drawer.Screen
118+
component={HomeScreen}
119+
name='HomeScreen'
120+
options={{ headerShown: false }}
121+
/>
122+
</Drawer.Navigator>
123+
);
124+
};
125+
126+
const DrawerNavigatorWrapper: React.FC<{
100127
chatClient: StreamChat<
101128
LocalAttachmentType,
102129
LocalChannelType,
@@ -136,18 +163,7 @@ const DrawerNavigator: React.FC<{
136163
>
137164
<AppOverlayProvider>
138165
<UserSearchProvider>
139-
<Drawer.Navigator
140-
drawerContent={(props) => <MenuDrawer {...props} />}
141-
drawerStyle={{
142-
width: 300,
143-
}}
144-
>
145-
<Drawer.Screen
146-
component={HomeScreen}
147-
name='HomeScreen'
148-
options={{ headerShown: false }}
149-
/>
150-
</Drawer.Navigator>
166+
<DrawerNavigator />
151167
</UserSearchProvider>
152168
</AppOverlayProvider>
153169
</Chat>
@@ -177,66 +193,76 @@ const UserSelector = () => {
177193
};
178194

179195
// TODO: Split the stack into multiple stacks - ChannelStack, CreateChannelStack etc.
180-
const HomeScreen = () => (
181-
<Stack.Navigator initialRouteName='ChatScreen'>
182-
<Stack.Screen
183-
component={ChatScreen}
184-
name='ChatScreen'
185-
options={{ headerShown: false }}
186-
/>
187-
<Stack.Screen
188-
component={ChannelScreen}
189-
name='ChannelScreen'
190-
options={{ headerShown: false }}
191-
/>
192-
<Stack.Screen
193-
component={NewDirectMessagingScreen}
194-
name='NewDirectMessagingScreen'
195-
options={{
196-
headerShown: false,
197-
}}
198-
/>
199-
<Stack.Screen
200-
component={NewGroupChannelAddMemberScreen}
201-
name='NewGroupChannelAddMemberScreen'
202-
options={{ headerShown: false }}
203-
/>
204-
<Stack.Screen
205-
component={NewGroupChannelAssignNameScreen}
206-
name='NewGroupChannelAssignNameScreen'
207-
options={{ headerShown: false }}
208-
/>
209-
<Stack.Screen
210-
component={OneOnOneChannelDetailScreen}
211-
name='OneOnOneChannelDetailScreen'
212-
options={{ headerShown: false }}
213-
/>
214-
<Stack.Screen
215-
component={GroupChannelDetailsScreen}
216-
name='GroupChannelDetailsScreen'
217-
options={{ headerShown: false }}
218-
/>
219-
<Stack.Screen
220-
component={ChannelImagesScreen}
221-
name='ChannelImagesScreen'
222-
options={{ headerShown: false }}
223-
/>
224-
<Stack.Screen
225-
component={ChannelFilesScreen}
226-
name='ChannelFilesScreen'
227-
options={{ headerShown: false }}
228-
/>
229-
<Stack.Screen
230-
component={SharedGroupsScreen}
231-
name='SharedGroupsScreen'
232-
options={{ headerShown: false }}
233-
/>
234-
<Stack.Screen
235-
component={ThreadScreen}
236-
name='ThreadScreen'
237-
options={{ headerShown: false }}
238-
/>
239-
</Stack.Navigator>
240-
);
196+
const HomeScreen = () => {
197+
const { overlay } = useOverlayContext();
198+
199+
return (
200+
<Stack.Navigator initialRouteName='ChatScreen'>
201+
<Stack.Screen
202+
component={ChatScreen}
203+
name='ChatScreen'
204+
options={{ headerShown: false }}
205+
/>
206+
<Stack.Screen
207+
component={ChannelScreen}
208+
name='ChannelScreen'
209+
options={{
210+
gestureEnabled: Platform.OS === 'ios' && overlay === 'none',
211+
headerShown: false,
212+
}}
213+
/>
214+
<Stack.Screen
215+
component={NewDirectMessagingScreen}
216+
name='NewDirectMessagingScreen'
217+
options={{
218+
headerShown: false,
219+
}}
220+
/>
221+
<Stack.Screen
222+
component={NewGroupChannelAddMemberScreen}
223+
name='NewGroupChannelAddMemberScreen'
224+
options={{ headerShown: false }}
225+
/>
226+
<Stack.Screen
227+
component={NewGroupChannelAssignNameScreen}
228+
name='NewGroupChannelAssignNameScreen'
229+
options={{ headerShown: false }}
230+
/>
231+
<Stack.Screen
232+
component={OneOnOneChannelDetailScreen}
233+
name='OneOnOneChannelDetailScreen'
234+
options={{ headerShown: false }}
235+
/>
236+
<Stack.Screen
237+
component={GroupChannelDetailsScreen}
238+
name='GroupChannelDetailsScreen'
239+
options={{ headerShown: false }}
240+
/>
241+
<Stack.Screen
242+
component={ChannelImagesScreen}
243+
name='ChannelImagesScreen'
244+
options={{ headerShown: false }}
245+
/>
246+
<Stack.Screen
247+
component={ChannelFilesScreen}
248+
name='ChannelFilesScreen'
249+
options={{ headerShown: false }}
250+
/>
251+
<Stack.Screen
252+
component={SharedGroupsScreen}
253+
name='SharedGroupsScreen'
254+
options={{ headerShown: false }}
255+
/>
256+
<Stack.Screen
257+
component={ThreadScreen}
258+
name='ThreadScreen'
259+
options={{
260+
gestureEnabled: Platform.OS === 'ios' && overlay === 'none',
261+
headerShown: false,
262+
}}
263+
/>
264+
</Stack.Navigator>
265+
);
266+
};
241267

242268
export default App;

‎examples/SampleApp/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@react-navigation/native": "5.9.2",
2222
"@react-navigation/stack": "5.14.2",
2323
"@stream-io/flat-list-mvcp": "0.0.9",
24-
"patch-package": "^6.4.7",
24+
"patch-package": "6.4.7",
2525
"react": "16.13.1",
2626
"react-native": "0.63.4",
2727
"react-native-document-picker": "5.0.0",

‎examples/SampleApp/src/screens/ChannelScreen.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
import React, { useContext, useEffect, useState } from 'react';
2-
import {
3-
Platform,
4-
StyleSheet,
5-
Text,
6-
TouchableOpacity,
7-
View,
8-
} from 'react-native';
2+
import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
93
import {
104
RouteProp,
115
useFocusEffect,
126
useNavigation,
137
} from '@react-navigation/native';
148
import { useSafeAreaInsets } from 'react-native-safe-area-context';
159
import {
16-
Avatar,
1710
Channel,
1811
ChannelAvatar,
19-
getChannelPreviewDisplayAvatar,
20-
GroupAvatar,
2112
MessageInput,
2213
MessageList,
23-
Spinner,
2414
ThreadContextValue,
2515
useChannelPreviewDisplayName,
2616
useChatContext,

‎examples/TypeScriptMessaging/App.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React, { useContext, useEffect, useMemo, useState } from 'react';
2-
import { LogBox, SafeAreaView, View, useColorScheme } from 'react-native';
2+
import {
3+
LogBox,
4+
Platform,
5+
SafeAreaView,
6+
View,
7+
useColorScheme,
8+
} from 'react-native';
39
import {
410
DarkTheme,
511
DefaultTheme,
@@ -27,6 +33,7 @@ import {
2733
Thread,
2834
ThreadContextValue,
2935
useAttachmentPickerContext,
36+
useOverlayContext,
3037
} from 'stream-chat-react-native';
3138

3239
import { useStreamChatTheme } from './useStreamChatTheme';
@@ -120,6 +127,13 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
120127
const { channel, setThread, thread } = useContext(AppContext);
121128
const headerHeight = useHeaderHeight();
122129
const { setTopInset } = useAttachmentPickerContext();
130+
const { overlay } = useOverlayContext();
131+
132+
useEffect(() => {
133+
navigation.setOptions({
134+
gestureEnabled: Platform.OS === 'ios' && overlay === 'none',
135+
});
136+
}, [overlay]);
123137

124138
useEffect(() => {
125139
setTopInset(headerHeight);
@@ -159,12 +173,20 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
159173
};
160174

161175
type ThreadScreenProps = {
176+
navigation: StackNavigationProp<ThreadRoute, 'Thread'>;
162177
route: RouteProp<ThreadRoute, 'Thread'>;
163178
};
164179

165-
const ThreadScreen: React.FC<ThreadScreenProps> = () => {
180+
const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
166181
const { channel, setThread, thread } = useContext(AppContext);
167182
const headerHeight = useHeaderHeight();
183+
const { overlay } = useOverlayContext();
184+
185+
useEffect(() => {
186+
navigation.setOptions({
187+
gestureEnabled: Platform.OS === 'ios' && overlay === 'none',
188+
});
189+
}, [overlay]);
168190

169191
return (
170192
<SafeAreaView>

‎src/components/Message/Message.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1074,8 +1074,8 @@ const MessageWithContext = <
10741074
withTiming(1, { duration: 100 }),
10751075
withTiming(0.98, { duration: 400 }, () => {
10761076
if (pressActive.value) {
1077-
runOnJS(triggerHaptic)('impactMedium');
10781077
runOnJS(onLongPressMessage)();
1078+
runOnJS(triggerHaptic)('impactMedium');
10791079
}
10801080
}),
10811081
withTiming(1.02, { duration: 100 }),
@@ -1101,6 +1101,7 @@ const MessageWithContext = <
11011101
return message.deleted_at || messageContentOrder.length ? (
11021102
<TapGestureHandler
11031103
enabled={animatedLongPress}
1104+
maxDeltaX={8}
11041105
maxDurationMs={3000}
11051106
onGestureEvent={animatedLongPress ? onLongPressTouchable : undefined}
11061107
waitFor={doubleTapRef}

‎src/components/Message/MessageSimple/MessageReplies.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import {
33
ColorValue,
4+
Platform,
45
StyleSheet,
56
Text,
67
TouchableOpacity,
@@ -44,6 +45,11 @@ const styles = StyleSheet.create({
4445
leftMessageRepliesCurve: {
4546
borderBottomLeftRadius: 16,
4647
borderRightColor: 'transparent',
48+
...Platform.select({
49+
android: {
50+
borderRightWidth: 0,
51+
},
52+
}),
4753
},
4854
messageRepliesCurve: {
4955
borderTopColor: 'transparent',
@@ -61,6 +67,11 @@ const styles = StyleSheet.create({
6167
rightMessageRepliesCurve: {
6268
borderBottomRightRadius: 16,
6369
borderLeftColor: 'transparent',
70+
...Platform.select({
71+
android: {
72+
borderLeftWidth: 0,
73+
},
74+
}),
6475
},
6576
});
6677

0 commit comments

Comments
 (0)