Skip to content

Commit 02d0702

Browse files
gluestackadmingluestackadmin
authored
Merge pull request #20 from gluestack/patch
fix: images
2 parents e68fe8a + 2269f11 commit 02d0702

File tree

9 files changed

+56
-306
lines changed

9 files changed

+56
-306
lines changed

‎universal/apps/expo-app/app/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const index = () => {
88
return (
99
<SafeAreaView>
1010
<VStack className="m-2" space="xl">
11-
<Heading>Auth Screen</Heading>
1211
<Button
1312
onPress={() => {
1413
router.push("auth/splash-screen");

‎universal/apps/next/app/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const Page = () => {
88

99
return (
1010
<VStack className="m-2" space="xl">
11-
<Heading>Auth Screens</Heading>
1211
<Button
1312
onPress={() => {
1413
router.push("auth/splash-screen");

‎universal/packages/components/ui/image/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
"use client";
22
import React from "react";
3-
import { createImage } from "@gluestack-ui/image";
4-
import { Platform } from "react-native";
53
import UnitoolsImage from "@unitools/image";
64
import { tva } from "@gluestack-ui/nativewind-utils/tva";
75
import type { VariantProps } from "@gluestack-ui/nativewind-utils";
@@ -23,7 +21,7 @@ const imageStyle = tva({
2321
},
2422
});
2523

26-
const UIImage = createImage({ Root: UnitoolsImage });
24+
const UIImage = UnitoolsImage;
2725
cssInterop(
2826
UIImage,
2927
//@ts-ignore
@@ -39,14 +37,9 @@ const Image = ({
3937
}: { className?: any } & ImageProps) => {
4038
return (
4139
<UIImage
40+
// @ts-ignore
4241
className={imageStyle({ size, class: className })}
4342
{...props}
44-
//@ts-ignore
45-
style={
46-
Platform.OS === "web"
47-
? { height: "revert-layer", width: "revert-layer" }
48-
: undefined
49-
}
5043
/>
5144
);
5245
};

‎universal/packages/screens/auth/create-password/index.tsx‎

Lines changed: 13 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { useState } from "react";
2-
import {
3-
Avatar,
4-
AvatarFallbackText,
5-
AvatarGroup,
6-
AvatarImage,
7-
} from "@/components/ui/avatar";
82
import { SafeAreaView } from "@/components/ui/safe-area-view";
9-
103
import { Toast, ToastTitle, useToast } from "@/components/ui/toast";
114
import { HStack } from "@/components/ui/hstack";
125
import { VStack } from "@/components/ui/vstack";
@@ -30,6 +23,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
3023
import { AlertTriangle } from "lucide-react-native";
3124
import { Pressable } from "@/components/ui/pressable";
3225
import useRouter from "@unitools/router";
26+
import { Image } from "@/components/ui/image";
3327

3428
const createPasswordSchema = z.object({
3529
password: z
@@ -56,82 +50,28 @@ const createPasswordSchema = z.object({
5650

5751
type CreatePasswordSchemaType = z.infer<typeof createPasswordSchema>;
5852

59-
const ProfileAvatars = [
60-
require("@/assets/auth/image.png"),
61-
require("@/assets/auth/image1.png"),
62-
require("@/assets/auth/image2.png"),
63-
require("@/assets/auth/image3.png"),
64-
];
6553
type AuthLayoutProps = {
6654
children: React.ReactNode;
6755
};
68-
const formDetails = {
69-
heading: " gluestack-ui",
70-
badge: "Pro",
71-
subHeading: "Start making your dreams come true",
72-
description:
73-
"Create an account and discover the worlds best UI component framework.",
74-
avatarNumber: "+ 2",
75-
subDescription: "Join 10,000+ users",
76-
license: " © 2023 gluestack UI. All rights reserved.",
77-
};
56+
7857
const AuthLayout = (props: AuthLayoutProps) => {
7958
return (
8059
<SafeAreaView className="w-full h-full">
8160
<HStack className="w-full h-full bg-background-0">
8261
<VStack
83-
className="w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] justify-between p-7"
62+
className="relative w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] items-center justify-center p-7"
8463
space="md"
8564
>
86-
<VStack space="md" className="justify-center flex-1">
87-
<Heading
88-
className="md:w-[98%] text-typography-50 font-bold"
89-
size="4xl"
90-
>
91-
{formDetails.subHeading}
92-
</Heading>
93-
<Text size="md" className="text-typography-50 leading-7">
94-
{formDetails.description}
95-
</Text>
96-
<HStack className="items-center">
97-
<HStack className="justify-center items-center">
98-
{/* @ts-ignore */}
99-
<AvatarGroup>
100-
{ProfileAvatars.slice(0, 2).map((avatar, index) => {
101-
return (
102-
<Avatar className="flex lg:hidden" key={index} size="md">
103-
<AvatarImage
104-
source={avatar}
105-
className="border-2 border-primary-500"
106-
/>
107-
</Avatar>
108-
);
109-
})}
110-
{ProfileAvatars.map((avatar, index) => {
111-
return (
112-
<Avatar className="hidden lg:flex" key={index} size="md">
113-
<AvatarImage
114-
source={avatar}
115-
className="border-2 border-primary-500"
116-
/>
117-
</Avatar>
118-
);
119-
})}
120-
<Avatar className="flex lg:hidden" size="md">
121-
<AvatarFallbackText>
122-
{formDetails.avatarNumber}
123-
</AvatarFallbackText>
124-
</Avatar>
125-
</AvatarGroup>
126-
</HStack>
127-
<Text className="leading-7 text-typography-50 ml-4">
128-
{formDetails.subDescription}
129-
</Text>
130-
</HStack>
131-
</VStack>
132-
<Heading className="text-xs font-bold tracking-[0.2px] text-typography-200">
133-
{formDetails.license}
134-
</Heading>
65+
<Image
66+
source={require("@/assets/auth/radialGradient.png")}
67+
className="h-full w-full absolute inset-0 -z-10"
68+
alt="Radial Gradient"
69+
/>
70+
<Image
71+
source={require("@/assets/auth/logo.png")}
72+
className="h-40 w-40"
73+
alt="Gluestack Logo"
74+
/>
13575
</VStack>
13676

13777
<VStack className="md:items-center md:justify-center w-full md:max-w-[440px] p-9 md:gap-10 gap-16 md:m-auto md:w-1/2">

‎universal/packages/screens/auth/forgot-password/index.tsx‎

Lines changed: 13 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import {
2-
Avatar,
3-
AvatarFallbackText,
4-
AvatarGroup,
5-
AvatarImage,
6-
} from "@/components/ui/avatar";
71
import { Toast, ToastTitle, useToast } from "@/components/ui/toast";
82
import { HStack } from "@/components/ui/hstack";
93
import { VStack } from "@/components/ui/vstack";
@@ -29,89 +23,36 @@ import { zodResolver } from "@hookform/resolvers/zod";
2923
import { AlertTriangle } from "lucide-react-native";
3024
import useRouter from "@unitools/router";
3125
import { Pressable } from "@/components/ui/pressable";
26+
import { Image } from "@/components/ui/image";
3227

3328
const forgotPasswordSchema = z.object({
3429
email: z.string().min(1, "Email is required").email(),
3530
});
3631

3732
type forgotPasswordSchemaType = z.infer<typeof forgotPasswordSchema>;
3833

39-
const ProfileAvatars = [
40-
require("@/assets/auth/image.png"),
41-
require("@/assets/auth/image1.png"),
42-
require("@/assets/auth/image2.png"),
43-
require("@/assets/auth/image3.png"),
44-
];
4534
type AuthLayoutProps = {
4635
children: React.ReactNode;
4736
};
48-
const formDetails = {
49-
heading: " gluestack-ui",
50-
badge: "Pro",
51-
subHeading: "Start making your dreams come true",
52-
description:
53-
"Create an account and discover the worlds best UI component framework.",
54-
avatarNumber: "+ 2",
55-
subDescription: "Join 10,000+ users",
56-
license: " © 2023 gluestack UI. All rights reserved.",
57-
};
37+
5838
const AuthLayout = (props: AuthLayoutProps) => {
5939
return (
6040
<SafeAreaView className="w-full h-full">
6141
<HStack className="w-full h-full bg-background-0">
6242
<VStack
63-
className="w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] justify-between p-7"
43+
className="relative w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] items-center justify-center p-7"
6444
space="md"
6545
>
66-
<VStack space="md" className="justify-center flex-1">
67-
<Heading
68-
className="md:w-[98%] text-typography-50 font-bold"
69-
size="4xl"
70-
>
71-
{formDetails.subHeading}
72-
</Heading>
73-
<Text size="md" className="text-typography-50 leading-7">
74-
{formDetails.description}
75-
</Text>
76-
<HStack className="items-center">
77-
<HStack className="justify-center items-center">
78-
{/* @ts-ignore */}
79-
<AvatarGroup>
80-
{ProfileAvatars.slice(0, 2).map((avatar, index) => {
81-
return (
82-
<Avatar className="flex lg:hidden" key={index} size="md">
83-
<AvatarImage
84-
source={avatar}
85-
className="border-2 border-primary-500"
86-
/>
87-
</Avatar>
88-
);
89-
})}
90-
{ProfileAvatars.map((avatar, index) => {
91-
return (
92-
<Avatar className="hidden lg:flex" key={index} size="md">
93-
<AvatarImage
94-
source={avatar}
95-
className="border-2 border-primary-500"
96-
/>
97-
</Avatar>
98-
);
99-
})}
100-
<Avatar className="flex lg:hidden" size="md">
101-
<AvatarFallbackText>
102-
{formDetails.avatarNumber}
103-
</AvatarFallbackText>
104-
</Avatar>
105-
</AvatarGroup>
106-
</HStack>
107-
<Text className="leading-7 text-typography-50 ml-4">
108-
{formDetails.subDescription}
109-
</Text>
110-
</HStack>
111-
</VStack>
112-
<Heading className="text-xs font-bold tracking-[0.2px] text-typography-200">
113-
{formDetails.license}
114-
</Heading>
46+
<Image
47+
source={require("@/assets/auth/radialGradient.png")}
48+
className="h-full w-full absolute inset-0 -z-10"
49+
alt="Radial Gradient"
50+
/>
51+
<Image
52+
source={require("@/assets/auth/logo.png")}
53+
className="h-40 w-40"
54+
alt="Gluestack Logo"
55+
/>
11556
</VStack>
11657

11758
<VStack className="md:items-center md:justify-center w-full md:max-w-[440px] p-9 md:gap-10 gap-16 md:m-auto md:w-1/2">

0 commit comments

Comments
 (0)