Skip to content

Commit 439be22

Browse files
isekovanicisekovanic
authored
perf: message overlay animations (#3548)
## 🎯 Goal <!-- Describe why we are making this change --> ## 🛠 Implementation details <!-- Provide a description of the implementation --> ## 🎨 UI Changes <!-- Add relevant screenshots --> <details> <summary>iOS</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> <details> <summary>Android</summary> <table> <thead> <tr> <td>Before</td> <td>After</td> </tr> </thead> <tbody> <tr> <td> <!--<img src="" /> --> </td> <td> <!--<img src="" /> --> </td> </tr> </tbody> </table> </details> ## 🧪 Testing <!-- Explain how this change can be tested (or why it can't be tested) --> ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android
1 parent 90e1610 commit 439be22

File tree

14 files changed

+319
-502
lines changed

14 files changed

+319
-502
lines changed

‎examples/ExpoMessaging/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"main": "expo-router/entry",
55
"scripts": {
66
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh expo-package && bash ../../package/scripts/sync-shared-native.sh expo-package",
7+
"preinstall": "yarn sync-native",
78
"prestart": "yarn sync-native",
89
"preandroid": "yarn sync-native",
910
"preios": "yarn sync-native",

‎examples/SampleApp/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
},
99
"scripts": {
1010
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh native-package && bash ../../package/scripts/sync-shared-native.sh native-package",
11+
"preinstall": "yarn sync-native",
1112
"preandroid": "yarn sync-native",
1213
"android": "react-native run-android",
1314
"preios": "yarn sync-native",

‎examples/TypeScriptMessaging/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"scripts": {
66
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh native-package && bash ../../package/scripts/sync-shared-native.sh native-package",
7+
"preinstall": "yarn sync-native",
78
"preandroid": "yarn sync-native",
89
"android": "react-native run-android",
910
"preios": "yarn sync-native",

‎package/expo-package/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
"expo-audio": "~0.4.6"
8686
},
8787
"scripts": {
88-
"postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh expo-package; fi",
8988
"prepack": "bash ../scripts/sync-shared-native.sh expo-package && cp ../../README.md .",
9089
"postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh expo-package"
9190
},

‎package/native-package/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282
}
8383
},
8484
"scripts": {
85-
"postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh native-package; fi",
8685
"prepack": "bash ../scripts/sync-shared-native.sh native-package && cp ../../README.md .",
8786
"postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh native-package"
8887
},

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"README.md"
2424
],
2525
"scripts": {
26-
"install-all": "(yarn install --force && (cd native-package && yarn install --force) && (cd expo-package && yarn install --force))",
26+
"install-all": "(yarn run shared-native:sync && yarn install --force && (cd native-package && yarn install --force) && (cd expo-package && yarn install --force))",
2727
"shared-native:sync": "bash ./scripts/sync-shared-native.sh all",
2828
"shared-native:clean-copies": "bash ./scripts/clean-shared-native-copies.sh all",
2929
"build": "rimraf lib && yarn run --silent build-translations && bob build && yarn run --silent copy-translations",

‎package/src/components/Message/MessageItemView/MessageContent.tsx‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
167167
messageGroupedSingleOrBottomContainer,
168168
messageGroupedTopContainer,
169169
replyContainer,
170-
wrapper,
171170
},
172171
},
173172
},
@@ -241,7 +240,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
241240
return (
242241
message.quoted_message && (
243242
<Pressable
244-
disabled={!goToMessage}
243+
disabled={!goToMessage || preventPress}
245244
key={`quoted_reply_${messageContentOrderIndex}`}
246245
onLongPress={(event) => {
247246
if (onLongPress) {
@@ -368,43 +367,41 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
368367
}
369368
}}
370369
>
371-
<View style={wrapper}>
372-
<View
373-
style={[
374-
styles.containerInner,
375-
{
376-
backgroundColor,
377-
...getBorderRadius(),
378-
...getBorderRadiusFromTheme(),
379-
},
380-
noBorder ? { borderWidth: 0 } : {},
381-
containerInner,
382-
messageGroupedSingleOrBottom
383-
? isVeryLastMessage && enableMessageGroupingByUser
384-
? lastMessageContainer
385-
: messageGroupedSingleOrBottomContainer
386-
: messageGroupedTopContainer,
387-
]}
388-
testID='message-content-wrapper'
389-
>
390-
{MessageContentTopView ? <MessageContentTopView /> : null}
391-
{hasContentSideViews ? (
392-
<View
393-
style={[
394-
styles.contentRow,
395-
alignment === 'right' ? styles.rightAlignContentRow : undefined,
396-
]}
397-
testID='message-content-row'
398-
>
399-
{MessageContentLeadingView ? <MessageContentLeadingView /> : null}
400-
<View style={styles.contentBody}>{contentBody}</View>
401-
{MessageContentTrailingView ? <MessageContentTrailingView /> : null}
402-
</View>
403-
) : (
404-
contentBody
405-
)}
406-
{MessageContentBottomView ? <MessageContentBottomView /> : null}
407-
</View>
370+
<View
371+
style={[
372+
styles.containerInner,
373+
{
374+
backgroundColor,
375+
...getBorderRadius(),
376+
...getBorderRadiusFromTheme(),
377+
},
378+
noBorder ? { borderWidth: 0 } : {},
379+
containerInner,
380+
messageGroupedSingleOrBottom
381+
? isVeryLastMessage && enableMessageGroupingByUser
382+
? lastMessageContainer
383+
: messageGroupedSingleOrBottomContainer
384+
: messageGroupedTopContainer,
385+
]}
386+
testID='message-content-wrapper'
387+
>
388+
{MessageContentTopView ? <MessageContentTopView /> : null}
389+
{hasContentSideViews ? (
390+
<View
391+
style={[
392+
styles.contentRow,
393+
alignment === 'right' ? styles.rightAlignContentRow : undefined,
394+
]}
395+
testID='message-content-row'
396+
>
397+
{MessageContentLeadingView ? <MessageContentLeadingView /> : null}
398+
<View style={styles.contentBody}>{contentBody}</View>
399+
{MessageContentTrailingView ? <MessageContentTrailingView /> : null}
400+
</View>
401+
) : (
402+
contentBody
403+
)}
404+
{MessageContentBottomView ? <MessageContentBottomView /> : null}
408405
</View>
409406
</Pressable>
410407
);

‎package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap‎

Lines changed: 30 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -798,20 +798,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
798798
>
799799
<View
800800
style={
801-
[
802-
{
803-
"height": 0,
804-
"opacity": 0,
805-
"width": 0,
806-
},
807-
{
808-
"transform": [
809-
{
810-
"scale": 0,
811-
},
812-
],
813-
},
814-
]
801+
{
802+
"height": 0,
803+
"opacity": 0,
804+
"width": 0,
805+
}
815806
}
816807
testID="message-overlay-top"
817808
>
@@ -852,20 +843,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
852843
</View>
853844
<View
854845
style={
855-
[
856-
{
857-
"height": 0,
858-
"opacity": 0,
859-
"width": 0,
860-
},
861-
{
862-
"transform": [
863-
{
864-
"scale": 0,
865-
},
866-
],
867-
},
868-
]
846+
{
847+
"height": 0,
848+
"opacity": 0,
849+
"width": 0,
850+
}
869851
}
870852
testID="message-overlay-bottom"
871853
>
@@ -1685,20 +1667,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
16851667
>
16861668
<View
16871669
style={
1688-
[
1689-
{
1690-
"height": 0,
1691-
"opacity": 0,
1692-
"width": 0,
1693-
},
1694-
{
1695-
"transform": [
1696-
{
1697-
"scale": 0,
1698-
},
1699-
],
1700-
},
1701-
]
1670+
{
1671+
"height": 0,
1672+
"opacity": 0,
1673+
"width": 0,
1674+
}
17021675
}
17031676
testID="message-overlay-top"
17041677
>
@@ -1739,20 +1712,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
17391712
</View>
17401713
<View
17411714
style={
1742-
[
1743-
{
1744-
"height": 0,
1745-
"opacity": 0,
1746-
"width": 0,
1747-
},
1748-
{
1749-
"transform": [
1750-
{
1751-
"scale": 0,
1752-
},
1753-
],
1754-
},
1755-
]
1715+
{
1716+
"height": 0,
1717+
"opacity": 0,
1718+
"width": 0,
1719+
}
17561720
}
17571721
testID="message-overlay-bottom"
17581722
>
@@ -2572,20 +2536,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
25722536
>
25732537
<View
25742538
style={
2575-
[
2576-
{
2577-
"height": 0,
2578-
"opacity": 0,
2579-
"width": 0,
2580-
},
2581-
{
2582-
"transform": [
2583-
{
2584-
"scale": 0,
2585-
},
2586-
],
2587-
},
2588-
]
2539+
{
2540+
"height": 0,
2541+
"opacity": 0,
2542+
"width": 0,
2543+
}
25892544
}
25902545
testID="message-overlay-top"
25912546
>
@@ -2626,20 +2581,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
26262581
</View>
26272582
<View
26282583
style={
2629-
[
2630-
{
2631-
"height": 0,
2632-
"opacity": 0,
2633-
"width": 0,
2634-
},
2635-
{
2636-
"transform": [
2637-
{
2638-
"scale": 0,
2639-
},
2640-
],
2641-
},
2642-
]
2584+
{
2585+
"height": 0,
2586+
"opacity": 0,
2587+
"width": 0,
2588+
}
26432589
}
26442590
testID="message-overlay-bottom"
26452591
>

0 commit comments

Comments
 (0)