Add connection notice

src/screens/Player/components/ConnectionNotice.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useNetInfo } from '@react-native-community/netinfo';
+import { THEME_COLOR } from 'CONSTANTS';
+import styled from 'styled-components/native';
+import CloudSlash from 'assets/cloud-slash.svg';
+import { Text } from 'react-native';
+
+const Well = styled.View`
+    border-radius: 8px;
+    background-color: ${THEME_COLOR}22;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    margin: 12px 0;
+`;
+
+function ConnectionNotice() {
+    const { isInternetReachable } = useNetInfo();
+
+    if (!isInternetReachable) {
+        return (
+            <Well>
+                <CloudSlash width={24} height={24} fill={THEME_COLOR} />
+                <Text style={{ color: THEME_COLOR, marginLeft: 12 }}>You are currently offline. You can only play previously downloaded music.</Text>
+            </Well>
+        );
+    }
+
+    return null;
+}
+
+export default ConnectionNotice;

src/screens/Player/index.tsx

@@ -5,6 +5,7 @@ import ProgressBar from './components/ProgressBar';
 import NowPlaying from './components/NowPlaying';
 import Queue from './components/Queue';
 import useDefaultStyles from 'components/Colors';
+import ConnectionNotice from './components/ConnectionNotice';
 
 const styles = StyleSheet.create({
     inner: {
@@ -18,6 +19,7 @@ export default function Player() {
     return (
         <ScrollView contentContainerStyle={styles.inner} style={defaultStyles.view}>
             <NowPlaying />
+            <ConnectionNotice />
             <MediaControls />
             <ProgressBar />
             <Queue />