Add screens for opting into Sentry error tracking

src/screens/Settings/components/Cache.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { SubHeader } from 'components/Typography';
 import { useDispatch } from 'react-redux';
 import music from 'store/music';
 import { t } from '@localisation';
@@ -12,6 +11,10 @@ const ClearCache = styled(Button)`
     margin-top: 16px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function CacheSettings() {
     const dispatch = useDispatch();
     const handleClearCache = useCallback(() => {
@@ -23,10 +26,9 @@ export default function CacheSettings() {
     }, [dispatch]);
 
     return (
-        <>
-            <SubHeader>{t('setting-cache')}</SubHeader>
+        <Container>
             <Text>{t('setting-cache-description')}</Text>
             <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Library.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback } from 'react';
-import { SubHeader } from 'components/Typography';
 import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
@@ -19,6 +18,10 @@ const Input = styled.TextInput`
     border-radius: 5px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function LibrarySettings() {
     const defaultStyles = useDefaultStyles();
     const { jellyfin } = useTypedSelector(state => state.settings);
@@ -26,8 +29,7 @@ export default function LibrarySettings() {
     const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
 
     return (
-        <>
-            <SubHeader>{t('jellyfin-library')}</SubHeader>
+        <Container>
             <InputContainer>
                 <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
@@ -41,6 +43,6 @@ export default function LibrarySettings() {
                 <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Sentry.tsx

@@ -0,0 +1,124 @@
+import Text from 'components/Text';
+import React, { useEffect, useState } from 'react';
+import { Switch } from 'react-native-gesture-handler';
+import styled, { css } from 'styled-components/native';
+import { isSentryEnabled, setSentryStatus } from 'utility/Sentry';
+import Accordion from 'react-native-collapsible/Accordion';
+import ChevronIcon from 'assets/chevron-right.svg';
+import { THEME_COLOR } from 'CONSTANTS';
+import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
+import { t } from '@localisation';
+
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
+const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+const HeaderContainer = styled.View<{ isActive?: boolean }>`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0 4px 0;
+
+    ${props => props.isActive && css`
+        background-color: ${THEME_COLOR};
+    `}
+`;
+
+const HeaderText = styled(Text)`
+    font-size: 16px;
+`;
+
+const ContentContainer = styled.View`
+    margin-top: 8px;
+`;
+
+const Label = styled(Text)`
+    font-size: 16px;
+`;
+
+const Chevron = styled(ChevronIcon)<{ isActive?: boolean }>`
+    width: 14px;
+    height: 14px;
+    transform: rotate(-90deg);
+
+    ${props => props.isActive && css`
+        transform: rotate(90deg);
+    `}
+`;
+
+type Question = { title: string, content: string };
+
+const questions: Question[] = [
+    {
+        title: t('why-use-tracking'),
+        content: t('why-use-tracking-description')
+    },
+    {
+        title: t('what-data-is-gathered'),
+        content: t('what-data-is-gathered-description')
+    },
+    {
+        title: t('where-is-data-stored'),
+        content: t('where-is-data-stored-description')
+    }
+];
+
+function renderHeader(question: Question, index: number, isActive: boolean) {
+    return (
+        <HeaderContainer>
+            <HeaderText>{question.title}</HeaderText>
+            <DefaultStylesProvider>
+                {styles =>
+                    <Chevron fill={styles.text.color} isActive={isActive} />
+                }
+            </DefaultStylesProvider>
+        </HeaderContainer>
+    );
+}
+
+function renderContent(question: Question) {
+    return (
+        <ContentContainer>
+            <Text>{question.content}</Text>
+        </ContentContainer>
+    );
+}
+
+export default function Sentry() {
+    const defaultStyles = useDefaultStyles();
+    const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
+    const [activeSections, setActiveSections] = useState<number[]>([]);
+
+    const toggleSwitch = () => setReporting(previousState => !previousState);
+
+    useEffect(() => {
+        setSentryStatus(isReportingEnabled);
+    });
+
+    return (
+        <Container>
+            <Text>{t('error-reporting-description')}</Text>
+            <Text />
+            <Text>{t('error-reporting-rationale')}</Text>
+            <SwitchContainer>
+                <Label>{t('error-reporting')}</Label>
+                <Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
+            </SwitchContainer>
+            <Accordion
+                sections={questions}
+                renderHeader={renderHeader}
+                renderContent={renderContent}
+                activeSections={activeSections}
+                onChange={setActiveSections}
+                underlayColor={defaultStyles.activeBackground.backgroundColor}
+            />
+        </Container>
+    );
+}