1
1
import React , { Component } from 'react'
2
2
import { StyleSheet , Platform } from 'react-native'
3
- import TabNavigator from 'react-native-tab-navigator'
4
3
import Icon from 'react-native-vector-icons/MaterialIcons'
5
4
import colors from 'HSColors'
6
5
import fonts from 'HSFonts'
@@ -11,6 +10,8 @@ import Contact from './contact/ContactRootContainer'
11
10
import Pricing from './pricing/PricingRootContainer'
12
11
import More from './more/MoreRootContainer'
13
12
13
+ import { Tabs , Tab } from 'react-native-elements'
14
+
14
15
let styles = { }
15
16
16
17
class App extends Component {
@@ -30,8 +31,8 @@ class App extends Component {
30
31
const { toggleSideMenu } = this . props
31
32
const { selectedTab } = this . state
32
33
return (
33
- < TabNavigator >
34
- < TabNavigator . Item
34
+ < Tabs hidesTabTouch >
35
+ < Tab
35
36
titleStyle = { [ styles . titleStyle ] }
36
37
selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
37
38
selected = { selectedTab === 'home' }
@@ -40,8 +41,8 @@ class App extends Component {
40
41
renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'whatshot' size = { 26 } /> }
41
42
onPress = { ( ) => this . changeTab ( 'home' ) } >
42
43
< Home toggleSideMenu = { toggleSideMenu } />
43
- </ TabNavigator . Item >
44
- < TabNavigator . Item
44
+ </ Tab >
45
+ < Tab
45
46
tabStyle = { selectedTab !== 'about' && { marginBottom : - 6 } }
46
47
titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
47
48
selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -51,8 +52,8 @@ class App extends Component {
51
52
renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'important-devices' size = { 26 } /> }
52
53
onPress = { ( ) => this . changeTab ( 'about' ) } >
53
54
< About />
54
- </ TabNavigator . Item >
55
- < TabNavigator . Item
55
+ </ Tab >
56
+ < Tab
56
57
tabStyle = { selectedTab !== 'contact' && { marginBottom : - 6 } }
57
58
titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
58
59
selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -62,8 +63,8 @@ class App extends Component {
62
63
renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'contacts' size = { 26 } /> }
63
64
onPress = { ( ) => this . changeTab ( 'contact' ) } >
64
65
< Contact />
65
- </ TabNavigator . Item >
66
- < TabNavigator . Item
66
+ </ Tab >
67
+ < Tab
67
68
tabStyle = { selectedTab !== 'pricing' && { marginBottom : - 6 } }
68
69
titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
69
70
selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -73,8 +74,8 @@ class App extends Component {
73
74
renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'attach-money' size = { 26 } /> }
74
75
onPress = { ( ) => this . changeTab ( 'pricing' ) } >
75
76
< Pricing />
76
- </ TabNavigator . Item >
77
- < TabNavigator . Item
77
+ </ Tab >
78
+ < Tab
78
79
tabStyle = { selectedTab !== 'more' && { marginBottom : - 6 } }
79
80
titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
80
81
selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 8 } ] }
@@ -84,8 +85,8 @@ class App extends Component {
84
85
renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'list' size = { 26 } /> }
85
86
onPress = { ( ) => this . changeTab ( 'more' ) } >
86
87
< More />
87
- </ TabNavigator . Item >
88
- </ TabNavigator >
88
+ </ Tab >
89
+ </ Tabs >
89
90
90
91
)
91
92
}
0 commit comments