Update README, fix Microsoft Login issues on Pixel

- Microsoft Login will no longer have an extra dialog behind it. - Microsoft Login now uses KeyboardAvoidingView. - Tapping background will no longer work on Google Pixels, because they don't distinguish between taps on the WebView and taps on the background View. I don't have a Pixel on hand to investigate further, so this workaround works fine for now unless someone wants to dig in.
retrixe · Jan 16, 2023 · aea1312 · aea1312
1 parent 3f6a937
commit aea1312
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,19 @@
 # EnderChat
 
+[![Discord server for EnderChat and other projects](https://dcbadge.vercel.app/api/server/MFSJa9TpPS)](https://discord.gg/MFSJa9TpPS)
+
 A React Native app for Android/iOS to chat on Minecraft servers from your phone.
 
+Disclaimer: This app is NOT an official Minecraft product. It is not associated with Mojang in any way.
+
 ## Features (still being worked on)
 
 - Fully open-source with no ads! Easily report issues through GitHub and get a direct response.
 - Supports connecting to Minecraft 1.16.4 through Minecraft 1.19.2 servers. (Older versions planned.)
 - Supports all Minecraft chat features, which sometimes trip up other chat apps.
 - Send join messages and commands on connecting to a server.
 - Health change indicator and respawn on death support.
+- Tested to be performant and efficient on old phones.
 - [Many other features planned!](https://github.com/retrixe/EnderChat/issues)
 
 ## Installation

diff --git a/src/components/accounts/AddAccountDialog.tsx b/src/components/accounts/AddAccountDialog.tsx
@@ -87,86 +87,91 @@ const AddAccountDialog = ({
   }
 
   return (
-    <Dialog visible={open} onRequestClose={cancelAddAccount}>
+    <>
       {microsoftLogin && <MicrosoftLogin close={cancelAddAccount} />}
-      <Text style={styles.modalTitle}>Add Account</Text>
-      <Pressable
-        style={styles.microsoftButton}
-        android_ripple={{ color: '#aaa' }}
-        onPress={() => setMicrosoftLogin(true)}
+      <Dialog
+        visible={open && !microsoftLogin}
+        onRequestClose={cancelAddAccount}
       >
-        <Image source={require('../../assets/microsoft.png')} />
-        <Text style={styles.microsoftButtonText}>Login with Microsoft</Text>
-      </Pressable>
-      <Text style={styles.discontinued}>
-        Note: Mojang Accounts are discontinued. Please migrate to Microsoft on
-        PC to login.
-      </Text>
-      <View style={styles.divider} />
-      <Text style={styles.subheader}>Offline Mode (discouraged)</Text>
-      <TextField
-        red={userRed || invalidNewUser}
-        value={newUser}
-        onChangeText={setNewUser}
-        keyboardType='email-address'
-        placeholder={'Username' + (password !== null ? '/E-mail' : '')}
-      />
-      {/* <Pressable
-        style={styles.auth}
-        onPress={() => setPassword(p => (p === null ? '' : null))}
-      >
-        <Text style={darkMode ? styles.authTextDark : styles.authText}>
-          Offline Mode (discouraged)
-        </Text>
-        <View style={globalStyle.flexSpacer} />
-        <Switch
-          value={password === null}
-          thumbColor='#ffaaaa'
-          ios_backgroundColor='#ffaaaa'
-          trackColor={{ true: '#ff0000', false: '#ffdddd' }}
-          onValueChange={() => setPassword(p => (p === null ? '' : null))}
-        />
-      </Pressable>
-      {typeof password === 'string' && (
-        <TextField
-          red={passRed}
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-          placeholder='Password'
-        />
-      )} */}
-      {dialogError ? (
-        <Text style={styles.dialogError}>{dialogError}</Text>
-      ) : (
-        false
-      )}
-      <View style={styles.modalButtons}>
-        <View style={globalStyle.flexSpacer} />
+        <Text style={styles.modalTitle}>Add Account</Text>
         <Pressable
-          onPress={cancelAddAccount}
+          style={styles.microsoftButton}
           android_ripple={{ color: '#aaa' }}
-          style={styles.modalButton}
+          onPress={() => setMicrosoftLogin(true)}
         >
-          <Text
-            style={
-              darkMode
-                ? styles.modalButtonCancelDarkText
-                : styles.modalButtonCancelText
-            }
-          >
-            CANCEL
-          </Text>
+          <Image source={require('../../assets/microsoft.png')} />
+          <Text style={styles.microsoftButtonText}>Login with Microsoft</Text>
         </Pressable>
-        <Pressable
-          onPress={addAccount}
-          android_ripple={{ color: '#aaa' }}
-          style={styles.modalButton}
+        <Text style={styles.discontinued}>
+          Note: Mojang Accounts are discontinued. Please migrate to Microsoft on
+          PC to login.
+        </Text>
+        <View style={styles.divider} />
+        <Text style={styles.subheader}>Offline Mode (discouraged)</Text>
+        <TextField
+          red={userRed || invalidNewUser}
+          value={newUser}
+          onChangeText={setNewUser}
+          keyboardType='email-address'
+          placeholder={'Username' + (password !== null ? '/E-mail' : '')}
+        />
+        {/* <Pressable
+          style={styles.auth}
+          onPress={() => setPassword(p => (p === null ? '' : null))}
         >
-          <Text style={styles.modalButtonText}>ADD</Text>
+          <Text style={darkMode ? styles.authTextDark : styles.authText}>
+            Offline Mode (discouraged)
+          </Text>
+          <View style={globalStyle.flexSpacer} />
+          <Switch
+            value={password === null}
+            thumbColor='#ffaaaa'
+            ios_backgroundColor='#ffaaaa'
+            trackColor={{ true: '#ff0000', false: '#ffdddd' }}
+            onValueChange={() => setPassword(p => (p === null ? '' : null))}
+          />
         </Pressable>
-      </View>
-    </Dialog>
+        {typeof password === 'string' && (
+          <TextField
+            red={passRed}
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            placeholder='Password'
+          />
+        )} */}
+        {dialogError ? (
+          <Text style={styles.dialogError}>{dialogError}</Text>
+        ) : (
+          false
+        )}
+        <View style={styles.modalButtons}>
+          <View style={globalStyle.flexSpacer} />
+          <Pressable
+            onPress={cancelAddAccount}
+            android_ripple={{ color: '#aaa' }}
+            style={styles.modalButton}
+          >
+            <Text
+              style={
+                darkMode
+                  ? styles.modalButtonCancelDarkText
+                  : styles.modalButtonCancelText
+              }
+            >
+              CANCEL
+            </Text>
+          </Pressable>
+          <Pressable
+            onPress={addAccount}
+            android_ripple={{ color: '#aaa' }}
+            style={styles.modalButton}
+          >
+            <Text style={styles.modalButtonText}>ADD</Text>
+          </Pressable>
+        </View>
+      </Dialog>
+    </>
   )
 }
 

diff --git a/src/components/accounts/MicrosoftLogin.tsx b/src/components/accounts/MicrosoftLogin.tsx
@@ -1,5 +1,12 @@
 import React, { useContext, useRef, useState } from 'react'
-import { StyleSheet, Pressable, Modal, Platform } from 'react-native'
+import {
+  StyleSheet,
+  Modal,
+  Platform,
+  PlatformAndroidStatic,
+  KeyboardAvoidingView,
+  View
+} from 'react-native'
 import { WebView, WebViewNavigation } from 'react-native-webview'
 
 import useDarkMode from '../../context/useDarkMode'
@@ -59,6 +66,7 @@ const MicrosoftLogin = ({ close }: { close: () => void }) => {
   const handleNavigationStateChange = async (
     newNavState: WebViewNavigation
   ) => {
+    // LOW-TODO: Parse errors.
     if (!webview.current || !newNavState.url) return
     if (
       Platform.OS === 'android' &&
@@ -131,9 +139,25 @@ const MicrosoftLogin = ({ close }: { close: () => void }) => {
       statusBarTranslucent
       onRequestClose={onRequestClose}
     >
-      <Pressable style={styles.modalView} onPress={onRequestClose}>
-        {/* Pressable opt-out. */}
-        <Pressable style={styles.webViewContainer}>
+      <KeyboardAvoidingView
+        enabled
+        behavior='padding'
+        style={styles.modalView}
+        // https://stackoverflow.com/a/60254214
+        onStartShouldSetResponder={event => {
+          const { constants } = Platform as PlatformAndroidStatic
+          return (
+            event.nativeEvent.touches.length === 1 &&
+            // FIXME: Don't handle touch events for Google Pixel devices.
+            constants.Manufacturer !== 'Google' &&
+            constants.Brand !== 'google'
+          )
+        }}
+        onResponderRelease={event => {
+          if (event.target === event.currentTarget) onRequestClose()
+        }}
+      >
+        <View style={styles.webViewContainer}>
           <WebView
             incognito
             ref={webview}
@@ -142,20 +166,21 @@ const MicrosoftLogin = ({ close }: { close: () => void }) => {
             onNavigationStateChange={ev => {
               handleNavigationStateChange(ev).catch(console.error)
             }}
-            androidLayerType={
-              Platform.OS === 'android' && Platform.Version > 30
-                ? 'software' // FIXME: Really choppy. Seems to only happen on Google Pixel?
-                : 'hardware'
-            }
           />
-        </Pressable>
-      </Pressable>
+        </View>
+      </KeyboardAvoidingView>
     </Modal>
   )
 }
 
 const styles = StyleSheet.create({
-  modalView: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  modalView: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.6)'
+  },
   webViewContainer: { height: '80%', width: '80%' }
 })