Skip to content

Commit 6caebc1

Browse files
thiagobrezthiagobrez
committed
Merge branch 'main' into chore/five-six-tabs-examples
2 parents 4a69401 + 52604f5 commit 6caebc1

22 files changed

Lines changed: 490 additions & 42 deletions

‎.changeset/grumpy-otters-report.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.changeset/short-teeth-fix.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.changeset/stable-tab-tint.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.changeset/tidy-eels-wish.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,6 @@ android/generated
8282

8383
# Codex
8484
.codex
85+
86+
# Agent Device
87+
tmp/

‎apps/example/src/App.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,16 @@ import NativeBottomTabsUnmounting from './Examples/NativeBottomTabsUnmounting';
3838
import NativeBottomTabsCustomTabBar from './Examples/NativeBottomTabsCustomTabBar';
3939
import NativeBottomTabsFreezeOnBlur from './Examples/NativeBottomTabsFreezeOnBlur';
4040
import NativeBottomTabsScreenLayout from './Examples/NativeBottomTabsScreenLayout';
41+
import NativeBottomTabsLazy from './Examples/NativeBottomTabsLazy';
4142
import BottomAccessoryView from './Examples/BottomAccessoryView';
43+
import TabBarHidden from './Examples/TabBarHidden';
44+
import CustomTabBar from './Examples/CustomTabBar';
45+
import NativeBottomTabsTabBarHidden from './Examples/NativeBottomTabsTabBarHidden';
4246
import { useLogger } from '@react-navigation/devtools';
47+
import LazyTabs from './Examples/LazyTabs';
48+
import { LogBox } from 'react-native';
49+
50+
LogBox.ignoreAllLogs();
4351

