Skip to content

perf: message overlay animations #3548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
isekovanic merged 7 commits into from
Apr 14, 2026
Merged

perf: message overlay animations #3548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3dc11cc
perf: improve animation performance
isekovanic Apr 13, 2026
03fd05e
fix: properly utilize preventPress
isekovanic Apr 13, 2026
e9eed45
perf: improve message performance
isekovanic Apr 13, 2026
791801b
perf: remove useAnimatedReaction in favor of inline decision tree
isekovanic Apr 14, 2026
f1c9f29
fix: remove postinstall
isekovanic Apr 14, 2026
651ce56
fix: tests
isekovanic Apr 14, 2026
4042c86
fix: ci builds
isekovanic Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/ExpoMessaging/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"main": "expo-router/entry",
"scripts": {
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh expo-package && bash ../../package/scripts/sync-shared-native.sh expo-package",
"preinstall": "yarn sync-native",
"prestart": "yarn sync-native",
"preandroid": "yarn sync-native",
"preios": "yarn sync-native",
Expand Down
1 change: 1 addition & 0 deletions examples/SampleApp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
},
"scripts": {
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh native-package && bash ../../package/scripts/sync-shared-native.sh native-package",
"preinstall": "yarn sync-native",
"preandroid": "yarn sync-native",
"android": "react-native run-android",
"preios": "yarn sync-native",
Expand Down
1 change: 1 addition & 0 deletions examples/TypeScriptMessaging/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"scripts": {
"sync-native": "bash ../../package/scripts/reconcile-shared-native.sh native-package && bash ../../package/scripts/sync-shared-native.sh native-package",
"preinstall": "yarn sync-native",
"preandroid": "yarn sync-native",
"android": "react-native run-android",
"preios": "yarn sync-native",
Expand Down
1 change: 0 additions & 1 deletion package/expo-package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@
"expo-audio": "~0.4.6"
},
"scripts": {
"postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh expo-package; fi",
"prepack": "bash ../scripts/sync-shared-native.sh expo-package && cp ../../README.md .",
"postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh expo-package"
},
Expand Down
1 change: 0 additions & 1 deletion package/native-package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
}
},
"scripts": {
"postinstall": "if [ -f ../scripts/sync-shared-native.sh ] && [ -d ../shared-native/ios ]; then bash ../scripts/sync-shared-native.sh native-package; fi",
"prepack": "bash ../scripts/sync-shared-native.sh native-package && cp ../../README.md .",
"postpack": "rm README.md && bash ../scripts/clean-shared-native-copies.sh native-package"
},
Expand Down
2 changes: 1 addition & 1 deletion package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"README.md"
],
"scripts": {
"install-all": "(yarn install --force && (cd native-package && yarn install --force) && (cd expo-package && yarn install --force))",
"install-all": "(yarn run shared-native:sync && yarn install --force && (cd native-package && yarn install --force) && (cd expo-package && yarn install --force))",
"shared-native:sync": "bash ./scripts/sync-shared-native.sh all",
"shared-native:clean-copies": "bash ./scripts/clean-shared-native-copies.sh all",
"build": "rimraf lib && yarn run --silent build-translations && bob build && yarn run --silent copy-translations",
Expand Down
75 changes: 36 additions & 39 deletions package/src/components/Message/MessageItemView/MessageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
messageGroupedSingleOrBottomContainer,
messageGroupedTopContainer,
replyContainer,
wrapper,
},
},
},
Expand Down Expand Up @@ -241,7 +240,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
return (
message.quoted_message && (
<Pressable
disabled={!goToMessage}
disabled={!goToMessage || preventPress}
key={`quoted_reply_${messageContentOrderIndex}`}
onLongPress={(event) => {
if (onLongPress) {
Expand Down Expand Up @@ -368,43 +367,41 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
}
}}
>
<View style={wrapper}>
<View
style={[
styles.containerInner,
{
backgroundColor,
...getBorderRadius(),
...getBorderRadiusFromTheme(),
},
noBorder ? { borderWidth: 0 } : {},
containerInner,
messageGroupedSingleOrBottom
? isVeryLastMessage && enableMessageGroupingByUser
? lastMessageContainer
: messageGroupedSingleOrBottomContainer
: messageGroupedTopContainer,
]}
testID='message-content-wrapper'
>
{MessageContentTopView ? <MessageContentTopView /> : null}
{hasContentSideViews ? (
<View
style={[
styles.contentRow,
alignment === 'right' ? styles.rightAlignContentRow : undefined,
]}
testID='message-content-row'
>
{MessageContentLeadingView ? <MessageContentLeadingView /> : null}
<View style={styles.contentBody}>{contentBody}</View>
{MessageContentTrailingView ? <MessageContentTrailingView /> : null}
</View>
) : (
contentBody
)}
{MessageContentBottomView ? <MessageContentBottomView /> : null}
</View>
<View
style={[
styles.containerInner,
{
backgroundColor,
...getBorderRadius(),
...getBorderRadiusFromTheme(),
},
noBorder ? { borderWidth: 0 } : {},
containerInner,
messageGroupedSingleOrBottom
? isVeryLastMessage && enableMessageGroupingByUser
? lastMessageContainer
: messageGroupedSingleOrBottomContainer
: messageGroupedTopContainer,
]}
testID='message-content-wrapper'
>
{MessageContentTopView ? <MessageContentTopView /> : null}
{hasContentSideViews ? (
<View
style={[
styles.contentRow,
alignment === 'right' ? styles.rightAlignContentRow : undefined,
]}
testID='message-content-row'
>
{MessageContentLeadingView ? <MessageContentLeadingView /> : null}
<View style={styles.contentBody}>{contentBody}</View>
{MessageContentTrailingView ? <MessageContentTrailingView /> : null}
</View>
) : (
contentBody
)}
{MessageContentBottomView ? <MessageContentBottomView /> : null}
</View>
</Pressable>
);
Expand Down
114 changes: 30 additions & 84 deletions package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -798,20 +798,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-top"
>
Expand Down Expand Up @@ -852,20 +843,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
</View>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-bottom"
>
Expand Down Expand Up @@ -1685,20 +1667,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-top"
>
Expand Down Expand Up @@ -1739,20 +1712,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
</View>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-bottom"
>
Expand Down Expand Up @@ -2572,20 +2536,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-top"
>
Expand Down Expand Up @@ -2626,20 +2581,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
</View>
<View
style={
[
{
"height": 0,
"opacity": 0,
"width": 0,
},
{
"transform": [
{
"scale": 0,
},
],
},
]
{
"height": 0,
"opacity": 0,
"width": 0,
}
}
testID="message-overlay-bottom"
>
Expand Down
Loading
Loading