Refactor ProgressBar to React Native Slider

ios/Podfile.lock

@@ -242,11 +242,13 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
-  - react-native-safe-area-context (3.0.5):
+  - react-native-safe-area-context (3.0.7):
+    - React
+  - react-native-slider (3.0.0):
     - React
   - react-native-track-player (1.2.3):
     - React
-  - react-native-webview (10.3.1):
+  - react-native-webview (10.3.2):
     - React
   - React-RCTActionSheet (0.62.2):
     - React-Core/RCTActionSheetHeaders (= 0.62.2)
@@ -311,7 +313,7 @@ PODS:
     - React
   - RNCMaskedView (0.1.10):
     - React
-  - RNCPicker (1.6.3):
+  - RNCPicker (1.6.5):
     - React
   - RNFastImage (8.1.5):
     - React
@@ -321,7 +323,7 @@ PODS:
     - React
   - RNReanimated (1.9.0):
     - React
-  - RNScreens (2.8.0):
+  - RNScreens (2.9.0):
     - React
   - RNSVG (12.1.0):
     - React
@@ -374,6 +376,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-track-player (from `../node_modules/react-native-track-player`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -447,6 +450,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   react-native-track-player:
     :path: "../node_modules/react-native-track-player"
   react-native-webview:
@@ -519,9 +524,10 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
-  react-native-safe-area-context: e768fca90207ee68924b3d0877633f2ce9cc9d68
+  react-native-safe-area-context: c39fc20a20cd66ebf1d56c6f8b8711142fbfee98
+  react-native-slider: 05f11678260cb27c3d00a2dd1558b623be3ec8d2
   react-native-track-player: ba2416753b58f3cdf9db5a07daa65876d659f925
-  react-native-webview: 40bbeb6d011226f34cb83f845aeb0fdf515cfc5f
+  react-native-webview: e2c0bce9a1a7c7edd4eb30f0c3016fce216245ce
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
   React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71
@@ -534,11 +540,11 @@ SPEC CHECKSUMS:
   ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
   RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
-  RNCPicker: 1c63b084bcbcd33d159a83144543f3bda4cd1793
+  RNCPicker: 55b9b4240d0a9eba8733d02616775d4040de2e7d
   RNFastImage: 35ae972d6727c84ee3f5c6897e07f84d0a3445e9
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
-  RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244
+  RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   RNTableView: e8723c30aec3b259222a12e7d05d763566286a46
   SDWebImage: e3eae2eda88578db0685a0c88597fdadd9433f05

package-lock.json

@@ -13,18 +13,18 @@
       }
     },
     "@babel/core": {
-      "version": "7.10.2",
+      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.4.tgz",
-      "integrity": "sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==",
+      "integrity": "sha512-3A0tS0HWpy4XujGc7QtOIHTeNwUgWaZc/WuS5YQrfhU67jnVmsD6OGPc1AKHH0LJHQICGncy3+YUjIhVlfDdcA==",
       "requires": {
-        "@babel/code-frame": "^7.10.1",
+        "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.10.2",
+        "@babel/generator": "^7.10.4",
-        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-module-transforms": "^7.10.4",
-        "@babel/helpers": "^7.10.1",
+        "@babel/helpers": "^7.10.4",
-        "@babel/parser": "^7.10.2",
+        "@babel/parser": "^7.10.4",
-        "@babel/template": "^7.10.1",
+        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.1",
+        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.2",
+        "@babel/types": "^7.10.4",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
@@ -35,6 +35,196 @@
         "source-map": "^0.5.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz",
+          "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==",
+          "requires": {
+            "@babel/types": "^7.10.4",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
+          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
+          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.4.tgz",
+          "integrity": "sha512-m5j85pK/KZhuSdM/8cHUABQTAslV47OjfIB9Cc7P+PvlAoBzdb79BGNfw8RhT5Mq3p+xGd0ZfAKixbrUZx0C7A==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
+          "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.4.tgz",
+          "integrity": "sha512-Er2FQX0oa3nV7eM1o0tNCTx7izmQtwAQsIiaLRWtavAAEcskb0XJ5OjJbVrYXWOTr8om921Scabn4/tzlx7j1Q==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-simple-access": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
+          "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
+          "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.10.4",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
+          "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
+          "requires": {
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
+          "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+          "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
+        },
+        "@babel/highlight": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz",
+          "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA=="
+        },
+        "@babel/template": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
+          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz",
+          "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.4",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz",
+          "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+        },
         "debug": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -43,10 +233,23 @@
             "ms": "^2.1.1"
           }
         },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -265,13 +468,168 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.10.1",
