JSON generated settings

App.tsx

@@ -17,6 +17,13 @@ import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
 import Main from './src/navigators/Main';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
+declare global {
+  interface ObjectConstructor {
+    typedKeys<T>(obj: T): Array<keyof T>;
+  }
+}
+Object.typedKeys = Object.keys as any;
+
 Notifications.setNotificationHandler({
   handleNotification: async () => {
     return {

package.json

@@ -23,7 +23,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/stack": "^6.0.11",
     "@shopify/flash-list": "^1.4.3",
-    "cheerio": "^1.0.0-rc.12",
+    "cheerio": "1.0.0-rc.12",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "expo": "^49.0.23",
@@ -56,7 +56,7 @@
     "react-native-mmkv": "^2.11.0",
     "react-native-pager-view": "6.2.0",
     "react-native-paper": "^5.12.0",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "3.15.0",
     "react-native-saf-x": "^2.2.3",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "^3.22.0",

src/components/List/List.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { List as PaperList, Divider as PaperDivider } from 'react-native-paper';
@@ -15,8 +15,16 @@ interface ListItemProps {
   right?: string;
 }
 
-const Section = ({ children }: { children: ReactNode }) => (
-  <PaperList.Section style={styles.listSection}>{children}</PaperList.Section>
+const Section = ({
+  children,
+  style,
+}: {
+  style?: ViewStyle;
+  children: ReactNode;
+}) => (
+  <PaperList.Section style={[styles.listSection, style]}>
+    {children}
+  </PaperList.Section>
 );
 
 const SubHeader = ({
@@ -106,7 +114,7 @@ const Icon = ({ icon, theme }: { icon: string; theme: ThemeColors }) => (
 
 interface ColorItemProps {
   title: string;
-  description: string;
+  description?: string;
   theme: ThemeColors;
   onPress: () => void;
 }
@@ -124,7 +132,9 @@ const ColorItem = ({ title, description, theme, onPress }: ColorItemProps) => (
   >
     <View>
       <Text style={{ color: theme.onSurface, fontSize: 16 }}>{title}</Text>
-      <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
+      {description ? (
+        <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
+      ) : null}
     </View>
     <View
       style={{

src/components/NovelCover.tsx

@@ -72,15 +72,15 @@ function NovelCover<TNovel extends CoverItemLibrary | CoverItemPlugin>({
     displayMode = DisplayModes.Comfortable,
     showDownloadBadges = true,
     showUnreadBadges = true,
-    novelsPerRow = 3,
+    novelsPerRow = 2,
   } = useLibrarySettings();
 
   const window = useWindowDimensions();
 
   const orientation = useDeviceOrientation();
 
   const numColumns = useMemo(
-    () => (orientation === 'landscape' ? 6 : novelsPerRow),
+    () => (orientation === 'landscape' ? 6 : novelsPerRow + 1),
     [orientation, novelsPerRow],
   );
 

src/components/NovelList.tsx

@@ -24,7 +24,7 @@ interface NovelListProps extends FlatListProps<LibraryNovelInfo | NovelItem> {
 }
 
 const NovelList: React.FC<NovelListProps> = props => {
-  const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
+  const { displayMode = DisplayModes.Comfortable, novelsPerRow = 2 } =
     useLibrarySettings();
   const orientation = useDeviceOrientation();
 
@@ -38,7 +38,7 @@ const NovelList: React.FC<NovelListProps> = props => {
     if (orientation === 'landscape') {
       return 6;
     } else {
-      return novelsPerRow;
+      return novelsPerRow + 1;
     }
   }, [isListView, orientation, novelsPerRow]);
 

src/components/Switch/SwitchItem.tsx

@@ -18,6 +18,8 @@ interface SwitchItemProps {
   theme: ThemeColors;
   size?: number;
   style?: StyleProp<ViewStyle>;
+  endOfLine?: () => React.ReactNode;
+  quickSettingsItem?: boolean;
 }
 
 const SwitchItem: React.FC<SwitchItemProps> = ({
@@ -28,15 +30,24 @@ const SwitchItem: React.FC<SwitchItemProps> = ({
   value,
   size,
   style,
+  endOfLine,
+  quickSettingsItem,
 }) => (
   <Pressable
     android_ripple={{ color: theme.rippleColor }}
-    style={[styles.container, style]}
     onPress={onPress}
+    style={[styles.container, style]}
   >
     <View style={styles.labelContainer}>
-      <Text style={[{ color: theme.onSurface }, styles.label]}>{label}</Text>
-      {description ? (
+      <Text
+        style={{
+          color: quickSettingsItem ? theme.onSurfaceVariant : theme.onSurface,
+          fontSize: quickSettingsItem ? 14 : 16,
+        }}
+      >
+        {label}
+      </Text>
+      {description && !quickSettingsItem ? (
         <Text style={[styles.description, { color: theme.onSurfaceVariant }]}>
           {description}
         </Text>
@@ -49,6 +60,7 @@ const SwitchItem: React.FC<SwitchItemProps> = ({
       style={styles.switch}
       size={size}
     />
+    {endOfLine ? endOfLine() : null}
   </Pressable>
 );
 
@@ -57,22 +69,17 @@ export default SwitchItem;
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 12,
     alignItems: 'center',
+    paddingVertical: 12,
   },
   labelContainer: {
     flex: 1,
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 16,
+    flexDirection: 'column',
   },
   description: {
     fontSize: 12,
-    lineHeight: 20,
   },
   switch: {
-    marginLeft: 8,
+    alignSelf: 'center',
   },
 });

src/hooks/common/useKeyboardHeight.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEvent } from 'react-native';
+
+export const useKeyboardHeight = () => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    function onKeyboardDidShow(e: KeyboardEvent) {
+      setKeyboardHeight(e.endCoordinates.height);
+    }
+
+    function onKeyboardDidHide() {
+      setKeyboardHeight(0);
+    }
+
+    const showSubscription = Keyboard.addListener(
+      'keyboardDidShow',
+      onKeyboardDidShow,
+    );
+    const hideSubscription = Keyboard.addListener(
+      'keyboardDidHide',
+      onKeyboardDidHide,
+    );
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+};

src/navigators/MoreStack.tsx

@@ -5,37 +5,30 @@ import { createStackNavigator } from '@react-navigation/stack';
 // Screens
 import About from '../screens/more/About';
 import Settings from '../screens/settings/SettingsScreen';
-import TrackerSettings from '../screens/settings/SettingsTrackerScreen';
-import ReaderSettings from '../screens/settings/SettingsReaderScreen/SettingsReaderScreen';
 import BackupSettings from '../screens/settings/SettingsBackupScreen';
 import AdvancedSettings from '../screens/settings/SettingsAdvancedScreen';
-import GeneralSettings from '../screens/settings/SettingsGeneralScreen/SettingsGeneralScreen';
+import SettingsSubScreen from '../screens/settings/settingsScreens/SettingsSubScreen';
 import TaskQueue from '../screens/more/TaskQueueScreen';
 import Downloads from '../screens/more/DownloadsScreen';
-import AppearanceSettings from '../screens/settings/SettingsAppearanceScreen';
+
 import CategoriesScreen from '@screens/Categories/CategoriesScreen';
-import RespositorySettings from '@screens/settings/SettingsRepositoryScreen/SettingsRepositoryScreen';
-// import LibrarySettings from '@screens/settings/SettingsLibraryScreen/SettingsLibraryScreen';
 import StatsScreen from '@screens/StatsScreen/StatsScreen';
 import { MoreStackParamList, SettingsStackParamList } from './types';
+import ReaderSettingsSubScreen from '@screens/settings/settingsScreens/ReaderSettingsSubScreen';
 
 const Stack = createStackNavigator<
-  MoreStackParamList & SettingsStackParamList
+  SettingsStackParamList & MoreStackParamList
 >();
 
 const stackNavigatorConfig = { headerShown: false };
 
 const SettingsStack = () => (
   <Stack.Navigator screenOptions={stackNavigatorConfig}>
     <Stack.Screen name="Settings" component={Settings} />
-    <Stack.Screen name="GeneralSettings" component={GeneralSettings} />
-    <Stack.Screen name="ReaderSettings" component={ReaderSettings} />
-    <Stack.Screen name="TrackerSettings" component={TrackerSettings} />
+    <Stack.Screen name="SubScreen" component={SettingsSubScreen} />
+    <Stack.Screen name="ReaderSettings" component={ReaderSettingsSubScreen} />
     <Stack.Screen name="BackupSettings" component={BackupSettings} />
-    <Stack.Screen name="AppearanceSettings" component={AppearanceSettings} />
     <Stack.Screen name="AdvancedSettings" component={AdvancedSettings} />
-    <Stack.Screen name="RespositorySettings" component={RespositorySettings} />
-    {/* <Stack.Screen name="LibrarySettings" component={LibrarySettings} /> */}
   </Stack.Navigator>
 );
 

src/navigators/types/index.ts

@@ -4,6 +4,7 @@ import {
   NavigatorScreenParams,
 } from '@react-navigation/native';
 import { StackScreenProps } from '@react-navigation/stack';
+import { Settings } from '@screens/settings/Settings.d';
 import { MaterialBottomTabScreenProps } from 'react-native-paper';
 
 export type RootStackParamList = {
@@ -71,16 +72,19 @@ export type MoreStackParamList = {
   Statistics: undefined;
 };
 
+type SettingsProps = {
+  settingsSource: keyof Settings;
+};
+
 export type SettingsStackParamList = {
   Settings: undefined;
-  GeneralSettings: undefined;
-  ReaderSettings: undefined;
-  TrackerSettings: undefined;
-  BackupSettings: undefined;
-  AppearanceSettings: undefined;
-  AdvancedSettings: undefined;
-  LibrarySettings: undefined;
-  RespositorySettings: undefined;
+  SubScreen: SettingsProps;
+  ReaderSettings: SettingsProps;
+  TrackerSettings: SettingsProps;
+  BackupSettings: SettingsProps;
+  AdvancedSettings: SettingsProps;
+  LibrarySettings: SettingsProps;
+  RespositorySettings: SettingsProps;
 };
 
 export type NovelScreenProps = StackScreenProps<RootStackParamList, 'Novel'>;
@@ -138,10 +142,6 @@ export type SettingsScreenProps = CompositeScreenProps<
   StackScreenProps<SettingsStackParamList, 'Settings'>,
   StackScreenProps<MoreStackParamList, 'SettingsStack'>
 >;
-export type AppearanceSettingsScreenProps = StackScreenProps<
-  SettingsStackParamList,
-  'AppearanceSettings'
->;
 export type TrackerSettingsScreenProps = StackScreenProps<
   SettingsStackParamList,
   'TrackerSettings'

src/screens/browse/components/BrowseTabs.tsx

@@ -427,7 +427,8 @@ export const AvailableTab = memo(({ searchText, theme }: AvailableTabProps) => {
                   navigation.navigate('MoreStack', {
                     screen: 'SettingsStack',
                     params: {
-                      screen: 'RespositorySettings',
+                      screen: 'SubScreen',
+                      params: { settingsSource: 'repo' },
                     },
                   }),
               },

src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx

@@ -18,7 +18,7 @@ const SourceScreenSkeletonLoading: React.FC<Props> = ({
 }) => {
   const [highlightColor, backgroundColor] = getLoadingColors(theme);
 
-  const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } =
+  const { displayMode = DisplayModes.Comfortable, novelsPerRow = 2 } =
     useLibrarySettings();
 
   const window = useWindowDimensions();
@@ -27,7 +27,7 @@ const SourceScreenSkeletonLoading: React.FC<Props> = ({
   const orientation = useDeviceOrientation();
 
   const numColumns = useMemo(
-    () => (orientation === 'landscape' ? 6 : novelsPerRow),
+    () => (orientation === 'landscape' ? 6 : novelsPerRow + 1),
     [orientation, novelsPerRow],
   );