Skip to content

fix: delete background taller than its row on ServersHistory #7536

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
OtavioStasiak merged 5 commits into from
Aug 10, 2026
Merged

fix: delete background taller than its row on ServersHistory #7536

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a1e2d1
fix: delete background taller than its row on server items
OtavioStasiak Jul 31, 2026
02be461
chore: code improvements
OtavioStasiak Jul 31, 2026
49bc57d
Merge branch 'develop' into fix.red-bottom-background-on-servers-history
diegolmello Aug 3, 2026
4504c94
Merge branch 'develop' into fix.red-bottom-background-on-servers-history
OtavioStasiak Aug 5, 2026
4cd624c
Merge branch 'develop' into fix.red-bottom-background-on-servers-history
OtavioStasiak Aug 6, 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
162 changes: 80 additions & 82 deletions app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,123 +19,121 @@ import I18n from '../../../i18n';
export interface IDeleteActionProps {
transX: SharedValue<number>;
width: number;
rowHeight: number;
actionWidth: number;
longSwipe: number;
onDeletePress(): void;
testID?: string;
}

const SERVER_ITEM_PADDING_VERTICAL = 12;
export const DeleteAction = memo(({ transX, width, actionWidth, longSwipe, onDeletePress, testID }: IDeleteActionProps) => {
const { colors } = useTheme();

export const DeleteAction = memo(
({ transX, width, rowHeight, actionWidth, longSwipe, onDeletePress, testID }: IDeleteActionProps) => {
const { colors } = useTheme();
const translateXDelete = useSharedValue(0);

const translateXDelete = useSharedValue(0);
const triggerDeleteAnimation = (toValue: number) => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
Comment thread
OtavioStasiak marked this conversation as resolved.
Outdated
translateXDelete.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
};

const triggerDeleteAnimation = (toValue: number) => {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
translateXDelete.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
};

useAnimatedReaction(
() => transX.value,
(currentTransX, previousTransX) => {
if (I18n.isRTL) {
if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
scheduleOnRN(triggerDeleteAnimation, actionWidth);
} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
scheduleOnRN(triggerDeleteAnimation, 0);
}
} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
scheduleOnRN(triggerDeleteAnimation, -actionWidth);
} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
useAnimatedReaction(
() => transX.value,
(currentTransX, previousTransX) => {
if (I18n.isRTL) {
if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
scheduleOnRN(triggerDeleteAnimation, actionWidth);
} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
scheduleOnRN(triggerDeleteAnimation, 0);
}
} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
scheduleOnRN(triggerDeleteAnimation, -actionWidth);
} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
scheduleOnRN(triggerDeleteAnimation, 0);
}
);
}
);

const animatedDeleteButtonStyles = useAnimatedStyle(() => {
if (I18n.isRTL) {
// RTL: delete button appears from the left when swiping right
if (transX.value > longSwipe && transX.value >= 2 * actionWidth) {
const parallaxSwipe = interpolate(
transX.value,
[2 * actionWidth, longSwipe],
[-actionWidth, -actionWidth - 0.1 * transX.value]
);
return {
transform: [{ translateX: parallaxSwipe - translateXDelete.value }],
left: 0,
right: undefined
};
}
return {
transform: [{ translateX: transX.value - actionWidth - translateXDelete.value }],
left: 0,
right: undefined
};
}
// LTR: delete button appears from the right when swiping left
if (transX.value < -longSwipe && transX.value <= -2 * actionWidth) {
const animatedDeleteButtonStyles = useAnimatedStyle(() => {
if (I18n.isRTL) {
// RTL: delete button appears from the left when swiping right
if (transX.value > longSwipe && transX.value >= 2 * actionWidth) {
const parallaxSwipe = interpolate(
transX.value,
[-2 * actionWidth, -longSwipe],
[actionWidth, actionWidth + 0.1 * transX.value]
[2 * actionWidth, longSwipe],
[-actionWidth, -actionWidth - 0.1 * transX.value]
);
return {
transform: [{ translateX: parallaxSwipe + translateXDelete.value }],
right: 0,
left: undefined
transform: [{ translateX: parallaxSwipe - translateXDelete.value }],
left: 0,
right: undefined
};
}
return {
transform: [{ translateX: transX.value + actionWidth + translateXDelete.value }],
transform: [{ translateX: transX.value - actionWidth - translateXDelete.value }],
left: 0,
right: undefined
};
}
// LTR: delete button appears from the right when swiping left
if (transX.value < -longSwipe && transX.value <= -2 * actionWidth) {
const parallaxSwipe = interpolate(
transX.value,
[-2 * actionWidth, -longSwipe],
[actionWidth, actionWidth + 0.1 * transX.value]
);
return {
transform: [{ translateX: parallaxSwipe + translateXDelete.value }],
right: 0,
left: undefined
};
});
const viewHeight = { height: rowHeight + SERVER_ITEM_PADDING_VERTICAL };

return (
<View
style={[styles.actionsLeftContainer, viewHeight, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
pointerEvents='box-none'>
<Animated.View
style={[
styles.actionRightButtonContainer,
{
width
},
viewHeight,
animatedDeleteButtonStyles
]}>
<RectButton
accessible
accessibilityLabel={I18n.t('Delete')}
testID={testID}
style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
onPress={onDeletePress}>
<CustomIcon size={24} name='delete' color={colors.fontWhite} />
</RectButton>
</Animated.View>
</View>
);
}
);
}
return {
transform: [{ translateX: transX.value + actionWidth + translateXDelete.value }],
right: 0,
left: undefined
};
});
return (
<View
style={[styles.actionsLeftContainer, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
pointerEvents='box-none'>
<Animated.View
style={[
styles.actionRightButtonContainer,
{
width
},
animatedDeleteButtonStyles
]}>
<RectButton
accessible
accessibilityLabel={I18n.t('Delete')}
testID={testID}
style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundDangerDefault }]}
onPress={onDeletePress}>
<CustomIcon size={24} name='delete' color={colors.fontWhite} />
</RectButton>
</Animated.View>
</View>
);
});

