NativeStack UI Templates

hobby app Template

Accelerate your React Native app development with a flexible UI library. Build faster without sacrificing your vision, using modern components that seamlessly integrate into your codebase.

React

hobby app In action...

Built with modern technologies

Each template is a well-structured Expo project, giving you a codebase that’s productive and enjoyable to work in.

Easy to customize

Everything is styled with utility classes, just open the markup in your editor and change whatever you want.

Get the Code now!

Double click on file name to view the code in the editor

screens

(hobby)

_layout.tsx

index.tsx

messages.tsx

search.tsx

details

[id].tsx

index.tsx

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