Skip to content

Commit 312c32b

Browse files
mikalyhmikalyh
committed
update: readme usage
1 parent 4b2387b commit 312c32b

File tree

1 file changed

+133
-3
lines changed

1 file changed

+133
-3
lines changed

‎README.md‎

Lines changed: 133 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ Collection of Animated **60 FPS** TabBar Component's based on `React Navigation`
1515

1616
## Installation
1717

18-
This TabBar Collection based on `@react-navigation/bottom-tabs` and require `React Navigation v5 or higher` so first thing first you must install [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) in your project.
19-
18+
>This TabBar Collection based on `@react-navigation/bottom-tabs` and require `React Navigation v5 or higher` so first thing first you must install [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) in your project.
2019
> Please always see the React Navigation documentation for complete installation guide
2120
2221
##### via NPM
@@ -40,6 +39,72 @@ yarn add react-navigation-tabbar-collection
4039
```js
4140
import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
4241
```
42+
<details>
43+
<summary>Colorful TabBar Usage</summary>
44+
45+
```js
46+
import React from 'react'
47+
import {NavigationContainer} from "@react-navigation/native"
48+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
49+
import { StyleSheet, Text, View } from 'react-native';
50+
import Icon from 'react-native-vector-icons/AntDesign'
51+
import { ColorfulTabBar as TabBar } from 'react-navigation-tabbar-collection';
52+
53+
const Tab = createBottomTabNavigator();
54+
55+
const DemoScreen = ({route}) => (
56+
<View style={styles.screen}>
57+
<Text>{route.name}</Text>
58+
</View>
59+
)
60+
61+
const App = () => {
62+
return (
63+
<NavigationContainer>
64+
<Tab.Navigator initialRouteName="Home" screenOptions={{headerShown: false}} tabBar={(props) => <TabBar {...props} />}>
65+
<Tab.Screen name="Home" component={DemoScreen} options={{
66+
title: "Home",
67+
icon: ({focused, color, size}) => <Icon name="home" size={size} color={color} />,
68+
color: "primary"
69+
}} />
70+
<Tab.Screen name="News" component={DemoScreen} options={{
71+
title: "News",
72+
icon: ({focused, color, size}) => <Icon name="sharealt" size={size} color={color} />,
73+
color: "info",
74+
}} />
75+
<Tab.Screen name="Chat" component={DemoScreen} options={{
76+
title: "Chat",
77+
icon: ({focused, color, size}) => <Icon name="API" size={size} color={color} />,
78+
color: "warning",
79+
}} />
80+
<Tab.Screen name="Likes" component={DemoScreen} options={{
81+
title: "Likes",
82+
icon: ({focused, color, size}) => <Icon name="hearto" size={size} color={color} />,
83+
color: "danger"
84+
}} />
85+
<Tab.Screen name="Settings" component={DemoScreen} options={{
86+
title: "Settings",
87+
icon: ({focused, color, size}) => <Icon name="setting" size={size} color={color} />,
88+
color: "success"
89+
}} />
90+
</Tab.Navigator>
91+
</NavigationContainer>
92+
)
93+
}
94+
95+
export default App
96+
97+
const styles = StyleSheet.create({
98+
screen: {
99+
width: "100%",
100+
height: "100%",
101+
flex: 6,
102+
justifyContent: "center",
103+
alignItems: "center"
104+
}
105+
});
106+
```
107+
</details>
43108

44109
### Clean
45110

@@ -48,7 +113,72 @@ import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
48113
```js
49114
import { CleanTabBar } from 'react-navigation-tabbar-collection';
50115
```
51-
116+
<details>
117+
<summary>Clean TabBar Usage</summary>
118+
119+
```js
120+
import React from 'react'
121+
import {NavigationContainer} from "@react-navigation/native"
122+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
123+
import { StyleSheet, Text, View } from 'react-native';
124+
import Icon from 'react-native-vector-icons/AntDesign'
125+
import { CleanTabBar as TabBar } from 'react-navigation-tabbar-collection';
126+
127+
const Tab = createBottomTabNavigator();
128+
129+
const DemoScreen = ({route}) => (
130+
<View style={styles.screen}>
131+
<Text>{route.name}</Text>
132+
</View>
133+
)
134+
135+
const App = () => {
136+
return (
137+
<NavigationContainer>
138+
<Tab.Navigator initialRouteName="Home" screenOptions={{headerShown: false}} tabBar={(props) => <TabBar {...props} />}>
139+
<Tab.Screen name="Home" component={DemoScreen} options={{
140+
title: "Home",
141+
icon: ({focused, color, size}) => <Icon name="home" size={size} color={color} />,
142+
color: "primary"
143+
}} />
144+
<Tab.Screen name="News" component={DemoScreen} options={{
145+
title: "News",
146+
icon: ({focused, color, size}) => <Icon name="sharealt" size={size} color={color} />,
147+
color: "info",
148+
}} />
149+
<Tab.Screen name="Chat" component={DemoScreen} options={{
150+
title: "Chat",
151+
icon: ({focused, color, size}) => <Icon name="API" size={size} color={color} />,
152+
color: "warning",
153+
}} />
154+
<Tab.Screen name="Likes" component={DemoScreen} options={{
155+
title: "Likes",
156+
icon: ({focused, color, size}) => <Icon name="hearto" size={size} color={color} />,
157+
color: "danger"
158+
}} />
159+
<Tab.Screen name="Settings" component={DemoScreen} options={{
160+
title: "Settings",
161+
icon: ({focused, color, size}) => <Icon name="setting" size={size} color={color} />,
162+
color: "success"
163+
}} />
164+
</Tab.Navigator>
165+
</NavigationContainer>
166+
)
167+
}
168+
169+
export default App
170+
171+
const styles = StyleSheet.create({
172+
screen: {
173+
width: "100%",
174+
height: "100%",
175+
flex: 6,
176+
justifyContent: "center",
177+
alignItems: "center"
178+
}
179+
});
180+
```
181+
</details>
52182
## Props
53183

54184
| Name | Description | Required | Type | Default | Supported Component |

0 commit comments

Comments
 (0)