login basic text
import React, { useState } from "react";
import { router } from "expo-router";
import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
import AntDesign from "@expo/vector-icons/AntDesign";
import { VStack } from "@/components/ui/vstack";
import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
import { EyeIcon, EyeOffIcon } from "@/components/ui/icon";
import { Heading } from "@/components/ui/heading";
import { HStack } from "@/components/ui/hstack";
import { Pressable } from "@/components/ui/pressable";
import { FormControl } from "@/components/ui/form-control";
export function LoginBasicText() {
const [showPassword, setShowPassword] = useState(false);
const handleState = () => {
setShowPassword((showState: boolean) => {
return !showState;
});
};
const handleGoBack = () => {
router.back();
};
const handleSignup = () => {
router.navigate("/signup");
};
return (
<Box className={"bg-white p-8 w-full h-full pt-16"}>
<HStack>
<Pressable onPress={handleGoBack} className={"bg-gray-50"}>
<AntDesign name="arrowleft" size={24} color="black" />
</Pressable>
</HStack>
<VStack space={"sm"} className={"mt-8"}>
<Heading size={"3xl"}>Hey,</Heading>
<Heading size={"3xl"}>Welcome</Heading>
<Heading size={"3xl"}>Back</Heading>
</VStack>
<VStack space={"xl"} className={"mt-20"}>
<FormControl>
<Input
variant="outline"
size="xl"
className={"w-full rounded-2xl bg-white h-16"}
>
<InputField type={"text"} placeholder={"Enter your email"} />
</Input>
</FormControl>
<FormControl>
<Input
variant="outline"
size="xl"
className={"w-full rounded-2xl bg-white h-16"}
>
<InputField
type={showPassword ? "text" : "password"}
placeholder={"Enter your password"}
/>
<InputSlot className="pr-3" onPress={handleState}>
<InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
</InputSlot>
</Input>
</FormControl>
</VStack>
<HStack className={"justify-end mt-2"}>
<Button variant={"link"}>
<ButtonText className={"font-normal"}>Forgot Password?</ButtonText>
</Button>
</HStack>
<Button className={"rounded-full mt-6 h-16"} size={"xl"}>
<ButtonText>Login</ButtonText>
</Button>
<Text className={"text-center text-md my-6"} style={{}}>
or continue with
</Text>
<Button variant={"outline"} className={"rounded-full h-16"} size={"lg"}>
<ButtonIcon
as={() => {
return <AntDesign name="google" size={18} color="black" />;
}}
></ButtonIcon>
<ButtonText>Google</ButtonText>
</Button>
<HStack space={"sm"} className={"items-center justify-center my-10"}>
<Text>Don’t have an account?</Text>
<Button onPress={handleSignup} variant={"link"}>
<ButtonText>Sign up</ButtonText>
</Button>
</HStack>
</Box>
);
}
import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { LoginBasicText } from "@/nativestack-ui/login/free/login-basic-text";
export function LoginBasicTextUsage() {
return (
<Box>
<StatusBar style={"dark"} />
<LoginBasicText />
</Box>
);
}
login basic
import { Box } from "@/components/ui/box";
import { Image } from "react-native";
import { Heading } from "@/components/ui/heading";
import { VStack } from "@/components/ui/vstack";
import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
import React, { useState } from "react";
import { EyeIcon, EyeOffIcon } from "@/components/ui/icon";
import { Button, ButtonText } from "@/components/ui/button";
import { Text } from "@/components/ui/text";
import { HStack } from "@/components/ui/hstack";
import { FormControl } from "@/components/ui/form-control";
export function LoginBasic() {
const [showPassword, setShowPassword] = useState(false);
const handleState = () => {
setShowPassword((showState: boolean) => {
return !showState;
});
};
return (
<Box className={"w-full h-full bg-yellow-50"}>
<Image
className={"w-full h-full absolute"}
source={{
uri: "https://3mugst1unn.ufs.sh/f/a1R77I83QUntZn8eRsd1qfXc1hPlgrCvmMzUDNji0anHBWSA",
}}
/>
<Box className={"w-full h-full flex justify-around pt-40 pb-10"}>
<Box className={"flex items-center"}>
<Heading size={"4xl"} className={"text-typography-0"}>
Login
</Heading>
</Box>
<VStack space="xl" className={"flex items-center mx-4 space-y-4"}>
<FormControl>
<Input variant="outline" size="xl" className={"w-full rounded-2xl"}>
<InputField placeholder="Enter your email..." />
</Input>
</FormControl>
<FormControl>
<Input variant="outline" size="xl" className={"w-full rounded-2xl"}>
<InputField
type={showPassword ? "text" : "password"}
placeholder={"Enter your password"}
/>
<InputSlot className="pr-3" onPress={handleState}>
<InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
</InputSlot>
</Input>
</FormControl>
<Button
style={{ height: 50 }}
size={"xl"}
action={"default"}
className={
"bg-indigo-700 data-[active=true]:opacity-90 data-[active=true]:bg-indigo-800 rounded-full w-full mt-10"
}
>
<ButtonText className={"text-white data-[active=true]:text-white"}>
Log in
</ButtonText>
</Button>
<HStack className={"items-center justify-center mt-4"}>
<Text>Don't have an account yet? </Text>
<Button variant={"link"}>
<ButtonText className={"text-indigo-600"}>Sign up</ButtonText>
</Button>
</HStack>
</VStack>
</Box>
</Box>
);
}
import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { LoginBasic } from "@/nativestack-ui/login/free/login-basic";
export function LoginBasicUsage() {
return (
<Box>
<StatusBar style={"light"} />
<LoginBasic />
</Box>
);
}
login basic animated
Build products for everyone
Get all-accessimport { Card } from '@/components/ui/card';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Button, ButtonText } from '@/components/ui/button';
import { VStack } from '@/components/ui/vstack';
export default function Price() {
return (
<Card
size='md'
variant='elevated'
className={'w-full h-full justify-center'}
>
<Heading size='2xl' className='mb-6 text-center text-amber-900'>
NativeStack UI
</Heading>
<VStack space={'3xl'} className={'mt-6'}>
<Text
size='xl'
className={
'max-w-72 mx-auto text-center font-semibold text-typography-950'
}
>
Build your app faster with the largest React native UI kit
</Text>
<Button
variant='solid'
className={
'rounded-xl px-6 h-16 bg-amber-800 data-[hover=true]:bg-amber-600 data-[active=true]:bg-amber-700 border-amber-300 data-[hover=true]:border-amber-400 data-[active=true]:border-amber-500 data-[focus-visible=true]:web:ring-indicator-info'
}
>
<ButtonText size={'lg'}>Get all-access</ButtonText>
</Button>
</VStack>
</Card>
);
}
import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { LoginBasicAnimated } from "@/nativestack-ui/login/pro/login-basic-animated";
export function LoginBasicAnimatedUsage() {
return (
<Box>
<StatusBar style={"light"} />
<LoginBasicAnimated />
</Box>
);
}
login linear
Build products for everyone
Get all-accessimport { Card } from '@/components/ui/card';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Button, ButtonText } from '@/components/ui/button';
import { VStack } from '@/components/ui/vstack';
export default function Price() {
return (
<Card
size='md'
variant='elevated'
className={'w-full h-full justify-center'}
>
<Heading size='2xl' className='mb-6 text-center text-amber-900'>
NativeStack UI
</Heading>
<VStack space={'3xl'} className={'mt-6'}>
<Text
size='xl'
className={
'max-w-72 mx-auto text-center font-semibold text-typography-950'
}
>
Build your app faster with the largest React native UI kit
</Text>
<Button
variant='solid'
className={
'rounded-xl px-6 h-16 bg-amber-800 data-[hover=true]:bg-amber-600 data-[active=true]:bg-amber-700 border-amber-300 data-[hover=true]:border-amber-400 data-[active=true]:border-amber-500 data-[focus-visible=true]:web:ring-indicator-info'
}
>
<ButtonText size={'lg'}>Get all-access</ButtonText>
</Button>
</VStack>
</Card>
);
}
import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { LoginLinear } from "@/nativestack-ui/login/pro/login-linear";
export function LoginLinearUsage() {
return (
<Box>
<StatusBar style={"light"} />
<LoginLinear />
</Box>
);
}