+      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
-      "integrity": "sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==",
+      "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
       "requires": {
-        "@babel/template": "^7.10.1",
+        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.1",
+        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.1"
+        "@babel/types": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz",
+          "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==",
+          "requires": {
+            "@babel/types": "^7.10.4",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
+          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
+          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
+          "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+          "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
+        },
+        "@babel/highlight": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz",
+          "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA=="
+        },
+        "@babel/template": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
+          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz",
+          "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==",
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.4",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz",
+          "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "@babel/highlight": {
@@ -760,9 +1118,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.10.2",
+      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.4.tgz",
-      "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+      "integrity": "sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -864,24 +1222,24 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.28",
+      "version": "0.2.29",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.28/fontawesome-common-types-0.2.28.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.29/fontawesome-common-types-0.2.29.tgz",
-      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+      "integrity": "sha512-cY+QfDTbZ7XVxzx7jxbC98Oxr/zc7R2QpTLqTxqlfyXDrAJjzi/xUIqAUsygELB62JIrbsWxtSRhayKFkGI7MA=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.28",
+      "version": "1.2.29",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.28/fontawesome-svg-core-1.2.28.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.29/fontawesome-svg-core-1.2.29.tgz",
-      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "integrity": "sha512-xmPmP2t8qrdo8RyKihTkGb09RnZoc+7HFBCnr0/6ZhStdGDSLeEd7ajV181+2W29NWIFfylO13rU+s3fpy3cnA==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.13.0",
+      "version": "5.13.1",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.13.0/free-solid-svg-icons-5.13.0.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.13.1/free-solid-svg-icons-5.13.1.tgz",
-      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "integrity": "sha512-LQH/0L1p4+rqtoSHa9qFYR84hpuRZKqaQ41cfBQx8b68p21zoWSekTAeA54I/2x9VlCHDLFlG74Nmdg4iTPQOg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/react-native-fontawesome": {
@@ -1660,28 +2018,33 @@
       "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ=="
     },
     "@react-native-community/picker": {
-      "version": "1.6.3",
+      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.6.5.tgz",
-      "integrity": "sha512-8oPcwimsz14BDu0a8smuqw52uuaXgWrUKAVhv1mXMFvZq3Spt23UVH8Q0Zogi4t7WNlwx4dNXB08iUUP8ltKzg=="
+      "integrity": "sha512-mwt0sBaFdURJWkq6wFf2BrYh7fzB1CKK4/gx20zmDYDmahvk3CVUQVlkINDDyXE9m0lYZ9V8rBZBBAJy9W3GkQ=="
+    },
+    "@react-native-community/slider": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-3.0.0.tgz",
+      "integrity": "sha512-deNc3JHBHz24YN+0DTAocXfrYFIFc1DvsIriMJSsJlR/MvsLzoq2+qwaEN+0/LJ37pstv85wZWY0pNugk4e41g=="
     },
     "@react-navigation/bottom-tabs": {
-      "version": "5.5.2",
+      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.6.1.tgz",
-      "integrity": "sha512-unopBnv8i3hcjhp2qdhgSwF6GFnhkdtPwGbvJMOG8Na19oPscT8UQDUbHZKs9wiJMk2Q0usEz2PbFh8GQGAf7w==",
+      "integrity": "sha512-aAqA4lCaa1x3cEWwEyUJ5hBPpVuv/TR0Q0Y/hkBgI2+h27Xdv9B/ZemMIjMWTNDZTjbYXTsJ41AJbVQnPSVTrg==",
       "requires": {
         "color": "^3.1.2",
         "react-native-iphone-x-helper": "^1.2.1"
       }
     },
     "@react-navigation/core": {
-      "version": "5.10.0",
+      "version": "5.11.1",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.11.1.tgz",
-      "integrity": "sha512-cVQTj5FtZHWuymjZMP50RVXYpkQUbo1zQPjxJl+UfBUh7u9nKexknajBhjYbZq61uDE4MmPE8qAqIEJHKeR4Hg==",
+      "integrity": "sha512-zJ/w84msKBhgRR35/tHdY1facxdnN/WP9Ebutnjp/J9ENuv7fHXhYlxX+oIRrMn+/MnbG79RVnYcO/r4lO8OTQ==",
       "requires": {
-        "@react-navigation/routers": "^5.4.7",
+        "@react-navigation/routers": "^5.4.8",
         "escape-string-regexp": "^4.0.0",
-        "nanoid": "^3.1.5",
+        "nanoid": "^3.1.9",
-        "query-string": "^6.12.1",
+        "query-string": "^6.13.1",
         "react-is": "^16.13.0",
         "use-subscription": "^1.4.0"
       },
@@ -1694,37 +2057,37 @@
       }
     },
     "@react-navigation/native": {
-      "version": "5.5.1",
+      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.6.1.tgz",
-      "integrity": "sha512-5pzsfvLdnvqfrWgTMCLDFaGK6Sj30p7tAMhUGneV2oGlx0OIbhgc6/04UUMpKEmAS2PaC/GZa1LQIsSVWDewvw==",
+      "integrity": "sha512-jnSNEnuRzqLvG+7QcMthfB8eCZIzAE0Wku7HDgzfjFS2iA7Oa9ugeX/1qdP9heT2Mp0t9BDQ4XX4boJma9Z/xg==",
       "requires": {
-        "@react-navigation/core": "^5.10.0",
+        "@react-navigation/core": "^5.11.1",
         "nanoid": "^3.1.9"
       }
     },
     "@react-navigation/routers": {
-      "version": "5.4.7",
+      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.8.tgz",
-      "integrity": "sha512-J+lQYDbEsyhAjcPpWY6ZJYEkGiZcPX62hNtySruShjbIEnI9gm3rC+BHdcrP/lufeWxWGFhI8CN7NSJGgP/Nmg==",
+      "integrity": "sha512-7uxC24fgLQdRquxPfL8SZ8zjle5DXdAB56aYL13tH+HAdhO2YxjKVvulzhGUsfcZthMvZ/9psybhn+m4z71dUg==",
       "requires": {
-        "nanoid": "^3.1.5"
+        "nanoid": "^3.1.9"
       }
     },
     "@react-navigation/stack": {
-      "version": "5.5.1",
+      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.6.2.tgz",
-      "integrity": "sha512-oU2FEm+Ba6jMd5VA2WnuNfCO2HlZmGhrEX9yjBCyFj7fFCG1SB7WJdKLhZShtx3KxG/qWKphICeTLlYvkHdSpQ==",
+      "integrity": "sha512-51Aasxg8j2eKxz4mhA0ajJXrhAyJQkk2iiNE511zcqJ3tlfxv/h70Eej3PetnbbHFMOwNsEwc2GjB3OnfQcxjQ==",
       "requires": {
         "color": "^3.1.2",
         "react-native-iphone-x-helper": "^1.2.1"
       }
     },
     "@reduxjs/toolkit": {
-      "version": "1.3.6",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.4.0.tgz",
-      "integrity": "sha512-eNYURfoJa6mRNU5YtBVbmE5+nDoc4lpjZ181PBwRC6nIFYZdNR3GcoQ4uomFt8eHpXAUAdpCdxBlDsmwyXOt9Q==",
+      "integrity": "sha512-hkxQwVx4BNVRsYdxjNF6cAseRmtrkpSlcgJRr3kLUcHPIAMZAmMJkXmHh/eUEGTMqPzsYpJLM7NN2w9fxQDuGw==",
       "requires": {
-        "immer": "^6.0.1",
+        "immer": "^7.0.3",
         "redux": "^4.0.0",
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0"
@@ -1834,9 +2197,9 @@
       "dev": true
     },
     "@types/lodash": {
-      "version": "4.14.155",
+      "version": "4.14.157",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.155.tgz",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz",
-      "integrity": "sha512-vEcX7S7aPhsBCivxMwAANQburHBtfN9RdyXFk84IJmu2Z4Hkg1tOFgaslRiEqqvoLtbCBi6ika1EMspE+NZ9Lg=="
+      "integrity": "sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ=="
     },
     "@types/prop-types": {
       "version": "15.7.3",
@@ -1853,9 +2216,9 @@
       }
     },
     "@types/react-native": {
-      "version": "0.62.13",
+      "version": "0.62.17",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.13.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.17.tgz",
-      "integrity": "sha512-hs4/tSABhcJx+J8pZhVoXHrOQD89WFmbs8QiDLNSA9zNrD46pityAuBWuwk1aMjPk9I3vC5ewkJroVRHgRIfdg==",
+      "integrity": "sha512-nkWG9oYS0wNiobzY11GOAjG/spV4vCPIbW+u1QIXx+wnQQ4EhkFz6lqqvncO3puXMzwkRhEGawq/bImMReA/vQ==",
       "requires": {
         "@types/react": "*"
       }
@@ -4822,9 +5185,9 @@
       "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
     },
     "immer": {
-      "version": "6.0.9",
+      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-6.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.5.tgz",
-      "integrity": "sha512-SyCYnAuiRf67Lvk0VkwFvwtDoEiCMjeamnHvRfnVDyc7re1/rQrNxuL+jJ7lA3WvdC4uznrvbmm+clJ9+XXatg=="
+      "integrity": "sha512-TtRAKZyuqld2eYjvWgXISLJ0ZlOl1OOTzRmrmiY8SlB0dnAhZ1OiykIDL5KDFNaPHDXiLfGQFNJGtet8z8AEmg=="
     },
     "import-fresh": {
       "version": "2.0.0",
@@ -8827,14 +9190,14 @@
       }
     },
     "react-native-safe-area-context": {
-      "version": "3.0.5",
+      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz",
-      "integrity": "sha512-cLZtHvzm/tdCTCOCgNRUsnl9ma8MozE9vtxHQVftuY6hRt+esCBdXA5jXcuCaCj+yUe4Akw+c5BPFNUF5vOTjQ=="
+      "integrity": "sha512-dqhRTlIFe5+P1yxitj0C9XVUxLqOmjomeqzUSSY8sNOWVjtIhEY/fl4ZKYpAVnktd8dt3zl13XmJTmRmy3d0uA=="
     },
     "react-native-screens": {
-      "version": "2.8.0",
+      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz",
-      "integrity": "sha512-fUCIQLZX+5XB0ypWX038P3zso54IFFjTsQUZJWEsjC3pp5rPItAt5SzqtJn+uVjcJaczZ+dpIuvj6IFLqkWLZQ=="
+      "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg=="
     },
     "react-native-section-list-get-item-layout": {
       "version": "2.2.3",
@@ -8872,9 +9235,9 @@
       "from": "github:leinelissen/react-native-track-player"
     },
     "react-native-webview": {
-      "version": "10.3.1",
+      "version": "10.3.2",
-      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.3.2.tgz",
-      "integrity": "sha512-Ac0v4lFaJl5P/haLook+UIKMW4Ru5xg0+AdxD2oJRB2TPgdqoATziYNU0LBMjntlxDp+DVzdr3fVDuLMdox0tg==",
+      "integrity": "sha512-4A8FKL/puonkqQ1FOKd+iPulqRXCG4inmIK4pQ60zv9Ua+YkBKLxxofQiCvRwIXSSgAXYT+AE3rOHr3bx4A/cw==",
       "requires": {
         "escape-string-regexp": "2.0.0",
         "invariant": "2.2.4"
@@ -10171,9 +10534,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "3.9.5",
+      "version": "3.9.6",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.6.tgz",
-      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
+      "integrity": "sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==",
       "dev": true
     },
     "ua-parser-js": {

package.json

@@ -12,17 +12,18 @@
     "build:ios": "react-native bundle --entry-file='index.ts' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
     "@fortawesome/react-native-fontawesome": "^0.2.5",
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/masked-view": "^0.1.10",
-    "@react-native-community/picker": "^1.6.3",
+    "@react-native-community/picker": "^1.6.5",
-    "@react-navigation/bottom-tabs": "^5.5.2",
+    "@react-native-community/slider": "^3.0.0",
-    "@react-navigation/native": "^5.5.1",
+    "@react-navigation/bottom-tabs": "^5.6.1",
-    "@react-navigation/stack": "^5.5.1",
+    "@react-navigation/native": "^5.6.1",
-    "@reduxjs/toolkit": "^1.3.6",
+    "@react-navigation/stack": "^5.6.2",
-    "@types/lodash": "^4.14.155",
+    "@reduxjs/toolkit": "^1.4.0",
+    "@types/lodash": "^4.14.157",
     "@types/redux-logger": "^3.0.8",
     "@types/styled-components": "^5.1.0",
     "date-fns": "^2.14.0",
@@ -33,14 +34,14 @@
     "react-native-fast-image": "^8.1.5",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.9.0",
-    "react-native-safe-area-context": "^3.0.5",
+    "react-native-safe-area-context": "^3.0.7",
-    "react-native-screens": "^2.8.0",
+    "react-native-screens": "^2.9.0",
     "react-native-section-list-get-item-layout": "^2.2.3",
     "react-native-svg": "^12.1.0",
     "react-native-swift": "^1.2.3",
     "react-native-tableview": "^3.0.0",
     "react-native-track-player": "github:leinelissen/react-native-track-player",
-    "react-native-webview": "^10.3.1",
+    "react-native-webview": "^10.3.2",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
@@ -48,11 +49,11 @@
     "styled-components": "^5.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.10.4",
-    "@babel/runtime": "^7.6.2",
+    "@babel/runtime": "^7.10.4",
     "@react-native-community/eslint-config": "^1.0.0",
     "@types/jest": "^24.0.24",
-    "@types/react-native": "^0.62.0",
+    "@types/react-native": "^0.62.17",
     "@types/react-redux": "^7.1.9",
     "@types/react-test-renderer": "16.9.2",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
@@ -64,7 +65,7 @@
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.58.0",
     "react-test-renderer": "16.11.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.6"
   },
   "jest": {
     "preset": "react-native",

src/screens/Player/components/ProgressBar.tsx

@@ -1,42 +1,9 @@
 import React, { Component } from 'react';
-import TrackPlayer, { State as PlayerState } from 'react-native-track-player';
+import TrackPlayer from 'react-native-track-player';
 import styled from 'styled-components/native';
-import { Text, Dimensions } from 'react-native';
+import { Text } from 'react-native';
-import { padStart, debounce } from 'lodash';
+import { padStart } from 'lodash';
-import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import Slider from '@react-native-community/slider';
-
-const Screen = Dimensions.get('screen');
-
-const Container = styled.View`
-    width: 100%;
-    margin-top: 10px;
-    background-color: #eeeeee;
-    position: relative;
-`;
-
-interface ProgressProp {
-    progress: number;
-}
-
-const Bar = styled.View<ProgressProp>`
-    background-color: salmon;
-    height: 4px;
-    border-radius: 2px;
-    width: ${(props: ProgressProp) => props.progress * 100}%;
-`;
-
-const PositionIndicator = styled.View<ProgressProp>`
-    width: 20px;
-    height: 20px;
-    border-radius: 100px;
-    border: 1px solid #eee;
-    background-color: white;
-    transform: translateX(-10px) translateY(-8.5px);
-    position: absolute;
-    top: 0;
-    left: ${props => props.progress * 100}%;
-    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
-`;
 
 const NumberBar = styled.View`
     flex-direction: row;
@@ -56,10 +23,7 @@ function getMinutes(seconds: number): number {
 interface State {
     position: number;
     duration: number;
-    gesture?: {
+    gesture?: number;
-        previousState?: PlayerState;
-        translation?: number;
-    }
 }
 
 export default class ProgressBar extends Component<{}, State> {
@@ -87,63 +51,34 @@ export default class ProgressBar extends Component<{}, State> {
         this.setState({ position, duration });
     }
 
-    handleGesture = async (event: PanGestureHandlerGestureEvent) => {
+    handleGesture = async (gesture: number) => {
-        // Check if the gesture has started, and if it has not, prepare the player
+        console.log(gesture);
-        if (!this.state.gesture) {
-            // Pause the player and store the previous state
-            TrackPlayer.getState()
-                .then((previousState) => this.setState({ gesture: { previousState }}))
-                .then(() => TrackPlayer.pause());
-            
-        }
-
         // Set relative translation in state
-        this.setState({ 
+        this.setState({ gesture });
-            gesture: { 
-                previousState: this.state.gesture?.previousState,
-                translation: event.nativeEvent?.absoluteX,
-            },
-        });
-
-        // Trigger the end of gesture function
-        this.handleEndOfGesture();
     }
 
-    handleEndOfGesture = debounce(() => {
+    handleEndOfGesture = (position: number) => {
         // Calculate and set the new position
-        const { gesture, duration } = this.state;
-        const progress = Math.min(Math.max((gesture?.translation || 0) / Screen.width, 0), 1);
-        const position = Math.floor(duration * progress);
         TrackPlayer.seekTo(position);
-
-        // Restart the player
-        if (this.state.gesture?.previousState === TrackPlayer.STATE_PLAYING) {
-            TrackPlayer.play();
-        }
-
         this.setState({ gesture: undefined, position });
-    }, 500);
+    }
 
     render() {
         const { position, duration, gesture } = this.state;
-        const progress = gesture
+
-            ? Math.min(Math.max((gesture?.translation || 0) / Screen.width, 0), 1)
-            : position / duration;
-            
         return (
             <>
-                <PanGestureHandler onGestureEvent={this.handleGesture}>
+                <Slider
-                    <Container>
+                    value={gesture || position}
-                        <Bar progress={progress} />
+                    minimumValue={0}
-                        <PositionIndicator progress={progress} />
+                    maximumValue={duration || 0}
-                    </Container>
+                    onValueChange={this.handleGesture}
-                </PanGestureHandler>
+                    onSlidingComplete={this.handleEndOfGesture}
+                    minimumTrackTintColor={'#ff8c69'}
+                    disabled={!duration}
+                />
                 <NumberBar>
-                    <Text>0:00</Text>
+                    <Text>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
-                    {gesture
-                        ? <Text>{getMinutes(duration * progress)}:{getSeconds(duration * progress)}</Text>
-                        : <Text>{getMinutes(position)}:{getSeconds(position)}</Text>
-                    }
                     <Text>{getMinutes(duration)}:{getSeconds(duration)}</Text>
                 </NumberBar>
             </>