tabs floating icon scale hidding text
import Animated, {
interpolate,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import React, { useEffect } from "react";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Box } from "@/components/ui/box";
import { Pressable } from "@/components/ui/pressable";
const TabBarButton = (props: {
isFocused: boolean;
label: string;
color: string;
onPress: () => void;
tabBarIcon?: (props: {
focused: boolean;
color: string;
size: number;
}) => React.ReactNode;
}) => {
const { isFocused, label, color } = props;
const scale = useSharedValue(0);
useEffect(() => {
scale.value = withSpring(isFocused ? 1 : 0, { duration: 350 });
}, [scale, isFocused]);
const animatedIconStyle = useAnimatedStyle(() => {
const scaleValue = interpolate(scale.value, [0, 1], [1, 1.4]);
const top = interpolate(scale.value, [0, 1], [0, 8]);
return {
transform: [{ scale: scaleValue }],
top,
};
});
const animatedTextStyle = useAnimatedStyle(() => {
const opacity = interpolate(scale.value, [0, 1], [1, 0]);
return {
opacity,
};
});
return (
<Pressable
{...props}
className="flex-1 gap-2 items-center justify-center w-full h-full"
>
<Animated.View style={[animatedIconStyle]}>
{props.tabBarIcon?.({ focused: isFocused, color: color, size: 1 })}
</Animated.View>
<Animated.Text
style={[
{
color,
fontSize: 11,
},
animatedTextStyle,
]}
>
{label}
</Animated.Text>
</Pressable>
);
};
export const TabBar = ({
state,
descriptors,
navigation,
}: BottomTabBarProps) => {
return (
<Box
className={
"absolute bottom-3 flex flex-row items-center justify-between rounded-[25] mx-[20] py-[8] bg-white"
}
style={{
borderCurve: "continuous",
shadowColor: "black",
shadowOffset: { width: 0, height: 10 },
shadowRadius: 10,
shadowOpacity: 0.1,
}}
>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label = options.title !== undefined ? options.title : route.name;
const isFocused = state.index === index;
const onPress = () => {
if (isFocused) {
return;
}
navigation.navigate(route.name, route.params);
};
const color =
(isFocused
? options.tabBarActiveTintColor
: options.tabBarInactiveTintColor) || "#ddd";
return (
<TabBarButton
key={route.name}
onPress={onPress}
isFocused={isFocused}
tabBarIcon={options.tabBarIcon}
color={color}
label={label}
/>
);
})}
</Box>
);
};
import React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/free/tabs-floating-icon-scale-hidding-text";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <TabBar {...props} />}
screenOptions={{
tabBarActiveTintColor: "#5852a5",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}
tabs floating icon scale showing text
import Animated, {
interpolate,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import React, { useEffect } from "react";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Box } from "@/components/ui/box";
import { Pressable } from "@/components/ui/pressable";
import { VStack } from "@/components/ui/vstack";
const TabBarButton = (props: {
isFocused: boolean;
label: string;
color: string;
onPress: () => void;
tabBarIcon?: (props: {
focused: boolean;
color: string;
size: number;
}) => React.ReactNode;
}) => {
const { isFocused, label, color } = props;
const scale = useSharedValue(0);
useEffect(() => {
scale.value = withSpring(!isFocused ? 1 : 0, { duration: 350 });
}, [scale, isFocused]);
const animatedIconStyle = useAnimatedStyle(() => {
const scaleValue = interpolate(scale.value, [0, 1], [1, 1]);
const top = interpolate(scale.value, [0, 1], [0, 8]);
return {
transform: [{ scale: scaleValue }],
top,
};
});
const animatedTextStyle = useAnimatedStyle(() => {
const opacity = interpolate(scale.value, [0, 1], [1, 0]);
return {
opacity,
};
});
return (
<Pressable
{...props}
className="flex-1 gap-2 items-center justify-center w-full h-full"
>
<VStack space={"sm"} className={"items-center justify-center"}>
<Animated.View style={[animatedIconStyle]}>
{props.tabBarIcon?.({ focused: isFocused, color: color, size: 1 })}
</Animated.View>
<Animated.Text
style={[
{
color,
fontSize: 11,
},
animatedTextStyle,
]}
>
{label}
</Animated.Text>
</VStack>
</Pressable>
);
};
export const TabBar = ({
state,
descriptors,
navigation,
}: BottomTabBarProps) => {
return (
<Box
className={
"absolute bottom-3 flex flex-row items-center justify-between rounded-[25] mx-[20] py-[8] bg-white"
}
style={{
borderCurve: "continuous",
shadowColor: "black",
shadowOffset: { width: 0, height: 10 },
shadowRadius: 10,
shadowOpacity: 0.1,
}}
>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label = options.title !== undefined ? options.title : route.name;
const isFocused = state.index === index;
const onPress = () => {
if (isFocused) {
return;
}
navigation.navigate(route.name, route.params);
};
const color =
(isFocused
? options.tabBarActiveTintColor
: options.tabBarInactiveTintColor) || "#ddd";
return (
<TabBarButton
key={route.name}
onPress={onPress}
isFocused={isFocused}
tabBarIcon={options.tabBarIcon}
color={color}
label={label}
/>
);
})}
</Box>
);
};
import React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/free/tabs-floating-icon-scale-showing-text";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <TabBar {...props} />}
screenOptions={{
tabBarActiveTintColor: "#5852a5",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}
tabs floating rounded no text
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 React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/pro/tabs-floating-rounded-no-text";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <TabBar {...props} />}
screenOptions={{
tabBarActiveTintColor: "#fff",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}
tabs floating rounded showing text
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 React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/pro/tabs-floating-rounded-showing-text";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <TabBar {...props} />}
screenOptions={{
tabBarActiveTintColor: "#fff",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}
tabs with svg changing bg
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 React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/pro/tabs-with-svg-changing-bg";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => (
<TabBar
{...props}
backgroundColors={[
"rgba(221, 221, 221, 1)",
"rgba(214, 230, 241, 1)",
"rgba(218, 232, 228, 1)",
"rgba(233, 248, 233, 1)",
]}
/>
)}
screenOptions={{
tabBarActiveTintColor: "#5852a5",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
tabBarActiveTintColor: "rgb(46,46,46)",
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarActiveTintColor: "rgb(80,140,172)",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarActiveTintColor: "rgb(118,151,141)",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarActiveTintColor: "rgb(93,112,93)",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}
tabs with svg without changing bg
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 React from "react";
import { Tabs } from "expo-router";
import { AntDesign } from "@expo/vector-icons";
import { TabBar } from "@/nativestack-ui/tab-navigation/pro/tabs-with-svg-without-changing-bg";
export default function TabLayout() {
return (
<Tabs
tabBar={(props) => <TabBar {...props} />}
screenOptions={{
tabBarActiveTintColor: "#fff",
tabBarInactiveTintColor: "#888888",
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Home",
tabBarIcon: ({ color }) => (
<AntDesign name="home" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="two"
options={{
title: "Stats",
tabBarIcon: ({ color }) => (
<AntDesign name="linechart" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="three"
options={{
title: "Teams",
tabBarIcon: ({ color }) => (
<AntDesign name="team" size={26} color={color} />
),
}}
/>
<Tabs.Screen
name="four"
options={{
title: "Account",
tabBarIcon: ({ color }) => (
<AntDesign name="user" size={26} color={color} />
),
}}
/>
</Tabs>
);
}