Android

signup 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 SignupBasicText() {
  const [showPassword, setShowPassword] = useState(false);
  const handleState = () => {
    setShowPassword((showState: boolean) => {
      return !showState;
    });
  };

  const handleGoBack = () => {
    router.back();
  };
  const handleLogin = () => {
    router.navigate("/login");
  };

  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"}>Let's get</Heading>
        <Heading size={"3xl"}>Started</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>

      <Button className={"rounded-full mt-6 h-16"} size={"xl"}>
        <ButtonText>Sign up</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>Already have an account?</Text>
        <Button onPress={handleLogin} variant={"link"}>
          <ButtonText>Log in</ButtonText>
        </Button>
      </HStack>
    </Box>
  );
}

import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { SignupBasicText } from "@/nativestack-ui/signup/free/signup-basic-text";

export function SignupBasicTextUsage() {
  return (
    <Box>
      <StatusBar style={"dark"} />
      <SignupBasicText />
    </Box>
  );
}

signup 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 { router } from "expo-router";
import { FormControl } from "@/components/ui/form-control";

export function SignupBasic() {
  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"}>
            Sign up
          </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 bg-white"}
            >
              <InputField placeholder="Enter username..." />
            </Input>
          </FormControl>

          <FormControl>
            <Input
              variant="outline"
              size="xl"
              className={"w-full rounded-2xl bg-white"}
            >
              <InputField placeholder="Enter your email..." />
            </Input>
          </FormControl>
          <FormControl>
            <Input
              variant="outline"
              size="xl"
              className={"w-full rounded-2xl bg-white"}
            >
              <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-2"
            }
          >
            <ButtonText className={"text-white data-[active=true]:text-white"}>
              Sign up
            </ButtonText>
          </Button>
          <HStack className={"items-center justify-center mt-2"}>
            <Text>Already have an account? </Text>
            <Button variant={"link"} onPress={() => router.push("/login")}>
              <ButtonText className={"text-indigo-600"}>Log in</ButtonText>
            </Button>
          </HStack>
        </VStack>
      </Box>
    </Box>
  );
}

import { Box } from "@/components/ui/box";
import { StatusBar } from "expo-status-bar";
import { SignupBasic } from "@/nativestack-ui/signup/free/signup-basic";

export function SignupBasicUsage() {
  return (
    <Box>
      <StatusBar style={"light"} />
      <SignupBasic />
    </Box>
  );
}

signup basic animated

Build products for everyone

Get all-access

import { 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 { SignupBasicAnimated } from "@/nativestack-ui/signup/pro/signup-basic-animated";

export function SignupBasicAnimatedUsage() {
  return (
    <Box>
      <StatusBar style={"light"} />
      <SignupBasicAnimated />
    </Box>
  );
}

signup linear

Build products for everyone

Get all-access

import { 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 { SignupLinear } from "@/nativestack-ui/signup/pro/signup-linear";

export function SignupLinearUsage() {
  return (
    <Box>
      <StatusBar style={"light"} />
      <SignupLinear />
    </Box>
  );
}