const styles = StyleSheet.create({
// Stretches to the row it sits behind, so the row always covers it exactly. Deriving
// the height from a row-height constant instead double-counts whatever padding that
// constant already includes, and any leftover shows up as a red strip below the row.
actionsLeftContainer: {
flexDirection: 'row',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0
},
actionRightButtonContainer: {
position: 'absolute',
justifyContent: 'center',
top: 0,
bottom: 0,
alignItems: 'flex-end'
},
actionButton: {
Expand Down
3 changes: 0 additions & 3 deletions app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export interface ISwipeableDeleteTouchableProps {
children: ReactElement;
testID: string;
width: number;
rowHeight: number;
actionWidth: number;
longSwipe: number;
smallSwipe: number;
Expand All @@ -33,7 +32,6 @@ const SwipeableDeleteTouchable = ({
width,
children,
testID,
rowHeight,
actionWidth,
longSwipe,
smallSwipe,
Expand Down Expand Up @@ -188,7 +186,6 @@ const SwipeableDeleteTouchable = ({
<DeleteAction
width={width}
transX={transX}
rowHeight={rowHeight}
actionWidth={actionWidth}
longSwipe={longSwipe}
onDeletePress={handleDeletePress}
Expand Down
3 changes: 1 addition & 2 deletions app/containers/ServerItem/Touchable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { type AccessibilityRole } from 'react-native';

import SwipeableDeleteTouchable from './SwipeableDeleteItem/Touchable';
import Touch from '../Touch';
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE, ROW_HEIGHT } from './styles';
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
import { useTheme } from '../../theme';

export interface IServerItemTouchableProps {
Expand Down Expand Up @@ -34,7 +34,6 @@ const Touchable = ({
<SwipeableDeleteTouchable
width={width}
testID={testID}
rowHeight={ROW_HEIGHT}
actionWidth={ACTION_WIDTH}
longSwipe={LONG_SWIPE}
smallSwipe={SMALL_SWIPE}
Expand Down
18 changes: 6 additions & 12 deletions app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,13 +708,12 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
style={
[
{
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
},
{
"height": 80,
"top": 0,
},
{
"backgroundColor": "#EC0D2A",
Expand All @@ -727,16 +726,14 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
[
{
"alignItems": "flex-end",
"bottom": 0,
"justifyContent": "center",
"position": "absolute",
"top": 0,
},
{
"width": 390,
},
{
"height": 80,
},
[Function],
]
}
Expand Down Expand Up @@ -1070,13 +1067,12 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
style={
[
{
"bottom": 0,
"flexDirection": "row",
"left": 0,
"position": "absolute",
"right": 0,
},
{
"height": 80,
"top": 0,
},
{
"backgroundColor": "#EC0D2A",
Expand All @@ -1089,16 +1085,14 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
[
{
"alignItems": "flex-end",
"bottom": 0,
"justifyContent": "center",
"position": "absolute",
"top": 0,
},
{
"width": 390,
},
{
"height": 80,
},
[Function],
]
}
Expand Down
Loading
Loading