Fix ChatScreen setting back function, online mode.

Going back via the system back button will now work.
Last online mode bug with encryption/decryption fixed.

Author: retrixe

android/app/src/main/java/com/enderchat/modules/connection/ConnectionModule.kt

@@ -92,11 +92,11 @@ class ConnectionModule(reactContext: ReactApplicationContext)
                     val secretBytes = Base64.decode(secret, Base64.DEFAULT)
                     val secretKey = SecretKeySpec(secretBytes, "AES")
                     val iv = IvParameterSpec(secretBytes)
-                    aesDecipher = Cipher.getInstance("AES/CFB8/PKCS5Padding").apply {
+                    aesDecipher = Cipher.getInstance("AES/CFB8/NoPadding").apply {
                         init(Cipher.DECRYPT_MODE, secretKey, iv)
                     }
                     val result = directlyWritePacket(0x01, packetBytes)
-                    aesCipher = Cipher.getInstance("AES/CFB8/PKCS5Padding").apply {
+                    aesCipher = Cipher.getInstance("AES/CFB8/NoPadding").apply {
                         init(Cipher.ENCRYPT_MODE, secretKey, iv)
                     }
                     promise.resolve(result)
@@ -229,7 +229,9 @@ class ConnectionModule(reactContext: ReactApplicationContext)
                             val threshold = VarInt.read(packet.data)?.value ?: 0
                             compressionThreshold = threshold
                             compressionEnabled = threshold >= 0
-                        } else if (packet.id.value == loginSuccessId && !loggedIn) loggedIn = true
+                        } else if (packet.id.value == loginSuccessId && !loggedIn) {
+                            loggedIn = true
+                        }
 
                         // Forward the packet to JavaScript.
                         val packetLengthLength =

src/App.tsx

@@ -37,10 +37,12 @@ import globalStyle from './globalStyle'
 const Stacks = createNativeStackNavigator()
 const Tabs = createMaterialTopTabNavigator() // createBottomTabNavigator()
 
