header basic search
import { HStack } from "@/components/ui/hstack";
import {
Avatar,
AvatarFallbackText,
AvatarImage,
} from "@/components/ui/avatar";
import React from "react";
import { Box } from "@/components/ui/box";
import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
import { SearchIcon } from "@/components/ui/icon";
export default function HeaderBasicSearch() {
return (
<Box className={"bg-white px-6 py-6"}>
<HStack className={"bg-white items-center"} space={"lg"}>
<Avatar size="md">
<AvatarFallbackText>Jane Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60",
}}
/>
</Avatar>
<Input
className={"flex-1 rounded-2xl bg-gray-50 border-transparent"}
size={"lg"}
>
<InputSlot className="pl-3">
<InputIcon as={SearchIcon} />
</InputSlot>
<InputField placeholder="Search" />
</Input>
</HStack>
</Box>
);
}
import { SafeAreaView } from "react-native-safe-area-context";
import HeaderBasicSearch from "@/nativestack-ui/header/free/header-basic-search";
export default function HeaderBasicSearchUsage() {
return (
<SafeAreaView>
<HeaderBasicSearch />
</SafeAreaView>
);
}
header basic
import { HStack } from "@/components/ui/hstack";
import { Text } from "@/components/ui/text";
import {
Avatar,
AvatarFallbackText,
AvatarImage,
} from "@/components/ui/avatar";
import { VStack } from "@/components/ui/vstack";
import { Heading } from "@/components/ui/heading";
import { Button, ButtonIcon } from "@/components/ui/button";
import AntDesign from "@expo/vector-icons/AntDesign";
import React from "react";
import colors from "tailwindcss/colors";
import { Box } from "@/components/ui/box";
export default function HeaderBasic() {
return (
<Box className={"bg-white px-4 py-6"}>
<HStack className={"bg-white items-center justify-between"}>
<HStack space={"sm"}>
<Avatar size="md">
<AvatarFallbackText>Jane Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60",
}}
/>
</Avatar>
<VStack>
<Text>Welcome back,</Text>
<Heading size={"xl"}>NativeStack UI</Heading>
</VStack>
</HStack>
<Button action={"default"} className={"mr-2"}>
<ButtonIcon
className={"text-gray-300"}
as={() => {
return (
<AntDesign
name="search1"
size={24}
color={colors.gray["800"]}
/>
);
}}
></ButtonIcon>
</Button>
</HStack>
</Box>
);
}
import { SafeAreaView } from "react-native-safe-area-context";
import HeaderBasic from "@/nativestack-ui/header/free/header-basic";
export default function HeaderBasicUsage() {
return (
<SafeAreaView>
<HeaderBasic />
</SafeAreaView>
);
}
sticky header
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 { SafeAreaView } from "react-native-safe-area-context";
import { StickyHeader } from "@/nativestack-ui/header/pro/sticky-header";
import { Box } from "@/components/ui/box";
import { Heading } from "@/components/ui/heading";
import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input";
import { SearchIcon } from "@/components/ui/icon";
import React from "react";
import { Image } from "@/components/ui/image";
export default function StickyHeaderUsage() {
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
return (
<SafeAreaView className={"bg-white"}>
<StickyHeader
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
data={data}
renderItem={({ item }) => (
<Box
key={item}
className={
"p-4 border border-gray-100 mt-6 h-40 flex items-center justify-center bg-gray-50"
}
>
<Heading>{item}</Heading>
</Box>
)}
HeaderComponent={
<Box
className={
"flex-1 justify-center items-center mb-10 bg-typography-900 p-8"
}
>
<Image
source={
"https://cdn-icons-png.flaticon.com/512/18763/18763714.png"
}
alt={"App logo"}
/>
</Box>
}
StickyElementComponent={
<Box className={"px-8 bg-white py-4"}>
<Input
className={
"flex-1 rounded-full bg-gray-50 border-transparent h-16"
}
size={"lg"}
>
<InputSlot className="pl-3">
<InputIcon as={SearchIcon} />
</InputSlot>
<InputField placeholder="Search" />
</Input>
</Box>
}
/>
</SafeAreaView>
);
}