feat(app): refactor settings screen

app.config.ts

@@ -105,6 +105,11 @@ const config: ExpoConfig = {
     policy: 'appVersion',
   },
   extra: {
+    AUTH_PROXY_API_BASE_URL: process.env.AUTH_PROXY_API_BASE_URL,
+    TWITCH_CLIENT_ID: process.env.TWITCH_CLIENT_ID,
+    TWITCH_CLIENT_SECRET: process.env.TWITCH_CLIENT_SECRET,
+    NEW_RELIC_IOS_APP_TOKEN: process.env.NEW_RELIC_IOS_APP_TOKEN,
+    NEW_RELIC_ANDROID_APP_TOKEN: process.env.NEW_RELIC_ANDROID_APP_TOKEN,
     updates: {
       assetPatternsToBeBundled: ['**/*'],
     },

index.js

@@ -1,5 +1,44 @@
 import { registerRootComponent } from 'expo';
-import App from './src/App';
 import 'expo-dev-client';
+import newRelic from 'newrelic-react-native-agent';
+import { Platform } from 'react-native';
+import { version } from './package.json';
+import App from './src/App';
+
+// eslint-disable-next-line no-undef
+const IOS_TOKEN = process.env.NEW_RELIC_IOS_APP_TOKEN;
+const ANDROID_TOKEN = process.env.NEW_RELIC_ANDROID_APP_TOKEN;
+
+const appToken = Platform.OS === 'ios' ? IOS_TOKEN : ANDROID_TOKEN;
+
+const agentConfiguration = {
+  // Android Specific
+  // Optional:Enable or disable collection of event data.
+  analyticsEventEnabled: true,
+  // Optional:Enable or disable crash reporting.
+  crashReportingEnabled: true,
+  // Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
+  interactionTracingEnabled: true,
+  // Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
+  networkRequestEnabled: true,
+  // Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
+  networkErrorRequestEnabled: true,
+  // Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
+  httpRequestBodyCaptureEnabled: true,
+  // Optional:Enable or disable agent logging.
+  loggingEnabled: true,
+  // Optional:Specifies the log level. Omit this field for the default log level.
+  // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
+  logLevel: newRelic.LogLevel.INFO,
+  // iOS Specific
+  // Optional:Enable/Disable automatic instrumentation of WebViews
+  webViewInstrumentation: true,
+};
+
+agentConfiguration.loggingEnabled = true;
+agentConfiguration.logLevel = newRelic.LogLevel.VERBOSE;
+
+newRelic.startAgent(appToken, agentConfiguration);
+newRelic.setJSAppVersion(version);
 
 registerRootComponent(App);

jest.config.js

@@ -6,7 +6,7 @@ const jestConfig = {
     '^.+\\.(t|j)sx?$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|newrelic-react-native-agent)',
   ],
   moduleNameMapper: {
     '\\.svg': '<rootDir>/src/test/__mocks__/svgMock.js',

proxy.ts

@@ -36,8 +36,8 @@ const main = async () => {
         null,
         {
           params: {
-            client_id: process.env.EXPO_PUBLIC_TWITCH_CLIENT_ID,
-            client_secret: process.env.EXPO_PUBLIC_TWITCH_CLIENT_SECRET,
+            client_id: process.env.TWITCH_CLIENT_ID,
+            client_secret: process.env.TWITCH_CLIENT_SECRET,
             grant_type: 'client_credentials',
           },
           headers: {

src/App.js

@@ -1,54 +1,8 @@
 import { registerRootComponent } from 'expo';
 import * as SplashScreen from 'expo-splash-screen';
-import newRelic from 'newrelic-react-native-agent';
-import { Platform } from 'react-native';
-import { version } from '../package.json';
 import App from './App';
 import 'expo-dev-client';
 
-// eslint-disable-next-line no-undef
-if (!__DEV__) {
-  const {
-    EXPO_PUBLIC_NEW_RELIC_IOS_APP_TOKEN,
-    EXPO_PUBLIC_NEW_RELIC_ANDROID_APP_TOKEN,
-  } = process.env;
-
-  const appToken =
-    Platform.OS === 'ios'
-      ? EXPO_PUBLIC_NEW_RELIC_IOS_APP_TOKEN
-      : EXPO_PUBLIC_NEW_RELIC_ANDROID_APP_TOKEN;
-
-  const agentConfiguration = {
-    // Android Specific
-    // Optional:Enable or disable collection of event data.
-    analyticsEventEnabled: true,
-    // Optional:Enable or disable crash reporting.
-    crashReportingEnabled: true,
-    // Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
-    interactionTracingEnabled: true,
-    // Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
-    networkRequestEnabled: true,
-    // Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
-    networkErrorRequestEnabled: true,
-    // Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
-    httpRequestBodyCaptureEnabled: true,
-    // Optional:Enable or disable agent logging.
-    loggingEnabled: true,
-    // Optional:Specifies the log level. Omit this field for the default log level.
-    // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
-    logLevel: newRelic.LogLevel.INFO,
-    // iOS Specific
-    // Optional:Enable/Disable automatic instrumentation of WebViews
-    webViewInstrumentation: true,
-  };
-
-  agentConfiguration.loggingEnabled = true;
-  agentConfiguration.logLevel = newRelic.LogLevel.VERBOSE;
-
-  newRelic.startAgent(appToken, agentConfiguration);
-  newRelic.setJSAppVersion(version);
-}
-
 SplashScreen.preventAutoHideAsync();
 
 function FoamApp() {

src/App.tsx

@@ -7,7 +7,6 @@ import {
   Inter_900Black,
   useFonts,
 } from '@expo-google-fonts/inter';
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import NetInfo from '@react-native-community/netinfo';
 import * as Sentry from '@sentry/react-native';
 import {
@@ -18,8 +17,7 @@ import {
 import 'expo-dev-client';
 import { activateKeepAwakeAsync } from 'expo-keep-awake';
 import { useLayoutEffect, useState } from 'react';
-import { LogBox, ViewStyle } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { LogBox } from 'react-native';
 import {
   initialWindowMetrics,
   SafeAreaProvider,
@@ -132,31 +130,23 @@ function App(props: AppProps) {
     >
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
         <QueryClientProvider client={queryClient}>
-          <GestureHandlerRootView style={$bottomSheetContainer}>
-            <BottomSheetModalProvider>
-              <AppNavigator
-                initialState={
-                  recoveredFromError
-                    ? { index: 0, routes: [] }
-                    : initialNavigationState
-                }
-                onStateChange={onNavigationStateChange}
-              >
-                <OTAUpdates />
-                <Toast />
-              </AppNavigator>
-            </BottomSheetModalProvider>
-          </GestureHandlerRootView>
+          <AppNavigator
+            initialState={
+              recoveredFromError
+                ? { index: 0, routes: [] }
+                : initialNavigationState
+            }
+            onStateChange={onNavigationStateChange}
+          >
+            <OTAUpdates />
+            <Toast />
+          </AppNavigator>
         </QueryClientProvider>
       </SafeAreaProvider>
     </ErrorBoundary>
   );
 }
 
-const $bottomSheetContainer: ViewStyle = {
-  flex: 1,
-};
-
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 export default Sentry.wrap(App);

src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ export const Button = forwardRef<View, ButtonProps>(
     <TouchableOpacity
       ref={ref}
       {...touchableProps}
-      style={touchableProps.style}
+      style={[touchableProps.style]}
       onPress={onPress}
     >
       <View>{children}</View>

src/components/Chat/Chat.tsx

@@ -64,7 +64,7 @@
 
   const client = useTmiClient({
     options: {
-      clientId: process.env.EXPO_PUBLIC_TWITCH_CLIENT_ID,
+      clientId: process.env.TWITCH_CLIENT_ID,
     },
     channels: [channelName],
     identity: {
@@ -79,7 +79,7 @@
   const connectToChat = () => {
     const options = { channelId };
 
     client.connect().then(() => console.log('Connected to chat'));
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     client.on('message', async (_channel, tags, text, _self) => {

src/components/NavigationSectionList/NavigationSectionList.tsx

@@ -0,0 +1,116 @@
+import { ReactNode } from 'react';
+import { SectionList, SectionListData, View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+import { ButtonProps } from '../Button';
+import { Typography } from '../Typography';
+import { NavigationSectionListItemButton } from './NavigationSectionListItemButton';
+
+export interface SectionListItem {
+  title: string;
+  description: string;
+  iconName?: string;
+  picture?: string;
+  onPress: ButtonProps['onPress'];
+}
+
+interface SectionHeaderItem {
+  title?: string;
+}
+
+export type NavigationSectionListData = SectionListData<
+  SectionListItem,
+  SectionHeaderItem
+>[];
+
+export interface NavigationSectionListProps {
+  sections: NavigationSectionListData;
+  footer?: ReactNode;
+}
+
+export function NavigationSectionList({
+  sections,
+  footer,
+}: NavigationSectionListProps) {
+  const { styles } = useStyles(stylesheet);
+
+  const renderSectionHeader = ({
+    section,
+  }: {
+    section: SectionListData<SectionListItem, SectionHeaderItem>;
+  }) => {
+    if (!section.title) {
+      return null;
+    }
+
+    return (
+      <View style={styles.sectionTitleContainer}>
+        <Typography size="sm" style={styles.sectionTitle}>
+          {section.title}
+        </Typography>
+      </View>
+    );
+  };
+
+  const renderItem = ({ item }: { item: SectionListItem }) => {
+    return (
+      <View style={styles.container}>
+        <NavigationSectionListItemButton
+          title={item.title}
+          description={item.description}
+          iconName={item.iconName}
+          picture={item.picture}
+          onPress={item.onPress}
+        />
+      </View>
+    );
+  };
+
+  const renderFooter = () => {
+    if (!footer) {
+      return null;
+    }
+
+    return <View style={styles.footer}>{footer}</View>;
+  };
+
+  return (
+    <SectionList
+      showsHorizontalScrollIndicator={false}
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      sections={sections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      keyExtractor={(item, idx) => item.title + idx}
+      ListFooterComponent={renderFooter}
+    />
+  );
+}
+
+const stylesheet = createStyleSheet(theme => ({
+  container: {
+    flex: 1,
+    paddingVertical: theme.spacing.sm,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  sectionTitleContainer: {
+    padding: theme.spacing.md,
+  },
+  sectionTitle: {
+    textTransform: 'uppercase',
+  },
+  footer: {
+    padding: theme.spacing.md,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: theme.colors.border,
+    marginVertical: theme.spacing.sm,
+  },
+}));