mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
fixed tablet view / spelling
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
ButtonSize,
|
||||
@ -13,11 +13,18 @@ import {
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { useSignUp } from "@/hooks/firebase/useSignUp";
|
||||
import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
|
||||
import {
|
||||
Dimensions,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import KeyboardManager from "react-native-keyboard-manager";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { useRouter } from "expo-router";
|
||||
import * as Device from "expo-device";
|
||||
import { DeviceType } from "expo-device";
|
||||
|
||||
if (Platform.OS === "ios") KeyboardManager.setEnableAutoToolbar(true);
|
||||
|
||||
@ -36,6 +43,27 @@ const SignUpPage = () => {
|
||||
const emailRef = useRef<TextFieldRef>(null);
|
||||
const passwordRef = useRef<TextFieldRef>(null);
|
||||
|
||||
const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
|
||||
const [isPortrait, setIsPortrait] = useState(() => {
|
||||
const dim = Dimensions.get("screen");
|
||||
return dim.height >= dim.width;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = Dimensions.addEventListener("change", ({ screen }) => {
|
||||
setIsPortrait(screen.height >= screen.width);
|
||||
});
|
||||
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
const getTopPadding = () => {
|
||||
if (Device.deviceType === DeviceType.TABLET) {
|
||||
return isPortrait ? "50%" : "15%";
|
||||
}
|
||||
return "20%"; // non-tablet case, regardless of orientation
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleSignUp = async () => {
|
||||
@ -44,13 +72,25 @@ const SignUpPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<SafeAreaView
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: isTablet ? "center" : undefined,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<KeyboardAwareScrollView
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
enableOnAndroid
|
||||
>
|
||||
<View
|
||||
style={{ flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%" }}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: 21,
|
||||
paddingBottom: 45,
|
||||
paddingTop: isLoading ? "20%" : getTopPadding(),
|
||||
width: isLoading ? undefined : (isTablet ? 629 : undefined),
|
||||
}}
|
||||
>
|
||||
<View gap-13 width={"100%"} marginB-20>
|
||||
<Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
|
||||
@ -150,7 +190,7 @@ const SignUpPage = () => {
|
||||
size={18}
|
||||
borderRadius={3}
|
||||
value={allowFaceID}
|
||||
containerStyle={{borderRadius: 3, width: 18, height: 18}}
|
||||
containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
|
||||
onValueChange={(value) => {
|
||||
setAllowFaceID(value);
|
||||
}}
|
||||
@ -167,7 +207,7 @@ const SignUpPage = () => {
|
||||
]}
|
||||
color="#919191"
|
||||
size={18}
|
||||
containerStyle={{borderRadius: 3, width: 18, height: 18}}
|
||||
containerStyle={{ borderRadius: 3, width: 18, height: 18 }}
|
||||
borderRadius={3}
|
||||
value={acceptTerms}
|
||||
onValueChange={(value) => setAcceptTerms(value)}
|
||||
@ -191,7 +231,11 @@ const SignUpPage = () => {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View flexG style={{ minHeight: 50 }} />
|
||||
{isTablet ? (
|
||||
<View height={50} />
|
||||
) : (
|
||||
<View flexG style={{ minHeight: 50 }} />
|
||||
)}
|
||||
|
||||
<View>
|
||||
<Button
|
||||
|
Reference in New Issue
Block a user