Skip to content

Commit 1be8b62

Browse files
mikalyhmikalyh
committed
update: readme usage
1 parent 5cfe6ca commit 1be8b62

File tree

1 file changed

+118
-118
lines changed

1 file changed

+118
-118
lines changed

‎README.md‎

Lines changed: 118 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -43,68 +43,68 @@ import { ColorfulTabBar } from 'react-navigation-tabbar-collection';
4343
<details>
4444
<summary>Colorful TabBar Usage</summary>
4545

46-
```js
47-
import React from 'react'
48-
import { NavigationContainer } from '@react-navigation/native'
49-
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
50-
import { StyleSheet, Text, View } from 'react-native';
51-
import Icon from 'react-native-vector-icons/AntDesign'
52-
import { ColorfulTabBar as TabBar } from 'react-navigation-tabbar-collection';
53-
54-
const Tab = createBottomTabNavigator();
55-
56-
const DemoScreen = ({route}) => (
57-
<View style={styles.screen}>
58-
<Text>{route.name}</Text>
59-
</View>
46+
```js
47+
import React from 'react'
48+
import { NavigationContainer } from '@react-navigation/native'
49+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
50+
import { StyleSheet, Text, View } from 'react-native';
51+
import { ColorfulTabBar as TabBar } from 'react-navigation-tabbar-collection';
52+
import Icon from 'react-native-vector-icons/AntDesign'
53+
54+
const Tab = createBottomTabNavigator();
55+
56+
const DemoScreen = ({route}) => (
57+
<View style={styles.screen}>
58+
<Text>{route.name}</Text>
59+
</View>
60+
)
61+
62+
const App = () => {
63+
return (
64+
<NavigationContainer>
65+
<Tab.Navigator initialRouteName='Home' tabBar={(props) => <TabBar {...props} />}>
66+
<Tab.Screen name='Home' component={DemoScreen} options={{
67+
title: 'Home',
68+
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
69+
color: 'primary'
70+
}} />
71+
<Tab.Screen name='News' component={DemoScreen} options={{
72+
title: 'News',
73+
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
74+
color: 'info',
75+
}} />
76+
<Tab.Screen name='Chat' component={DemoScreen} options={{
77+
title: 'Chat',
78+
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
79+
color: 'warning',
80+
}} />
81+
<Tab.Screen name='Likes' component={DemoScreen} options={{
82+
title: 'Likes',
83+
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
84+
color: 'danger'
85+
}} />
86+
<Tab.Screen name='Settings' component={DemoScreen} options={{
87+
title: 'Settings',
88+
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
89+
color: 'success'
90+
}} />
91+
</Tab.Navigator>
92+
</NavigationContainer>
6093
)
94+
}
6195

62-
const App = () => {
63-
return (
64-
<NavigationContainer>
65-
<Tab.Navigator initialRouteName='Home' tabBar={(props) => <TabBar {...props} />}>
66-
<Tab.Screen name='Home' component={DemoScreen} options={{
67-
title: 'Home',
68-
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
69-
color: 'primary'
70-
}} />
71-
<Tab.Screen name='News' component={DemoScreen} options={{
72-
title: 'News',
73-
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
74-
color: 'info',
75-
}} />
76-
<Tab.Screen name='Chat' component={DemoScreen} options={{
77-
title: 'Chat',
78-
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
79-
color: 'warning',
80-
}} />
81-
<Tab.Screen name='Likes' component={DemoScreen} options={{
82-
title: 'Likes',
83-
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
84-
color: 'danger'
85-
}} />
86-
<Tab.Screen name='Settings' component={DemoScreen} options={{
87-
title: 'Settings',
88-
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
89-
color: 'success'
90-
}} />
91-
</Tab.Navigator>
92-
</NavigationContainer>
93-
)
94-
}
96+
export default App
9597

