added licenses and webview for them

added link to github page

app/navigation/BottomTabNavigator.tsx

@@ -7,6 +7,7 @@ import SearchResultsView from '@app/screens/SearchResultsView'
 import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
 import SongListView from '@app/screens/SongListView'
+import WebViewScreen from '@app/screens/WebViewScreen'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -122,6 +123,7 @@ const SearchTab = createTabStackNavigator(Search)
 type SettingsStackParamList = {
   main: undefined
   server?: { id?: string }
+  web: { uri: string }
 }
 
 type ServerScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'server'>
@@ -130,9 +132,16 @@ type ServerScreenProps = {
   route: ServerScreenRouteProp
   navigation: ServerScreenNavigationProp
 }
-
 const ServerScreen: React.FC<ServerScreenProps> = ({ route }) => <ServerView id={route.params?.id} />
 
+type WebScreenNavigationProp = NativeStackNavigationProp<SettingsStackParamList, 'web'>
+type WebScreenRouteProp = RouteProp<SettingsStackParamList, 'web'>
+type WebScreenProps = {
+  route: WebScreenRouteProp
+  navigation: WebScreenNavigationProp
+}
+const WebScreen: React.FC<WebScreenProps> = ({ route }) => <WebViewScreen uri={route.params.uri} />
+
 const SettingsStack = createNativeStackNavigator()
 
 const SettingsTab = () => {
@@ -150,6 +159,17 @@ const SettingsTab = () => {
           headerTitleStyle: styles.stackheaderTitleStyle,
         }}
       />
+      <SettingsStack.Screen
+        name="web"
+        component={WebScreen}
+        options={{
+          title: 'Web View',
+          headerStyle: styles.stackheaderStyle,
+          headerHideShadow: true,
+          headerTintColor: 'white',
+          headerTitleStyle: styles.stackheaderTitleStyle,
+        }}
+      />
     </SettingsStack.Navigator>
   )
 }

app/screens/Settings.tsx

@@ -14,7 +14,7 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
 import React, { useCallback, useState } from 'react'
-import { KeyboardTypeOptions, Modal, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native'
+import { KeyboardTypeOptions, Linking, Modal, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
@@ -281,10 +281,32 @@ const SettingsContent = React.memo(() => {
       <Button
         disabled={clearing}
         style={styles.button}
-        title="Clear image cache"
+        title="Clear Image Cache"
         onPress={clear}
         buttonStyle="hollow"
       />
+      <Header style={styles.header}>About</Header>
+      <Button
+        disabled={clearing}
+        style={styles.button}
+        title="Project Homepage"
+        onPress={() => Linking.openURL('https://github.com/austinried/subtracks')}
+        buttonStyle="hollow"
+      />
+      <Button
+        disabled={clearing}
+        style={styles.button}
+        title="Licenses (NPM)"
+        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/licenses/npm_licenses.txt' })}
+        buttonStyle="hollow"
+      />
+      <Button
+        disabled={clearing}
+        style={[styles.button, styles.licenseButton]}
+        title="Licenses (Android)"
+        onPress={() => navigation.navigate('web', { uri: 'file:///android_asset/licenses/android_licenses.html' })}
+        buttonStyle="hollow"
+      />
     </View>
   )
 })
@@ -308,9 +330,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingBottom: 40,
   },
-  text: {
-    color: 'white',
-  },
   serverActive: {
     paddingLeft: 12,
   },
@@ -320,6 +339,14 @@ const styles = StyleSheet.create({
   button: {
     marginTop: 16,
   },
+  licenseButton: {
+    marginHorizontal: 10,
+    flex: 1,
+  },
+  licenses: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   modalBackdrop: {
     flex: 1,
   },
@@ -370,6 +397,11 @@ const styles = StyleSheet.create({
     marginLeft: 15,
     // backgroundColor: 'green',
   },
+  text: {
+    color: 'white',
+    fontFamily: font.regular,
+    fontSize: 15,
+  },
 })
 
 export default Settings

app/screens/WebViewScreen.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { WebView } from 'react-native-webview'
+
+const WebViewScreen: React.FC<{
+  uri: string
+}> = ({ uri }) => {
+  return <WebView source={{ uri }} />
+}
+
+export default WebViewScreen