Android

interest card

import { Pressable } from "@/components/ui/pressable";
import { VStack } from "@/components/ui/vstack";
import { Box } from "@/components/ui/box";
import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
import { Heading } from "@/components/ui/heading";
import { StyleProp, ViewStyle } from "react-native";
import colors from "tailwindcss/colors";

type Interest = {
  title: string;
  icon: string;
  activeColor: string;
};

export function InterestCard({
  isSelected = false,
  onPress,
  style,
  interest,
}: {
  isSelected?: boolean;
  onPress?: VoidFunction;
  style?: StyleProp<ViewStyle>;
  interest: Interest;
}) {
  return (
    <Pressable
      className={`${isSelected ? "bg-emerald-100" : "bg-gray-50"} rounded-3xl px-4 py-6`}
      onPress={onPress}
      style={[
        style,
        {
          backgroundColor: isSelected
            ? interest.activeColor
            : colors.gray["50"],
        },
      ]}
    >
      <VStack space={"lg"} className={"items-center"}>
        <Box className={"pt-5"}>
          <FontAwesome6 name={interest.icon} size={24} />
        </Box>
        <Heading size={"lg"} className={"font-semibold"}>
          {interest.title}
        </Heading>
      </VStack>
    </Pressable>
  );
}

import { Box } from "@/components/ui/box";
import { Heading } from "@/components/ui/heading";
import { FlatList } from "react-native";
import colors from "tailwindcss/colors";
import { InterestCard } from "@/nativestack-ui/cards/free/interest-card";
import { HStack } from "@/components/ui/hstack";
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
import AntDesign from "@expo/vector-icons/AntDesign";
import React, { useState } from "react";

const interests = [
  {
    title: "Cars",
    icon: "car",
    activeColor: colors.amber["50"],
  },
  {
    title: "Music",
    icon: "music",
    activeColor: colors.red["50"],
  },
  {
    title: "Running",
    icon: "person-running",
    activeColor: colors.sky["50"],
  },
  {
    title: "Traveling",
    icon: "plane-departure",
    activeColor: colors.blue["50"],
  },
  {
    title: "Reading",
    icon: "book-open-reader",
    activeColor: colors.emerald["50"],
  },
  {
    title: "Swimming",
    icon: "person-swimming",
    activeColor: colors.fuchsia["50"],
  },
  {
    title: "Cycling",
    icon: "bicycle",
    activeColor: colors.indigo["50"],
  },
  {
    title: "Writing",
    icon: "pencil",
    activeColor: colors.lime["50"],
  },
  {
    title: "Art",
    icon: "paintbrush",
    activeColor: colors.orange["50"],
  },
  {
    title: "Animals",
    icon: "dog",
    activeColor: colors.teal["50"],
  },
  {
    title: "Cooking",
    icon: "bowl-food",
    activeColor: colors.violet["50"],
  },
  {
    title: "Photo",
    icon: "camera-retro",
    activeColor: colors.rose["50"],
  },
];

export function InterestCardUsage() {
  const [selectedInterests, setSelectedInterests] = useState<string[]>([]);

  return (
    <Box className={"px-6 py-16 bg-white flex-1"}>
      <Heading size={"3xl"} className={"max-w-64 mb-8"}>
        Select hobbies & interests.
      </Heading>
      <FlatList
        contentContainerStyle={{ gap: 10 }}
        columnWrapperStyle={{ gap: 10 }}
        numColumns={3}
        data={interests}
        renderItem={({ item }) => {
          return (
            <InterestCard
              interest={item}
              style={{
                flex: 1 / 3,
              }}
              isSelected={selectedInterests.includes(item.title)}
              onPress={() => {
                const newInterest = [...selectedInterests];
                newInterest.push(item.title);
                setSelectedInterests([...new Set(newInterest)]);
              }}
            />
          );
        }}
      />
      <HStack className={"flex-1 justify-center"}>
        <Button className={"rounded-3xl h-20"}>
          <ButtonText className={"text-2xl"}>Start</ButtonText>
          <ButtonIcon
            className={"bg-white"}
            as={() => {
              return (
                <AntDesign name="arrowright" size={28} color={colors.white} />
              );
            }}
          />
        </Button>
      </HStack>
    </Box>
  );
}

class card

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>
  );
}

course card

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>
  );
}

furniture card

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>
  );
}

product card

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>
  );
}

progress card

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>
  );
}

sherpa card

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>
  );
}

sport card

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>
  );
}