96-
export default App
97-
98-
const styles = StyleSheet.create({
99-
screen: {
100-
width: '100%',
101-
height: '100%',
102-
flex: 6,
103-
justifyContent: 'center',
104-
alignItems: 'center'
105-
}
106-
});
107-
```
98+
const styles = StyleSheet.create({
99+
screen: {
100+
width: '100%',
101+
height: '100%',
102+
flex: 6,
103+
justifyContent: 'center',
104+
alignItems: 'center'
105+
}
106+
});
107+
```
108108
</details>
109109

110110
### Clean
@@ -118,68 +118,68 @@ import { CleanTabBar } from 'react-navigation-tabbar-collection';
118118
<details>
119119
<summary>Clean TabBar Usage</summary>
120120

121-
```js
122-
import React from 'react'
123-
import { NavigationContainer } from '@react-navigation/native'
124-
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
125-
import { StyleSheet, Text, View } from 'react-native';
126-
import Icon from 'react-native-vector-icons/AntDesign'
127-
import { CleanTabBar as TabBar } from 'react-navigation-tabbar-collection';
128-
129-
const Tab = createBottomTabNavigator();
130-
131-
const DemoScreen = ({route}) => (
132-
<View style={styles.screen}>
133-
<Text>{route.name}</Text>
134-
</View>
121+
```js
122+
import React from 'react'
123+
import { NavigationContainer } from '@react-navigation/native'
124+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
125+
import { StyleSheet, Text, View } from 'react-native';
126+
import { CleanTabBar as TabBar } from 'react-navigation-tabbar-collection';
127+
import Icon from 'react-native-vector-icons/AntDesign'
128+
129+
const Tab = createBottomTabNavigator();
130+
131+
const DemoScreen = ({route}) => (
132+
<View style={styles.screen}>
133+
<Text>{route.name}</Text>
134+
</View>
135+
)
136+
137+
const App = () => {
138+
return (
139+
<NavigationContainer>
140+
<Tab.Navigator initialRouteName='Home' tabBar={(props) => <TabBar {...props} />}>
141+
<Tab.Screen name='Home' component={DemoScreen} options={{
142+
title: 'Home',
143+
icon: ({focused, color, size}) => <Icon name='home' size={size} color={color} />,
144+
color: 'primary'
145+
}} />
146+
<Tab.Screen name='News' component={DemoScreen} options={{
147+
title: 'News',
148+
icon: ({focused, color, size}) => <Icon name='sharealt' size={size} color={color} />,
149+
color: 'info',
150+
}} />
151+
<Tab.Screen name='Chat' component={DemoScreen} options={{
152+
title: 'Chat',
153+
icon: ({focused, color, size}) => <Icon name='API' size={size} color={color} />,
154+
color: 'warning',
155+
}} />
156+
<Tab.Screen name='Likes' component={DemoScreen} options={{
157+
title: 'Likes',
158+
icon: ({focused, color, size}) => <Icon name='hearto' size={size} color={color} />,
159+
color: 'danger'
160+
}} />
161+
<Tab.Screen name='Settings' component={DemoScreen} options={{
162+
title: 'Settings',
163+
icon: ({focused, color, size}) => <Icon name='setting' size={size} color={color} />,
164+
color: 'success'
165+
}} />
166+
</Tab.Navigator>
167+
</NavigationContainer>
135168
)
169+
}
136170

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

171-
export default App
172-
173-
const styles = StyleSheet.create({
174-
screen: {
175-
width: '100%',
176-
height: '100%',
177-
flex: 6,
178-
justifyContent: 'center',
179-
alignItems: 'center'
180-
}
181-
});
182-
```
173+
const styles = StyleSheet.create({
174+
screen: {
175+
width: '100%',
176+
height: '100%',
177+
flex: 6,
178+
justifyContent: 'center',
179+
alignItems: 'center'
180+
}
181+
});
182+
```
183183
</details>
184184

185185
## Props

0 commit comments

Comments
 (0)