-type HomeNavigationProp = NativeStackNavigationProp<
-  { Home: undefined; Chat: { serverName: string; version: number } },
-  'Home'
->
+export interface RootStackParamList {
+  [index: string]: any
+  Home: undefined
+  Chat: { serverName: string; version: number }
+}
+type HomeNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Home'>
 
 const HomeScreen = ({ navigation }: { navigation: HomeNavigationProp }) => {
   const { connection } = React.useContext(ConnectionContext)
@@ -143,6 +145,7 @@ const App = () => {
                   barStyle={darkMode ? 'light-content' : 'dark-content'}
                 />
                 <Stacks.Navigator
+                  id='StackNavigator'
                   initialRouteName='Home'
                   screenOptions={{
                     headerShown: false,
@@ -157,6 +160,7 @@ const App = () => {
                       return (params as { serverName: string }).serverName
                     }}
                   />
+                  <Stacks.Screen name='Settings' component={SettingScreen} />
                 </Stacks.Navigator>
               </NavigationContainer>
             </AccountsContext.Provider>

src/screens/chat/ChatScreen.tsx

@@ -17,6 +17,7 @@ import {
   sendMessageError
 } from './packetHandler'
 import { createConnection } from './sessionBuilder'
+import { RootStackParamList } from '../../App'
 import globalStyle from '../../globalStyle'
 import useDarkMode from '../../context/useDarkMode'
 import AccountsContext from '../../context/accountsContext'
@@ -36,13 +37,7 @@ import { protocolMap, writeVarInt } from '../../minecraft/utils'
 import { concatPacketData, PacketDataTypes } from '../../minecraft/packet'
 import TextField from '../../components/TextField'
 import Text from '../../components/Text'
-import SettingScreen from '../settings/SettingScreen'
 
-interface RootStackParamList {
-  [index: string]: any
-  Home: undefined
-  Chat: { serverName: string; version: number }
-}
 type Props = NativeStackScreenProps<RootStackParamList, 'Chat'>
 
 export type Status = 'OPENING' | 'CONNECTING' | 'CONNECTED' | 'CLOSED'
@@ -104,7 +99,6 @@ const ChatScreen = ({ navigation, route }: Props) => {
   const { sessions, setSession } = useSessionStore()
   // TODO: Show command history.
   const [, setCommandHistory] = useState<string[]>([])
-  const [settingsOpen, setSettingsOpen] = useState(false)
   const [messages, setMessages] = useState<Message[]>([])
   const [loggedIn, setLoggedIn] = useState(false)
   const [message, setMessage] = useState('')
@@ -261,31 +255,25 @@ const ChatScreen = ({ navigation, route }: Props) => {
     route.params.serverName.length > 12
       ? route.params.serverName.substring(0, 9) + '...'
       : route.params.serverName
-  const backButton = (
-    <View style={styles.backButton}>
-      <Ionicons.Button
-        name='chevron-back-sharp'
-        iconStyle={styles.backButtonIcon}
-        backgroundColor='#363636'
-        onPress={() => {
-          settingsOpen ? setSettingsOpen(false) : closeChatScreen()
-        }}
-      />
-    </View>
-  )
-  // TODO: Use stack navigation for this so the physical back button works correctly.
-  if (settingsOpen) return <SettingScreen button={backButton} />
+
   return (
     <>
       <View style={darkMode ? globalStyle.darkHeader : globalStyle.header}>
-        {backButton}
+        <View style={styles.backButton}>
+          <Ionicons.Button
+            name='chevron-back-sharp'
+            iconStyle={styles.backButtonIcon}
+            backgroundColor='#363636'
+            onPress={() => closeChatScreen()}
+          />
+        </View>
         <Text style={[globalStyle.title, styles.title]}>Chat - {title}</Text>
         <View style={globalStyle.flexSpacer} />
         <Ionicons.Button
           name='settings-outline'
           iconStyle={styles.backButtonIcon}
           backgroundColor='#363636'
-          onPress={() => setSettingsOpen(true)}
+          onPress={() => navigation.push('Settings')}
         />
       </View>
       {(!loggedIn || !connection) && (

src/screens/settings/SettingScreen.tsx

@@ -1,23 +1,39 @@
 import React, { useContext } from 'react'
-import { View, ScrollView, Linking } from 'react-native'
+import { View, ScrollView, Linking, StyleSheet } from 'react-native'
+import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import { version } from '../../../package.json'
+import { RootStackParamList } from '../../App'
 import Text from '../../components/Text'
 import Setting from '../../components/Setting'
 import globalStyle from '../../globalStyle'
 import useDarkMode from '../../context/useDarkMode'
 import SettingsContext from '../../context/settingsContext'
 import DarkModeSetting from './DarkModeSetting'
 
-const SettingScreen = (props: { button?: JSX.Element }) => {
+type StackProps = NativeStackScreenProps<RootStackParamList, 'Settings'>
+type TabProps = MaterialTopTabScreenProps<RootStackParamList, 'Settings'>
+
+const SettingScreen = ({ navigation }: StackProps | TabProps) => {
   const darkModeApp = useDarkMode()
   const { settings, setSettings } = useContext(SettingsContext)
 
   // TODO: Setting to disable autocomplete.
   return (
     <>
       <View style={darkModeApp ? globalStyle.darkHeader : globalStyle.header}>
-        {props.button ?? false}
+        {navigation.getId() === 'StackNavigator' && (
+          <View style={styles.backButton}>
+            <Ionicons.Button
+              name='chevron-back-sharp'
+              iconStyle={styles.backButtonIcon}
+              backgroundColor='#363636'
+              onPress={() => navigation.goBack()}
+            />
+          </View>
+        )}
         <Text style={globalStyle.title}>Settings</Text>
       </View>
       <ScrollView>
@@ -81,4 +97,9 @@ const SettingScreen = (props: { button?: JSX.Element }) => {
   )
 }
 
+const styles = StyleSheet.create({
+  backButton: { marginRight: 8 },
+  backButtonIcon: { marginRight: 0 }
+})
+
 export default SettingScreen