Skip to content

Commit a3f3b17

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

File tree

1 file changed

+86
-84
lines changed

1 file changed

+86
-84
lines changed

‎README.md‎

Lines changed: 86 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
4444

4545
```js
4646
import React from 'react'
47-
import {NavigationContainer} from "@react-navigation/native"
47+
import { NavigationContainer } from '@react-navigation/native'
4848
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
4949
import { StyleSheet, Text, View } from 'react-native';
5050
import Icon from 'react-native-vector-icons/AntDesign'
@@ -53,55 +53,55 @@ import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
5353
const Tab = createBottomTabNavigator();
5454

5555
const DemoScreen = ({route}) => (
56-
<View style={styles.screen}>
57-
<Text>{route.name}</Text>
58-
</View>
56+
<View style={styles.screen}>
57+
<Text>{route.name}</Text>
58+
</View>
5959
)
6060

6161
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-
)
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+
)
9393
}
9494

9595
export default App
9696

9797
const styles = StyleSheet.create({
98-
screen: {
99-
width: "100%",
100-
height: "100%",
101-
flex: 6,
102-
justifyContent: "center",
103-
alignItems: "center"
104-
}
98+
screen: {
99+
width: '100%',
100+
height: '100%',
101+
flex: 6,
102+
justifyContent: 'center',
103+
alignItems: 'center'
104+
}
105105
});
106106
```
107107
</details>
@@ -113,12 +113,13 @@ import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
113113
```js
114114
import { CleanTabBar } from 'react-navigation-tabbar-collection';
115115
```
116+
116117
<details>
117118
<summary>Clean TabBar Usage</summary>
118119

119120
```js
120121
import React from 'react'
121-
import {NavigationContainer} from "@react-navigation/native"
122+
import { NavigationContainer } from '@react-navigation/native'
122123
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
123124
import { StyleSheet, Text, View } from 'react-native';
124125
import Icon from 'react-native-vector-icons/AntDesign'
@@ -127,58 +128,59 @@ import { CleanTabBar } from 'react-navigation-tabbar-collection';
127128
const Tab = createBottomTabNavigator();
128129

129130
const DemoScreen = ({route}) => (
130-
<View style={styles.screen}>
131-
<Text>{route.name}</Text>
132-
</View>
131+
<View style={styles.screen}>
132+
<Text>{route.name}</Text>
133+
</View>
133134
)
134135

135136
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-
)
137+
return (
138+
<NavigationContainer>
139+
<Tab.Navigator initialRouteName='Home' screenOptions={{headerShown: false}} tabBar={(props) => <TabBar {...props} />}>
140+
<Tab.Screen name='Home' component={DemoScreen} options={{
141+
title: 'Home',
142+
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
143+
color: 'primary'
144+
}} />
145+
<Tab.Screen name='News' component={DemoScreen} options={{
146+
title: 'News',
147+
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
148+
color: 'info',
149+
}} />
150+
<Tab.Screen name='Chat' component={DemoScreen} options={{
151+
title: 'Chat',
152+
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
153+
color: 'warning',
154+
}} />
155+
<Tab.Screen name='Likes' component={DemoScreen} options={{
156+
title: 'Likes',
157+
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
158+
color: 'danger'
159+
}} />
160+
<Tab.Screen name='Settings' component={DemoScreen} options={{
161+
title: 'Settings',
162+
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
163+
color: 'success'
164+
}} />
165+
</Tab.Navigator>
166+
</NavigationContainer>
167+
)
167168
}
168169

169170
export default App
170171

171172
const styles = StyleSheet.create({
172-
screen: {
173-
width: "100%",
174-
height: "100%",
175-
flex: 6,
176-
justifyContent: "center",
177-
alignItems: "center"
178-
}
173+
screen: {
174+
width: '100%',
175+
height: '100%',
176+
flex: 6,
177+
justifyContent: 'center',
178+
alignItems: 'center'
179+
}
179180
});
180181
```
181182
</details>
183+
182184
## Props
183185

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

0 commit comments

Comments
 (0)