chore: migrate TouchableOpacity to Pressable

app/containers/AudioPlayer/PlayButton.tsx

@@ -6,8 +6,8 @@ import styles from './styles';
 import RCActivityIndicator from '../ActivityIndicator';
 import { AUDIO_BUTTON_HIT_SLOP } from './constants';
 import { type TAudioState } from './types';
-import NativeButton from '../NativeButton';
 import getPlayButtonAccessibilityLabel from './getPlayButtonAccessibilityLabel';
+import PressableOpacity from '../PressableOpacity';
 
 interface IButton {
 	disabled?: boolean;
@@ -45,15 +45,19 @@ const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.R
 	const { colors } = useTheme();
 
 	return (
-		<NativeButton
+		<PressableOpacity
 			accessible
 			accessibilityLabel={getPlayButtonAccessibilityLabel(audioState)}
 			style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
+			android_ripple={{
+				color: colors.buttonBackgroundPrimaryPress
+			}}
 			disabled={disabled}
 			onPress={onPress}
-			hitSlop={AUDIO_BUTTON_HIT_SLOP}>
+			hitSlop={AUDIO_BUTTON_HIT_SLOP}
+			disableOpacityOnAndroid>
 			<Icon audioState={audioState} disabled={disabled} />
-		</NativeButton>
+		</PressableOpacity>
 	);
 };
 

app/containers/AudioPlayer/PlaybackSpeed.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import i18n from '../../i18n';
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
 import { useUserPreferences } from '../../lib/methods/userPreferences';
-import NativeButton from '../NativeButton';
+import PressableOpacity from '../PressableOpacity';
 
 const PlaybackSpeed = () => {
 	const [playbackSpeed, setPlaybackSpeed] = useUserPreferences<number>(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]);
@@ -19,13 +19,16 @@ const PlaybackSpeed = () => {
 	};
 
 	return (
-		<NativeButton
-			accessible
-			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
-			onPress={onPress}
-			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
-			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{playbackSpeed}x</Text>
-		</NativeButton>
+		<View style={{ overflow: 'hidden' }}>
+			<PressableOpacity
+				accessible
+				accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
+				onPress={onPress}
+				style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}
+				disableOpacityOnAndroid>
+				<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{playbackSpeed}x</Text>
+			</PressableOpacity>
+		</View>
 	);
 };
 

app/containers/AudioPlayer/Seek.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native';
+import { type LayoutChangeEvent, View, TextInput, type TextInputProps } from 'react-native';
 import { PanGestureHandler, type PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 import Animated, {
 	type SharedValue,
@@ -14,6 +14,7 @@ import Animated, {
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
+import PressableOpacity from '../PressableOpacity';
 
 Animated.addWhitelistedNativeProps({ text: true });
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
@@ -106,7 +107,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 
 	// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
 	return (
-		<TouchableNativeFeedback>
+		<PressableOpacity style={{ flex: 1 }} disableAndroidRipple>
 			<View style={styles.seekContainer}>
 				<AnimatedTextInput
 					defaultValue={DEFAULT_TIME_LABEL}
@@ -123,7 +124,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 					</PanGestureHandler>
 				</View>
 			</View>
-		</TouchableNativeFeedback>
+		</PressableOpacity>
 	);
 };
 

app/containers/Avatar/Avatar.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { Image } from 'expo-image';
-import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import Emoji from '../markdown/components/emoji/Emoji';
@@ -10,6 +9,7 @@ import { SubscriptionType } from '../../definitions';
 import { type IAvatar } from './interfaces';
 import MarkdownContext from '../markdown/contexts/MarkdownContext';
 import I18n from '../../i18n';
+import PressableOpacity from '../PressableOpacity';
 
 const Avatar = React.memo(
 	({
@@ -97,9 +97,13 @@ const Avatar = React.memo(
 
 		if (onPress) {
 			image = (
-				<Touchable accessible={accessible} accessibilityLabel={avatarAccessibilityLabel} onPress={onPress}>
+				<PressableOpacity
+					accessible={accessible}
+					accessibilityLabel={avatarAccessibilityLabel}
+					disableAndroidRipple
+					onPress={onPress}>
 					{image}
-				</Touchable>
+				</PressableOpacity>
 			);
 		}