Skip to content

Commit f76e408

Browse files
sugih-salamsugih-salam
committed
update: readme colorful
1 parent b25866c commit f76e408

File tree

1 file changed

+184
-101
lines changed

1 file changed

+184
-101
lines changed

‎README.md‎

Lines changed: 184 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +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.
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.
1919
2020
##### via NPM
2121

@@ -40,74 +40,123 @@ yarn add react-navigation-tabbar-collection
4040
<img alt="ColorfulTabBar Dark Mode" height="150" src="https://raw.githubusercontent.com/mikalyh/react-navigation-tabbar-collection/master/preview/colorful_dark.gif" />
4141

4242
```js
43+
//Import the TabBar
4344
import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
45+
46+
//Your Code ....
47+
48+
const App = () => {
49+
return (
50+
<NavigationContainer>
51+
<Tab.Navigator
52+
tabBar={(props) => <ColorfulTabBar {...props} />} //<- Add Here
53+
>
54+
// Your Screens Here ~
55+
</Tab.Navigator>
56+
</NavigatorContainer>
57+
)
58+
}
4459
```
4560

4661
<details>
4762
<summary>Colorful TabBar Usage Example</summary>
4863

4964
```js
5065
import React from 'react';
51-
import { NavigationContainer } from '@react-navigation/native'
66+
import { NavigationContainer } from '@react-navigation/native';
5267
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5368
import { StyleSheet, Text, View } from 'react-native';
54-
import { ColorfulTabBar as TabBar } from 'react-navigation-tabbar-collection';
69+
import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
5570
import Icon from 'react-native-vector-icons/AntDesign';
5671

5772
const Tab = createBottomTabNavigator();
5873

59-
const DemoScreen = ({route}) => (
60-
<View style={styles.screen}>
61-
<Text>{route.name}</Text>
62-
</View>
63-
)
74+
const DemoScreen = ({ route }) => (
75+
<View style={styles.screen}>
76+
<Text>{route.name}</Text>
77+
</View>
78+
);
6479

6580
const App = () => {
66-
return (
67-
<NavigationContainer>
68-
<Tab.Navigator initialRouteName='Home' tabBar={(props) => <TabBar {...props} />}>
69-
<Tab.Screen name='Home' component={DemoScreen} options={{
70-
title: 'Home',
71-
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
72-
color: 'primary'
73-
}} />
74-
<Tab.Screen name='News' component={DemoScreen} options={{
75-
title: 'News',
76-
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
77-
color: 'info',
78-
}} />
79-
<Tab.Screen name='Chat' component={DemoScreen} options={{
80-
title: 'Chat',
81-
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
82-
color: 'warning',
83-
}} />
84-
<Tab.Screen name='Likes' component={DemoScreen} options={{
85-
title: 'Likes',
86-
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
87-
color: 'danger'
88-
}} />
89-
<Tab.Screen name='Settings' component={DemoScreen} options={{
90-
title: 'Settings',
91-
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
92-
color: 'success'
93-
}} />
94-
</Tab.Navigator>
95-
</NavigationContainer>
96-
)
97-
}
98-
99-
export default App
81+
return (
82+
<NavigationContainer>
83+
<Tab.Navigator
84+
initialRouteName="Home"
85+
tabBar={(props) => <ColorfulTabBar {...props} />}
86+
>
87+
<Tab.Screen
88+
name="Home"
89+
component={DemoScreen}
90+
options={{
91+
title: 'Home',
92+
icon: ({ focused, color, size }) => (
93+
<Icon name="home" size={size} color={color} />
94+
),
95+
color: 'primary',
96+
}}
97+
/>
98+
<Tab.Screen
99+
name="News"
100+
component={DemoScreen}
101+
options={{
102+
title: 'News',
103+
icon: ({ focused, color, size }) => (
104+
<Icon name="sharealt" size={size} color={color} />
105+
),
106+
color: 'info',
107+
}}
108+
/>
109+
<Tab.Screen
110+
name="Chat"
111+
component={DemoScreen}
112+
options={{
113+
title: 'Chat',
114+
icon: ({ focused, color, size }) => (
115+
<Icon name="API" size={size} color={color} />
116+
),
117+
color: 'warning',
118+
}}
119+
/>
120+
<Tab.Screen
121+
name="Likes"
122+
component={DemoScreen}
123+
options={{
124+
title: 'Likes',
125+
icon: ({ focused, color, size }) => (
126+
<Icon name="hearto" size={size} color={color} />
127+
),
128+
color: 'danger',
129+
}}
130+
/>
131+
<Tab.Screen
132+
name="Settings"
133+
component={DemoScreen}
134+
options={{
135+
title: 'Settings',
136+
icon: ({ focused, color, size }) => (
137+
<Icon name="setting" size={size} color={color} />
138+
),
139+
color: 'success',
140+
}}
141+
/>
142+
</Tab.Navigator>
143+
</NavigationContainer>
144+
);
145+
};
146+
147+
export default App;
100148

101149
const styles = StyleSheet.create({
102-
screen: {
103-
width: '100%',
104-
height: '100%',
105-
flex: 6,
106-
justifyContent: 'center',
107-
alignItems: 'center'
108-
}
150+
screen: {
151+
width: '100%',
152+
height: '100%',
153+
flex: 6,
154+
justifyContent: 'center',
155+
alignItems: 'center',
156+
},
109157
});
110158
```
159+
111160
</details>
112161

