chore: include privacy policy in app

src/localisation/lang/en/locale.json

@@ -69,5 +69,6 @@
     "color-scheme-system": "System",
     "color-scheme-light": "Light Mode",
     "color-scheme-dark": "Dark Mode",
-    "artists": "Artists"
+    "artists": "Artists",
+    "privacy-policy": "Privacy Policy"
 }

src/localisation/types.ts

@@ -67,4 +67,5 @@ export type LocaleKeys = 'play-next'
 | 'color-scheme-system'
 | 'color-scheme-light'
 | 'color-scheme-dark'
-| 'artists'
+| 'artists'
+| 'privacy-policy'

src/screens/Settings/components/PrivacyPolicy.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Paragraph } from 'components/Typography';
+import { SafeScrollView } from 'components/SafeNavigatorView';
+import policy from '../../../../docs/privacy-policy.md';
+
+const Container = styled(SafeScrollView)`
+    padding: 24px;
+`;
+
+export default function PrivacyPolicy() {
+    return (
+        <Container>
+            <Paragraph>{policy}</Paragraph>
+        </Container>
+    );
+}

src/screens/Settings/index.tsx

@@ -15,6 +15,7 @@ import Library from './stacks/Library';
 import ColorScheme from './stacks/ColorScheme';
 import PlaybackReporting from './stacks/PlaybackReporting';
 import { SafeScrollView } from 'components/SafeNavigatorView';
+import PrivacyPolicy from './components/PrivacyPolicy';
 
 export function SettingsList() {
     const navigation = useNavigation<SettingsNavigationProp>();
@@ -23,6 +24,7 @@ export function SettingsList() {
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
     const handlePlaybackReportingClick = useCallback(() => { navigation.navigate('Playback Reporting'); }, [navigation]);
     const handleColorSchemeClick = useCallback(() => { navigation.navigate('Color Scheme'); }, [navigation]);
+    const handlePrivacyPolicyClick = useCallback(() => { navigation.navigate('PrivacyPolicy'); }, [navigation]);
 
     return (
         <SafeScrollView>
@@ -31,6 +33,7 @@ export function SettingsList() {
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
             <ListButton onPress={handleColorSchemeClick}>{t('color-scheme')}</ListButton>
+            <ListButton onPress={handlePrivacyPolicyClick}>{t('privacy-policy')}</ListButton>
         </SafeScrollView>
     );
 }
@@ -53,6 +56,7 @@ export default function Settings() {
             <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
             <Stack.Screen name="Playback Reporting" component={PlaybackReporting} options={{ headerTitle: t('playback-reporting')}} />
             <Stack.Screen name="Color Scheme" component={ColorScheme} options={{ headerTitle: t('color-scheme')}} />
+            <Stack.Screen name="PrivacyPolicy" component={PrivacyPolicy} options={{ headerTitle: t('privacy-policy') }} />
         </Stack.Navigator>
     );
 }

src/typings/md.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+    const content: string;
+    export default content;
+}