Try Gesture mock

__tests__/containers/LoginServices/__snapshots__/LoginServices.stories.storyshot

@@ -2,4 +2,4 @@
 
 exports[`Storyshots Login Services Separators 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"More options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"More options\\"},\\"children\\":[\\"More options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]},{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Less options\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":2,\\"marginBottom\\":0,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1d74f5\\",\\"fontSize\\":16},null],\\"accessibilityLabel\\":\\"Less options\\"},\\"children\\":[\\"Less options\\"]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginVertical\\":24}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"marginLeft\\":14,\\"marginRight\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"OR\\"]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"height\\":1,\\"flex\\":1},{\\"backgroundColor\\":\\"#e1e5e8\\"}]},\\"children\\":null}]}]"`;
 
-exports[`Storyshots Login Services Service List 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]"`;
+exports[`Storyshots Login Services Service List 1`] = `"[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15},\\"accessible\\":true,\\"focusable\\":true},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"github\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15},\\"accessible\\":true,\\"focusable\\":true},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"gitlab\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15},\\"accessible\\":true,\\"focusable\\":true},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"google\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"borderRadius\\":2,\\"width\\":\\"100%\\",\\"height\\":48,\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"center\\",\\"paddingHorizontal\\":15},\\"accessible\\":true,\\"focusable\\":true},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#0d0e12\\"},{\\"position\\":\\"absolute\\",\\"left\\":15,\\"top\\":12,\\"width\\":24,\\"height\\":24},{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"Continue with\\",\\" \\",{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"600\\"}},\\"children\\":[\\"apple\\"]}]}]}]"`;

app/containers/message/Attachments.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native';
 
 import { IMessageAttachments } from './interfaces';
 import Image from './Image';
-import Audio from './Audio';
+import Audio from './Components/Audio';
 import Video from './Video';
 import Reply from './Reply';
 import Button from '../Button';

app/containers/message/Components/Audio/Slider.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming, Easing } from 'react-native-reanimated';
+
+import styles, { SLIDER_THUMB_RADIUS } from '../../styles';
+import { useTheme } from '../../../../theme';
+
+interface ISliderProps {
+	value: number;
+	maximumValue: number;
+	onValueChange: (value: number) => void;
+	onSlidingEnd: (value: number) => void;
+	thumbTintColor?: string;
+	activeTrackColor: string;
+	trackColor: string;
+	disabled?: boolean;
+	thumbImage?: { uri: string; scale: number | undefined };
+	containerStyle?: StyleProp<ViewStyle>;
+	animationConfig?: { duration: number; easing: Animated.EasingFunction };
+}
+
+const Slider = ({
+	value,
+	maximumValue,
+	onValueChange,
+	onSlidingEnd,
+	thumbTintColor,
+	activeTrackColor,
+	trackColor,
+	disabled,
+	containerStyle,
+	animationConfig = {
+		duration: 200,
+		easing: Easing.linear
+	}
+}: ISliderProps): React.ReactElement => {
+	const { colors } = useTheme();
+	const [sliderWidth, setSliderWidth] = useState<number>(0);
+	const [isSliding, setSliding] = useState<boolean>(false);
+	const sliderThumbWidth = useSharedValue(2 * SLIDER_THUMB_RADIUS);
+	const currentValue = useSharedValue(0);
+
+	useEffect(() => {
+		if (!isSliding) {
+			currentValue.value = withTiming(value, animationConfig);
+		}
+	}, [value, isSliding]);
+
+	const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+	const equivalentValue = (sliderPosition: number) => interpolate(sliderPosition, [0, sliderWidth], [0, maximumValue]);
+
+	const onLayout = (event: any) => {
+		setSliderWidth(event.nativeEvent.layout.width);
+	};
+
+	const tapGesture = Gesture.Tap()
+		.hitSlop({ vertical: 10 })
+		.onStart(e => {
+			currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+			onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+			onSlidingEnd(equivalentValue(clamp(e.x, 0, sliderWidth)));
+		});
+
+	const dragGesture = Gesture.Pan()
+		.hitSlop({ horizontal: 5, vertical: 20 })
+		.onStart(() => {
+			setSliding(true);
+			sliderThumbWidth.value = withTiming(3 * SLIDER_THUMB_RADIUS, { duration: 100 });
+		})
+		.onChange(e => {
+			currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+			onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+		})
+		.onEnd(e => {
+			sliderThumbWidth.value = withTiming(2 * SLIDER_THUMB_RADIUS, { duration: 100 });
+			currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+			onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+			onSlidingEnd(equivalentValue(clamp(e.x, 0, sliderWidth)));
+			setSliding(false);
+		});
+
+	const animatedThumbStyles = useAnimatedStyle(() => ({
+		transform: [
+			{
+				translateX: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
+			}
+		],
+		width: sliderThumbWidth.value,
+		height: sliderThumbWidth.value
+	}));
+
+	const animatedTrackStyles = useAnimatedStyle(() => ({
+		width: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth])
+	}));
+
+	const gesture = disabled ? undefined : Gesture.Simultaneous(tapGesture, dragGesture);
+
+	return (
+		<View style={[styles.sliderContainer, containerStyle]}>
+			<GestureDetector gesture={gesture}>
+				<View style={[styles.track, { backgroundColor: trackColor }]} onLayout={onLayout}>
+					<Animated.View
+						style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
+					/>
+					<Animated.View style={[styles.activeTrack, { backgroundColor: activeTrackColor }, animatedTrackStyles]} />
+				</View>
+			</GestureDetector>
+		</View>
+	);
+};
+
+export default Slider;

