chore: include privacy policy in app

metro.config.js

@@ -13,11 +13,27 @@ module.exports = (async () => {
     } = await getDefaultConfig();
     return {
         transformer: {
-            babelTransformerPath: require.resolve('react-native-svg-transformer')
+            babelTransformerPath: require.resolve('./scripts/transformer.js'),
         },
         resolver: {
-            assetExts: assetExts.filter(ext => ext !== 'svg'),
+            assetExts: [
-            sourceExts: [...sourceExts, 'svg']
+                ...assetExts.filter((ext) => ext !== 'svg'),
-        }
+            ],
+            sourceExts: [
+                ...sourceExts,
+                'svg',
+                'md'
+            ]
+        },
+        plugins: [
+            ['content-transformer', {
+                transformers: [
+                    {
+                        file: /\.md$/,
+                        format: 'string'
+                    }
+                ],
+            }],
+        ]
     };
 })();

scripts/transformer.js

@@ -0,0 +1,24 @@
+const upstreamTransformer = require('metro-react-native-babel-transformer');
+const svgTransformer = require('react-native-svg-transformer');
+
+/**
+ * Since we are using multiple types of transformers for Metro, we need to chain
+ * them into a single transform unit.
+ */
+module.exports.transform = function({ src, filename, options }) {
+    // GUARD: Pass SVGs onto react-native-svg-transformer
+    if (filename.endsWith('.svg')) {
+        return svgTransformer.transform({ src, filename, options });
+    // GUARD: Catch markdown files
+    } else if (filename.endsWith('.md')) {
+        const parsedString = src.replaceAll(/(?<!\n)\r?\n(?!\r?\n)/g, '');
+        return upstreamTransformer.transform({
+            src: `const content = ${JSON.stringify(parsedString)}; export default content;`,
+            filename,
+            options,
+        });
+    } else {
+        // Pass any remaining files onto the regular Metro transformer
+        return upstreamTransformer.transform({ src, filename, options });
+    }
+};

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;
+}