113162
### Clean
@@ -127,66 +176,100 @@ import { CleanTabBar } from 'react-navigation-tabbar-collection';
127176

128177
```js
129178
import React from 'react';
130-
import { NavigationContainer } from '@react-navigation/native'
179+
import { NavigationContainer } from '@react-navigation/native';
131180
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
132181
import { StyleSheet, Text, View } from 'react-native';
133-
import { CleanTabBar as TabBar } from 'react-navigation-tabbar-collection';
182+
import { CleanTabBar } from 'react-navigation-tabbar-collection';
134183
import Icon from 'react-native-vector-icons/AntDesign';
135184

136185
const Tab = createBottomTabNavigator();
137186

138-
const DemoScreen = ({route}) => (
139-
<View style={styles.screen}>
140-
<Text>{route.name}</Text>
141-
</View>
142-
)
187+
const DemoScreen = ({ route }) => (
188+
<View style={styles.screen}>
189+
<Text>{route.name}</Text>
190+
</View>
191+
);
143192

144193
const App = () => {
145-
return (
146-
<NavigationContainer>
147-
<Tab.Navigator initialRouteName='Home' tabBar={(props) => <TabBar {...props} />}>
148-
<Tab.Screen name='Home' component={DemoScreen} options={{
149-
title: 'Home',
150-
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
151-
color: 'primary'
152-
}} />
153-
<Tab.Screen name='News' component={DemoScreen} options={{
154-
title: 'News',
155-
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
156-
color: 'info',
157-
}} />
158-
<Tab.Screen name='Chat' component={DemoScreen} options={{
159-
title: 'Chat',
160-
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
161-
color: 'warning',
162-
}} />
163-
<Tab.Screen name='Likes' component={DemoScreen} options={{
164-
title: 'Likes',
165-
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
166-
color: 'danger'
167-
}} />
168-
<Tab.Screen name='Settings' component={DemoScreen} options={{
169-
title: 'Settings',
170-
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
171-
color: 'success'
172-
}} />
173-
</Tab.Navigator>
174-
</NavigationContainer>
175-
)
176-
}
177-
178-
export default App
194+
return (
195+
<NavigationContainer>
196+
<Tab.Navigator
197+
initialRouteName="Home"
198+
tabBar={(props) => <CleanTabBar {...props} />}
199+
>
200+
<Tab.Screen
201+
name="Home"
202+
component={DemoScreen}
203+
options={{
204+
title: 'Home',
205+
icon: ({ focused, color, size }) => (
206+
<Icon name="home" size={size} color={color} />
207+
),
208+
color: 'primary',
209+
}}
210+
/>
211+
<Tab.Screen
212+
name="News"
213+
component={DemoScreen}
214+
options={{
215+
title: 'News',
216+
icon: ({ focused, color, size }) => (
217+
<Icon name="sharealt" size={size} color={color} />
218+
),
219+
color: 'info',
220+
}}
221+
/>
222+
<Tab.Screen
223+
name="Chat"
224+
component={DemoScreen}
225+
options={{
226+
title: 'Chat',
227+
icon: ({ focused, color, size }) => (
228+
<Icon name="API" size={size} color={color} />
229+
),
230+
color: 'warning',
231+
}}
232+
/>
233+
<Tab.Screen
234+
name="Likes"
235+
component={DemoScreen}
236+
options={{
237+
title: 'Likes',
238+
icon: ({ focused, color, size }) => (
239+
<Icon name="hearto" size={size} color={color} />
240+
),
241+
color: 'danger',
242+
}}
243+
/>
244+
<Tab.Screen
245+
name="Settings"
246+
component={DemoScreen}
247+
options={{
248+
title: 'Settings',
249+
icon: ({ focused, color, size }) => (
250+
<Icon name="setting" size={size} color={color} />
251+
),
252+
color: 'success',
253+
}}
254+
/>
255+
</Tab.Navigator>
256+
</NavigationContainer>
257+
);
258+
};
259+
260+
export default App;
179261

180262
const styles = StyleSheet.create({
181-
screen: {
182-
width: '100%',
183-
height: '100%',
184-
flex: 6,
185-
justifyContent: 'center',
186-
alignItems: 'center'
187-
}
263+
screen: {
264+
width: '100%',
265+
height: '100%',
266+
flex: 6,
267+
justifyContent: 'center',
268+
alignItems: 'center',
269+
},
188270
});
189271
```
272+
190273
</details>
191274

192275
## Props
@@ -245,7 +328,7 @@ MIT
245328

246329
## Requirement's
247330

248-
| Name | Version |
249-
| ---- | ---- |
250-
| [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) | >=5.0.0 |
251-
| [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) | >=5.0.0 |
331+
| Name | Version |
332+
| --------------------------------------------------------------------------------------- | ------- |
333+
| [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) | >=5.0.0 |
334+
| [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) | >=5.0.0 |

0 commit comments

Comments
 (0)