app/containers/message/Components/Audio/index.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 import { Audio, AVPlaybackStatus, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
-import Slider from '@react-native-community/slider';
 import moment from 'moment';
 import { dequal } from 'dequal';
 import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
 import { Sound } from 'expo-av/build/Audio/Sound';
 
-import Touchable from './Touchable';
+import Touchable from '../../Touchable';
-import Markdown from '../markdown';
+import Markdown from '../../../markdown';
-import { CustomIcon } from '../CustomIcon';
+import { CustomIcon } from '../../../CustomIcon';
-import sharedStyles from '../../views/Styles';
+import sharedStyles from '../../../../views/Styles';
-import { themes } from '../../lib/constants';
+import { themes } from '../../../../lib/constants';
-import { isAndroid, isIOS } from '../../lib/methods/helpers';
+import { isAndroid, isIOS } from '../../../../lib/methods/helpers';
-import MessageContext from './Context';
+import MessageContext from '../../Context';
-import ActivityIndicator from '../ActivityIndicator';
+import ActivityIndicator from '../../../ActivityIndicator';
-import { withDimensions } from '../../dimensions';
+import { withDimensions } from '../../../../dimensions';
-import { TGetCustomEmoji } from '../../definitions/IEmoji';
+import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
-import { IAttachment } from '../../definitions';
+import { IAttachment } from '../../../../definitions';
-import { TSupportedThemes } from '../../theme';
+import { TSupportedThemes } from '../../../../theme';
-import { downloadAudioFile } from '../../lib/methods/audioFile';
+import { downloadAudioFile } from '../../../../lib/methods/audioFile';
+import Slider from './Slider';
 
 interface IButton {
 	loading: boolean;
@@ -73,9 +73,6 @@ const styles = StyleSheet.create({
 	audioLoading: {
 		marginHorizontal: 8
 	},
-	slider: {
-		flex: 1
-	},
 	duration: {
 		marginHorizontal: 12,
 		fontSize: 14,
@@ -251,7 +248,11 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 		}
 	};
 
-	onValueChange = async (value: number) => {
+	onValueChange = (value: number) => {
+		this.setState({ currentTime: value });
+	};
+
+	onSlidingEnd = async (value: number) => {
 		try {
 			this.setState({ currentTime: value });
 			await this.sound.setPositionAsync(value * 1000);
@@ -296,14 +297,13 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 					<Button disabled={isReply} loading={loading} paused={paused} onPress={this.togglePlayPause} theme={theme} />
 					<Slider
 						disabled={isReply}
-						style={styles.slider}
 						value={currentTime}
 						maximumValue={duration}
-						minimumValue={0}
 						thumbTintColor={thumbColor}
-						minimumTrackTintColor={themes[theme].tintColor}
+						trackColor={themes[theme].auxiliaryText}
-						maximumTrackTintColor={themes[theme].auxiliaryText}
+						activeTrackColor={themes[theme].tintColor}
 						onValueChange={this.onValueChange}
+						onSlidingEnd={this.onSlidingEnd}
 						thumbImage={isIOS ? { uri: 'audio_thumb', scale } : undefined}
 					/>
 					<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{this.duration}</Text>

app/containers/message/styles.ts

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../../views/Styles';
 import { isTablet } from '../../lib/methods/helpers';
 
+export const SLIDER_THUMB_RADIUS = 6;
+
 export default StyleSheet.create({
 	root: {
 		flexDirection: 'row'
@@ -169,5 +171,22 @@ export default StyleSheet.create({
 	threadDetails: {
 		flex: 1,
 		marginLeft: 12
+	},
+	sliderContainer: {
+		flex: 1,
+		paddingHorizontal: 10
+	},
+	track: {
+		justifyContent: 'center'
+	},
+	activeTrack: {
+		height: 2
+	},
+	sliderThumb: {
+		height: SLIDER_THUMB_RADIUS * 2,
+		width: SLIDER_THUMB_RADIUS * 2,
+		borderRadius: 2 * SLIDER_THUMB_RADIUS,
+		position: 'absolute',
+		zIndex: 2
 	}
 });

jest.setup.js

@@ -1,5 +1,6 @@
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+import mockGestureHandler from 'react-native-gesture-handler/src/mocks';
 
 jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);
 
@@ -67,3 +68,28 @@ jest.mock('react-native-math-view', () => {
 		MathText: react.View // {...} Named export
 	};
 });
+
+jest.mock('react-native-gesture-handler', () => {
+	const react = require('react-native');
+	return {
+		...mockGestureHandler,
+		Gesture: {
+			Tap: jest.fn(() => ({
+				hitSlop: jest.fn(() => ({
+					onStart: jest.fn()
+				}))
+			})),
+			Pan: jest.fn(() => ({
+				hitSlop: jest.fn(() => ({
+					onStart: jest.fn(() => ({
+						onChange: jest.fn(() => ({
+							onEnd: jest.fn()
+						}))
+					}))
+				}))
+			})),
+			Simultaneous: jest.fn()
+		},
+		GestureDetector: react.View
+	};
+});

package.json

@@ -42,7 +42,6 @@
 		"@react-native-community/masked-view": "0.1.11",
 		"@react-native-community/netinfo": "6.0.0",
 		"@react-native-community/picker": "^1.8.1",
-		"@react-native-community/slider": "4.2.2",
 		"@react-native-cookies/cookies": "6.2.1",
 		"@react-native-firebase/analytics": "^14.11.0",
 		"@react-native-firebase/app": "^14.11.0",
@@ -221,7 +220,8 @@
 		},
 		"setupFilesAfterEnv": [
 			"@testing-library/jest-native/extend-expect",
-			"./jest.setup.js"
+			"./jest.setup.js",
+			"./node_modules/react-native-gesture-handler/jestSetup.js"
 		]
 	},
 	"snyk": true,

yarn.lock

@@ -4988,11 +4988,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/picker/-/picker-1.8.1.tgz#94f14f0aad98fa7592967b941be97deec95c3805"
   integrity sha512-Sj9DzX1CSnmYiuEQ5fQhExoo4XjSKoZkqLPAAybycq6RHtCuWppf+eJXRMCOJki25BlKSSt+qVqg0fIe//ujNQ==
 
-"@react-native-community/slider@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.2.2.tgz#06a0de89c26c6bd03d95798b777db1872b60c066"
-  integrity sha512-C1ldx1ypQo+uDWx78TUBG0evLVopKYHK2mQencl+vxi4ebMTL+ipJv5MF5mEvmZWLUOAMm5AsoQNHChYUdyWrQ==
-
 "@react-native-community/viewpager@3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-3.3.0.tgz#e613747a43a31a6f3278f817ba96fdaaa7941f23"