Line Settings with other headers, fix dc reasons.

Disconnect reason dialog will no longer randomly disappear.

src/App.tsx

@@ -17,7 +17,10 @@ import { createMaterialTopTabNavigator } from '@react-navigation/material-top-ta
 
 import useAsyncStorage from './helpers/useAsyncStorage'
 import useJsonAsyncStorage from './helpers/useJsonAsyncStorage'
-import ConnectionContext, { Connection } from './context/connectionContext'
+import ConnectionContext, {
+  Connection,
+  DisconnectReason as Disconnect
+} from './context/connectionContext'
 import AccountsContext, { Accounts } from './context/accountsContext'
 import SettingsContext, { Settings } from './context/settingsContext'
 import ServersContext, { Servers } from './context/serversContext'
@@ -80,6 +83,7 @@ const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
 const App = () => {
   const colorScheme = useColorScheme()
   const [connection, setConnection] = React.useState<Connection | undefined>()
+  const [disconnect, setDisconnect] = React.useState<Disconnect | undefined>()
 
   const [settings, setSettings] = useJsonAsyncStorage<Settings>('@settings', {
     // TODO: Better defaults and settings e.g. join message is 140 chars (bad for <1.11).
@@ -120,7 +124,14 @@ const App = () => {
 
   return (
     <SafeAreaView style={globalStyle.flexSpacer}>
-      <ConnectionContext.Provider value={{ connection, setConnection }}>
+      <ConnectionContext.Provider
+        value={{
+          connection,
+          setConnection,
+          disconnectReason: disconnect,
+          setDisconnectReason: setDisconnect
+        }}
+      >
         <SettingsContext.Provider value={{ settings, setSettings }}>
           <ServersContext.Provider value={{ servers, setServers }}>
             <AccountsContext.Provider value={{ accounts, setAccounts }}>

src/context/connectionContext.ts

@@ -1,19 +1,28 @@
 // Consider using Recoil instead of Context?
 import React from 'react'
+import { MinecraftChat } from '../minecraft/chatToJsx'
 import { ServerConnection } from '../minecraft/connection'
 
 export interface Connection {
   connection: ServerConnection
   serverName: string
 }
 
+export interface DisconnectReason {
+  server: string
+  reason: MinecraftChat
+}
+
 export interface ConnectionContext {
   connection?: Connection
   setConnection: (newConnection?: Connection) => void
+  disconnectReason?: DisconnectReason
+  setDisconnectReason: (newDisconnectReason?: DisconnectReason) => void
 }
 
 const connectionContext = React.createContext<ConnectionContext>({
-  setConnection: () => {}
+  setConnection: () => {},
+  setDisconnectReason: () => {}
 })
 
 export default connectionContext

src/globalStyle.ts

@@ -5,7 +5,8 @@ export default StyleSheet.create({
   iconStyle: { marginRight: 5 },
   title: {
     fontSize: 24,
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    height: 37.5
   },
   horizontalLine: {
     backgroundColor: '#666',

src/screens/ChatScreen.tsx

@@ -126,7 +126,7 @@ const ChatScreen = ({ navigation }: { navigation: ChatNavigationProp }) => {
             .slice(chatVarIntLength, chatVarIntLength + chatLength)
             .toString('utf8')
           const position = packet.data.readInt8(chatVarIntLength + chatLength)
-          // LOW-TODO: Support position 2 and sender.
+          // TODO: Support position 2 and sender.
           if (position === 0 || position === 1) addMessage(JSON.parse(chatJson))
         } catch (e) {
           createErrorHandler(colorMap.dark_red, addMessage, parseMessageErr)(e)
@@ -183,7 +183,7 @@ const ChatScreen = ({ navigation }: { navigation: ChatNavigationProp }) => {
       />
     </View>
   )
-  // LOW-TODO: Use stack navigation for this so the physical back button works correctly.
+  // TODO: Use stack navigation for this so the physical back button works correctly.
   if (settingsOpen) return <SettingScreen button={backButton} />
   return (
     <>

src/screens/ServerScreen.tsx

@@ -31,7 +31,6 @@ import { resolveHostname, protocolMap } from '../minecraft/utils'
 import initiateConnection from '../minecraft/connection'
 import {
   ChatToJsx,
-  MinecraftChat,
   lightColorMap,
   mojangColorMap
 } from '../minecraft/chatToJsx'
@@ -52,7 +51,12 @@ const ServerScreen = () => {
   const darkMode = useDarkMode()
   const { servers, setServers } = useContext(ServersContext)
   const { accounts } = useContext(AccountsContext)
-  const { connection, setConnection } = useContext(ConnectionContext)
+  const {
+    connection,
+    setConnection,
+    disconnectReason,
+    setDisconnectReason
+  } = useContext(ConnectionContext)
   const initiatingConnection = useRef(false)
 
   const [ipAddr, setIpAddr] = useState('')
@@ -68,10 +72,6 @@ const ServerScreen = () => {
   const [pingResponses, setPingResponses] = useState<{
     [ip: string]: LegacyPing | Ping | null
   }>({})
-  const [disconnectDialog, setDisconnectDialog] = useState<{
-    server: string
-    reason: MinecraftChat
-  } | null>(null)
 
   useEffect(() => {
     if (Object.keys(pingResponses).length > 0) {
@@ -139,7 +139,7 @@ const ServerScreen = () => {
       const activeAccount = Object.keys(accounts).find(e => accounts[e].active)
       if (!activeAccount) {
         initiatingConnection.current = false
-        return setDisconnectDialog({
+        return setDisconnectReason({
           server,
           reason:
             'No active account selected! Open the Accounts tab and add an account.'
@@ -156,7 +156,7 @@ const ServerScreen = () => {
       }
       if (protocolVersion < 754) {
         initiatingConnection.current = false
-        return setDisconnectDialog({
+        return setDisconnectReason({
           server,
           reason: 'EnderChat only supports 1.16.4 and newer for now.'
         })
@@ -174,8 +174,7 @@ const ServerScreen = () => {
       const onCloseOrError = () => {
         setConnection(undefined)
         if (newConn.disconnectReason) {
-          // TODO: This doesn't always hit correctly, since screen may be unrendered.
-          setDisconnectDialog({
+          setDisconnectReason({
             server,
             reason: JSON.parse(newConn.disconnectReason)
           })
@@ -213,21 +212,21 @@ const ServerScreen = () => {
           </Text>
         </Pressable>
       </Dialog>
-      {disconnectDialog && (
-        <Dialog visible onRequestClose={() => setDisconnectDialog(null)}>
+      {disconnectReason && (
+        <Dialog visible onRequestClose={() => setDisconnectReason()}>
           <Text style={dialogStyles.modalTitle}>
-            Disconnected from {disconnectDialog.server}
+            Disconnected from {disconnectReason.server}
           </Text>
           <ChatToJsx
-            chat={disconnectDialog.reason}
+            chat={disconnectReason.reason}
             component={Text}
             colorMap={darkMode ? mojangColorMap : lightColorMap}
             componentProps={{ style: styles.serverDescription }}
           />
           <View style={dialogStyles.modalButtons}>
             <View style={globalStyle.flexSpacer} />
             <Pressable
-              onPress={() => setDisconnectDialog(null)}
+              onPress={() => setDisconnectReason()}
               android_ripple={{ color: '#aaa' }}
               style={dialogStyles.modalButton}
             >