4452
const HiddenTab = () => {
4553
return <FourTabs hideOneTab />;
@@ -76,6 +84,7 @@ const FourTabsActiveIndicatorColor = () => {
7684
const UnlabeledTabs = () => {
7785
return <LabeledTabs showLabels={false} />;
7886
};
87+
7988
const FourTabsRightToLeft = () => {
8089
return <FourTabsRTL layoutDirection={'rtl'} />;
8190
};
@@ -100,6 +109,15 @@ const examples = [
100109
name: 'Embedded stacks',
101110
screenOptions: { headerShown: false },
102111
},
112+
{ component: LazyTabs, name: 'Lazy Tabs' },
113+
{
114+
component: TabBarHidden,
115+
name: 'Tab Bar Hidden',
116+
},
117+
{
118+
component: CustomTabBar,
119+
name: 'Custom tabBar',
120+
},
103121
{
104122
component: FourTabsRippleColor,
105123
name: 'Four Tabs with ripple Color',
@@ -154,12 +172,20 @@ const examples = [
154172
},
155173
{
156174
component: NativeBottomTabsCustomTabBar,
157-
name: 'Native Bottom Tabs with Custom Tab Bar',
175+
name: 'Native Bottom Tabs with custom tabBar',
158176
},
159177
{
160178
component: NativeBottomTabsScreenLayout,
161179
name: 'Native Bottom Tabs with screenLayout',
162180
},
181+
{
182+
component: NativeBottomTabsLazy,
183+
name: 'Native Bottom Tabs with Lazy',
184+
},
185+
{
186+
component: NativeBottomTabsTabBarHidden,
187+
name: 'Native Bottom Tabs with tabBarHidden',
188+
},
163189
{ component: NativeBottomTabs, name: 'Native Bottom Tabs' },
164190
{ component: JSBottomTabs, name: 'JS Bottom Tabs' },
165191
{

‎apps/example/src/Examples/CustomTabBar.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import TabView from 'react-native-bottom-tabs';
2+
import { useState } from 'react';
3+
import { Pressable, StyleSheet, Text, View } from 'react-native';
4+
5+
const routes = [
6+
{
7+
key: 'article',
8+
title: 'Article',
9+
focusedIcon: require('../../assets/icons/article_dark.png'),
10+
},
11+
{
12+
key: 'albums',
13+
title: 'Albums',
14+
focusedIcon: require('../../assets/icons/grid_dark.png'),
15+
},
16+
{
17+
key: 'contacts',
18+
title: 'Contacts',
19+
focusedIcon: require('../../assets/icons/person_dark.png'),
20+
},
21+
];
22+
23+
export default function CustomTabBar() {
24+
const [index, setIndex] = useState(0);
25+
26+
return (
27+
<TabView
28+
sidebarAdaptable
29+
navigationState={{ index, routes }}
30+
onIndexChange={setIndex}
31+
renderScene={({ route }) => (
32+
<View style={styles.screen}>
33+
<Text style={styles.title}>{route.title}</Text>
34+
</View>
35+
)}
36+
tabBar={() => (
37+
<View style={styles.customTabBar}>
38+
{routes.map((route, routeIndex) => {
39+
const focused = routeIndex === index;
40+
41+
return (
42+
<Pressable
43+
key={route.key}
44+
style={[
45+
styles.customTabBarItem,
46+
focused && styles.customTabBarItemFocused,
47+
]}
48+
onPress={() => setIndex(routeIndex)}
49+
>
50+
<Text
51+
style={[
52+
styles.customTabBarLabel,
53+
focused && styles.customTabBarLabelFocused,
54+
]}
55+
>
56+
{route.title}
57+
</Text>
58+
</Pressable>
59+
);
60+
})}
61+
</View>
62+
)}
63+
/>
64+
);
65+
}
66+
67+
const styles = StyleSheet.create({
68+
screen: {
69+
flex: 1,
70+
alignItems: 'center',
71+
justifyContent: 'center',
72+
padding: 24,
73+
},
74+
title: {
75+
fontSize: 24,
76+
fontWeight: '600',
77+
},
78+
customTabBar: {
79+
flexDirection: 'row',
80+
gap: 8,
81+
paddingHorizontal: 12,
82+
paddingTop: 10,
83+
paddingBottom: 18,
84+
backgroundColor: '#24292f',
85+
},
86+
customTabBarItem: {
87+
flex: 1,
88+
alignItems: 'center',
89+
justifyContent: 'center',
90+
minHeight: 44,
91+
borderRadius: 6,
92+
backgroundColor: '#3b434c',
93+
},
94+
customTabBarItemFocused: {
95+
backgroundColor: '#ffffff',
96+
},
97+
customTabBarLabel: {
98+
color: '#ffffff',
99+
fontWeight: '600',
100+
},
101+
customTabBarLabelFocused: {
102+
color: '#24292f',
103+
},
104+
});

‎apps/example/src/Examples/LazyTabs.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import TabView, { SceneMap } from 'react-native-bottom-tabs';
2+
import { useState } from 'react';
3+
import { Article } from '../Screens/Article';
4+
import { Albums } from '../Screens/Albums';
5+
import { Contacts } from '../Screens/Contacts';
6+
7+
const renderScene = SceneMap({
8+
article: Article,
9+
albums: Albums,
10+
contacts: Contacts,
11+
});
12+
13+
export default function LazyTabs() {
14+
const [index, setIndex] = useState(0);
15+
const [routes] = useState([
16+
{
17+
key: 'article',
18+
title: 'Article',
19+
focusedIcon: require('../../assets/icons/article_dark.png'),
20+
unfocusedIcon: require('../../assets/icons/chat_dark.png'),
21+
badge: '!',
22+
testID: 'articleTestID',
23+
},
24+
{
25+
key: 'albums',
26+
title: 'Albums',
27+
focusedIcon: require('../../assets/icons/grid_dark.png'),
28+
badge: '5',
29+
testID: 'albumsTestID',
30+
lazy: false,
31+
},
32+
{
33+
key: 'contacts',
34+
focusedIcon: require('../../assets/icons/person_dark.png'),
35+
title: 'Contacts',
36+
testID: 'contactsTestID',
37+
},
38+
]);
39+
40+
return (
41+
<TabView
42+
navigationState={{ index, routes }}
43+
onIndexChange={setIndex}
44+
renderScene={renderScene}
45+
/>
46+
);
47+
}

‎apps/example/src/Examples/NativeBottomTabsLazy.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Article } from '../Screens/Article';
2+
import { Albums } from '../Screens/Albums';
3+
import { Contacts } from '../Screens/Contacts';
4+
import { Chat } from '../Screens/Chat';
5+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
6+
7+
const Tab = createNativeBottomTabNavigator();
8+
9+
export default function NativeBottomTabsLazy() {
10+
return (
11+
<Tab.Navigator>
12+
<Tab.Screen
13+
name="Article"
14+
component={Article}
15+
options={{
16+
tabBarIcon: () => require('../../assets/icons/article_dark.png'),
17+
}}
18+
/>
19+
<Tab.Screen
20+
name="Albums"
21+
component={Albums}
22+
options={{
23+
tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
24+
lazy: false,
25+
}}
26+
/>
27+
<Tab.Screen
28+
name="Contacts"
29+
component={Contacts}
30+
options={{
31+
tabBarIcon: () => require('../../assets/icons/person_dark.png'),
32+
}}
33+
/>
34+
<Tab.Screen
35+
name="Chat"
36+
component={Chat}
37+
options={{
38+
tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
39+
}}
40+
/>
41+
</Tab.Navigator>
42+
);
43+
}

‎apps/example/src/Examples/NativeBottomTabsTabBarHidden.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
2+
import { useState } from 'react';
3+
import { Button, StyleSheet, Text, View } from 'react-native';
4+
5+
const Tab = createNativeBottomTabNavigator();
6+
7+
type TabBarHiddenScreenProps = {
8+
title: string;
9+
tabBarHidden: boolean;
10+
onToggleTabBarHidden: () => void;
11+
};
12+
13+
function TabBarHiddenScreen({
14+
title,
15+
tabBarHidden,
16+
onToggleTabBarHidden,
17+
}: TabBarHiddenScreenProps) {
18+
return (
19+
<View style={styles.screen}>
20+
<Text style={styles.title}>{title}</Text>
21+
<Button
22+
title={`${tabBarHidden ? 'Show' : 'Hide'} Tab Bar`}
23+
onPress={onToggleTabBarHidden}
24+
/>
25+
</View>
26+
);
27+
}
28+
29+
export default function NativeBottomTabsTabBarHidden() {
30+
const [tabBarHidden, setTabBarHidden] = useState(false);
31+
const toggleTabBarHidden = () => setTabBarHidden((value) => !value);
32+
33+
return (
34+
<Tab.Navigator sidebarAdaptable tabBarHidden={tabBarHidden}>
35+
<Tab.Screen
36+
name="Article"
37+
options={{
38+
tabBarIcon: () => require('../../assets/icons/article_dark.png'),
39+
}}
40+
>
41+
{() => (
42+
<TabBarHiddenScreen
43+
title="Article"
44+
tabBarHidden={tabBarHidden}
45+
onToggleTabBarHidden={toggleTabBarHidden}
46+
/>
47+
)}
48+
</Tab.Screen>
49+
<Tab.Screen
50+
name="Albums"
51+
options={{
52+
tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
53+
}}
54+
>
55+
{() => (
56+
<TabBarHiddenScreen
57+
title="Albums"
58+
tabBarHidden={tabBarHidden}
59+
onToggleTabBarHidden={toggleTabBarHidden}
60+
/>
61+
)}
62+
</Tab.Screen>
63+
<Tab.Screen
64+
name="Contacts"
65+
options={{
66+
tabBarIcon: () => require('../../assets/icons/person_dark.png'),
67+
}}
68+
>
69+
{() => (
70+
<TabBarHiddenScreen
71+
title="Contacts"
72+
tabBarHidden={tabBarHidden}
73+
onToggleTabBarHidden={toggleTabBarHidden}
74+
/>
75+
)}
76+
</Tab.Screen>
77+
</Tab.Navigator>
78+
);
79+
}
80+
81+
const styles = StyleSheet.create({
82+
screen: {
83+
flex: 1,
84+
alignItems: 'center',
85+
justifyContent: 'center',
86+
gap: 16,
87+
padding: 24,
88+
},
89+
title: {
90+
fontSize: 24,
91+
fontWeight: '600',
92+
},
93+
});

0 commit comments

Comments
 (0)