From 7ab40883318aa71fddeddcd5ba2f5a494b246f53 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <40239442+ammarahm-ed@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:52:13 +0500
Subject: [PATCH] mobile: optimize screens for very small displays (#2885)
---
apps/mobile/app/components/auth/auth-modal.js | 4 ----
apps/mobile/app/components/auth/login.js | 15 +++++-------
apps/mobile/app/components/auth/signup.js | 14 +++++------
apps/mobile/app/components/intro/index.js | 24 ++++++++++---------
apps/mobile/app/screens/settings/app-lock.js | 15 +++++++-----
apps/mobile/app/utils/size/index.js | 4 +++-
6 files changed, 37 insertions(+), 39 deletions(-)
diff --git a/apps/mobile/app/components/auth/auth-modal.js b/apps/mobile/app/components/auth/auth-modal.js
index 0f3660817..6111e0438 100644
--- a/apps/mobile/app/components/auth/auth-modal.js
+++ b/apps/mobile/app/components/auth/auth-modal.js
@@ -90,11 +90,7 @@ const AuthModal = () => {
style={{
width: "100%"
}}
- contentContainerStyle={{
- height: Platform.OS === "android" ? "100%" : "100%"
- }}
keyboardShouldPersistTaps="handled"
- bounces={false}
>
{currentAuthMode !== AuthMode.login ? (
.
*/
import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { DDS } from "../../services/device-detection";
import { eSendEvent } from "../../services/event-manager";
@@ -71,7 +71,7 @@ export const Login = ({ changeMode }) => {
}, 5000);
});
const deviceMode = useSettingStore((state) => state.deviceMode);
-
+ const { width, height } = useWindowDimensions();
useEffect(() => {
async () => {
setStep(LoginSteps.emailAuth);
@@ -95,14 +95,11 @@ export const Login = ({ changeMode }) => {
backgroundColor: colors.bg,
zIndex: 10,
width: "100%",
- alignSelf: "center",
- height: "100%",
- minHeight: "100%"
+ alignSelf: "center"
}}
>
{
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
- width: deviceMode === "mobile" ? null : "50%"
+ width: deviceMode === "mobile" ? null : "50%",
+ minHeight: height * 0.4
}}
>
{
: "99.9%",
backgroundColor: colors.bg,
alignSelf: "center",
- paddingHorizontal: 20,
- flexGrow: 1
+ paddingHorizontal: 20
}}
>
.
*/
import React, { useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
import { db } from "../../common/database";
import { DDS } from "../../services/device-detection";
import { ToastEvent } from "../../services/event-manager";
@@ -49,7 +49,7 @@ export const Signup = ({ changeMode, trial }) => {
const setUser = useUserStore((state) => state.setUser);
const setLastSynced = useUserStore((state) => state.setLastSynced);
const deviceMode = useSettingStore((state) => state.deviceMode);
-
+ const { width, height } = useWindowDimensions();
const validateInfo = () => {
if (!password.current || !email.current || !confirmPassword.current) {
ToastEvent.show({
@@ -101,13 +101,11 @@ export const Signup = ({ changeMode, trial }) => {
backgroundColor: colors.bg,
zIndex: 10,
width: "100%",
- alignSelf: "center",
- height: "100%"
+ alignSelf: "center"
}}
>
{
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
- width: deviceMode === "mobile" ? null : "50%"
+ width: deviceMode === "mobile" ? null : "50%",
+ minHeight: height * 0.4
}}
>
{
width: DDS.isTab ? "50%" : "100%",
paddingHorizontal: 20,
backgroundColor: colors.bg,
- alignSelf: "center",
- flexGrow: 0.5
+ alignSelf: "center"
}}
>
.
import React from "react";
import {
Linking,
+ ScrollView,
TouchableOpacity,
useWindowDimensions,
View
@@ -34,15 +35,16 @@ import { SIZE } from "../../utils/size";
import { Button } from "../ui/button";
import Heading from "../ui/typography/heading";
import Paragraph from "../ui/typography/paragraph";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
const Intro = ({ navigation }) => {
const colors = useThemeStore((state) => state.colors);
const isTelemetryEnabled = useSettingStore(
(state) => state.settings.telemetry
);
- const { width } = useWindowDimensions();
+ const { width, height } = useWindowDimensions();
const deviceMode = useSettingStore((state) => state.deviceMode);
-
+ const insets = useGlobalSafeAreaInsets();
const renderItem = React.useCallback(
({ item }) => (
{
{
);
return (
-
{
borderWidth: deviceMode !== "mobile" ? 1 : null,
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
- marginTop: deviceMode !== "mobile" ? 50 : null
+ marginTop: deviceMode !== "mobile" ? 50 : null,
+ paddingTop: insets.top + 10,
+ paddingBottom: insets.top + 10,
+ minHeight: height * 0.7
}}
>
{
-
+
);
};
diff --git a/apps/mobile/app/screens/settings/app-lock.js b/apps/mobile/app/screens/settings/app-lock.js
index afbf4c706..68b11ef1c 100644
--- a/apps/mobile/app/screens/settings/app-lock.js
+++ b/apps/mobile/app/screens/settings/app-lock.js
@@ -18,7 +18,7 @@ along with this program. If not, see .
*/
import React from "react";
-import { Platform, View } from "react-native";
+import { Platform, ScrollView, View } from "react-native";
import Animated, { FadeInDown, FadeOutUp } from "react-native-reanimated";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import { AuthMode } from "../../components/auth";
@@ -141,7 +141,8 @@ const AppLock = ({ route }) => {
borderColor: deviceMode !== "mobile" ? colors.border : null,
borderRadius: deviceMode !== "mobile" ? 20 : null,
marginTop: deviceMode !== "mobile" ? 50 : null,
- width: deviceMode === "mobile" ? null : "50%"
+ width: deviceMode === "mobile" ? null : "50%",
+ minHeight: 180
}}
>
{
)}
- {
onPress={async () => {
if (
!(await BiometicService.isBiometryAvailable()) &&
- !useUserStore.getState().user
+ !useUserStore.getState().user &&
+ item.value !== modes[0].value
) {
ToastEvent.show({
heading: "Biometrics not enrolled",
@@ -276,13 +278,14 @@ const AppLock = ({ route }) => {
alignSelf: "center",
...getElevationStyle(5),
marginTop: 30,
- borderRadius: 100
+ borderRadius: 100,
+ marginBottom: 30
}}
type="accent"
title="Next"
/>
)}
-
+
diff --git a/apps/mobile/app/utils/size/index.js b/apps/mobile/app/utils/size/index.js
index f99b70a49..0809d739c 100644
--- a/apps/mobile/app/utils/size/index.js
+++ b/apps/mobile/app/utils/size/index.js
@@ -42,7 +42,9 @@ const getDpi = (pd) => {
};
const correction = (size, multiplier) => {
let dSize = getDeviceSize();
- if (dSize >= 4 && dSize <= 5.3 && pixelDensity <= 3) {
+ if (dSize <= 4.5 && pixelDensity <= 3) {
+ return size * 0.85;
+ } else if (dSize <= 5.3 && pixelDensity <= 3) {
return size * 0.93;
} else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) {
if (Platform.OS === "ios") {