Add screens for opting into Sentry error tracking

src/screens/Settings/index.tsx

@@ -1,23 +1,46 @@
-import React from 'react';
-import { View, SafeAreaView, ScrollView } from 'react-native';
+import React, { useCallback } from 'react';
+import { SafeAreaView, ScrollView } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
 import useDefaultStyles from 'components/Colors';
-import { Header } from 'components/Typography';
 import { t } from '@localisation';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import ListButton from 'components/ListButton';
+import { THEME_COLOR } from 'CONSTANTS';
+import Sentry from './components/Sentry';
 
-export default function Settings() {
-    const defaultStyles = useDefaultStyles();
+export function SettingsList() {
+    const navigation = useNavigation();
+    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
+    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
+    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
 
     return (
         <ScrollView>
             <SafeAreaView>
-                <View style={{ padding: 20 }}>
-                    <Header style={defaultStyles.text}>{t('settings')}</Header>
-                    <Library />
-                    <Cache />
-                </View>
+                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
+                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             </SafeAreaView>
         </ScrollView>
     );
+}
+
+const Stack = createStackNavigator();
+
+export default function Settings() {    
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <Stack.Navigator initialRouteName="SettingList"  screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
+            <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
+            <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
+            <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
+            <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
+        </Stack.Navigator>
+    );
 }