[FIX] Audio player track and thumb not rendering on Android (#1273)

app/containers/message/Audio.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, StyleSheet, Text, Easing
+	View, StyleSheet, Text, Easing, Dimensions
 } from 'react-native';
 import Video from 'react-native-video';
-import Slider from 'react-native-slider';
+import Slider from '@react-native-community/slider';
 import moment from 'moment';
 import equal from 'deep-equal';
 import Touchable from 'react-native-platform-touchable';
@@ -13,6 +13,7 @@ import Markdown from '../markdown';
 import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
 import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors';
+import { isAndroid, isIOS } from '../../utils/deviceInfo';
 
 const styles = StyleSheet.create({
 	audioContainer: {
@@ -42,13 +43,6 @@ const styles = StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
-	},
-	thumbStyle: {
-		width: 12,
-		height: 12
-	},
-	trackStyle: {
-		height: 2
 	}
 });
 
@@ -187,11 +181,10 @@ export default class Audio extends React.Component {
 						minimumValue={0}
 						animateTransitions
 						animationConfig={sliderAnimationConfig}
-						thumbTintColor={COLOR_PRIMARY}
+						thumbTintColor={isAndroid && COLOR_PRIMARY}
 						minimumTrackTintColor={COLOR_PRIMARY}
 						onValueChange={this.onValueChange}
-						thumbStyle={styles.thumbStyle}
-						trackStyle={styles.trackStyle}
+						thumbImage={isIOS && { uri: 'audio_thumb', scale: Dimensions.get('window').scale }}
 					/>
 					<Text style={styles.duration}>{this.duration}</Text>
 				</View>

ios/Podfile.lock

@@ -295,6 +295,8 @@ PODS:
     - React
   - react-native-orientation-locker (1.1.6):
     - React
+  - react-native-slider (2.0.1):
+    - React
   - react-native-splash-screen (3.2.0):
     - React
   - react-native-video (5.0.0):
@@ -433,6 +435,7 @@ DEPENDENCIES:
   - react-native-keyboard-tracking-view (from `../node_modules/react-native-keyboard-tracking-view`)
   - react-native-notifications (from `../node_modules/react-native-notifications`)
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - react-native-video (from `../node_modules/react-native-video`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -563,6 +566,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-notifications"
   react-native-orientation-locker:
     :path: "../node_modules/react-native-orientation-locker"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
   react-native-video:
@@ -701,6 +706,7 @@ SPEC CHECKSUMS:
   react-native-keyboard-tracking-view: 1ebd24a2b6ca2314549aa51775995678094bffa1
   react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
   react-native-orientation-locker: 23918c400376a7043e752c639c122fcf6bce8f1c
+  react-native-slider: ecc7f4cb0ccb9fa1346707ce76eb8618c9c2b598
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-video: 6555881252c8ca039760e1cd6df28ac28ffb2baf
   react-native-webview: 9f588ea09ede9bd1f5443f4aa4ddfadeb51fcd28