11import React , { Component } from 'react'
22import { StyleSheet , Platform } from 'react-native'
3- import TabNavigator from 'react-native-tab-navigator'
43import Icon from 'react-native-vector-icons/MaterialIcons'
54import colors from 'HSColors'
65import fonts from 'HSFonts'
@@ -11,6 +10,8 @@ import Contact from './contact/ContactRootContainer'
1110import Pricing from './pricing/PricingRootContainer'
1211import More from './more/MoreRootContainer'
1312
13+ import { Tabs , Tab } from 'react-native-elements'
14+
1415let styles = { }
1516
1617class App extends Component {
@@ -30,8 +31,8 @@ class App extends Component {
3031 const { toggleSideMenu } = this . props
3132 const { selectedTab } = this . state
3233 return (
33- < TabNavigator >
34- < TabNavigator . Item
34+ < Tabs hidesTabTouch >
35+ < Tab
3536 titleStyle = { [ styles . titleStyle ] }
3637 selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
3738 selected = { selectedTab === 'home' }
@@ -40,8 +41,8 @@ class App extends Component {
4041 renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'whatshot' size = { 26 } /> }
4142 onPress = { ( ) => this . changeTab ( 'home' ) } >
4243 < Home toggleSideMenu = { toggleSideMenu } />
43- </ TabNavigator . Item >
44- < TabNavigator . Item
44+ </ Tab >
45+ < Tab
4546 tabStyle = { selectedTab !== 'about' && { marginBottom : - 6 } }
4647 titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
4748 selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -51,8 +52,8 @@ class App extends Component {
5152 renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'important-devices' size = { 26 } /> }
5253 onPress = { ( ) => this . changeTab ( 'about' ) } >
5354 < About />
54- </ TabNavigator . Item >
55- < TabNavigator . Item
55+ </ Tab >
56+ < Tab
5657 tabStyle = { selectedTab !== 'contact' && { marginBottom : - 6 } }
5758 titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
5859 selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -62,8 +63,8 @@ class App extends Component {
6263 renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'contacts' size = { 26 } /> }
6364 onPress = { ( ) => this . changeTab ( 'contact' ) } >
6465 < Contact />
65- </ TabNavigator . Item >
66- < TabNavigator . Item
66+ </ Tab >
67+ < Tab
6768 tabStyle = { selectedTab !== 'pricing' && { marginBottom : - 6 } }
6869 titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
6970 selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 7 } ] }
@@ -73,8 +74,8 @@ class App extends Component {
7374 renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'attach-money' size = { 26 } /> }
7475 onPress = { ( ) => this . changeTab ( 'pricing' ) } >
7576 < Pricing />
76- </ TabNavigator . Item >
77- < TabNavigator . Item
77+ </ Tab >
78+ < Tab
7879 tabStyle = { selectedTab !== 'more' && { marginBottom : - 6 } }
7980 titleStyle = { [ styles . titleStyle , { marginTop : - 1 } ] }
8081 selectedTitleStyle = { [ styles . titleSelected , { marginTop : - 3 , marginBottom : 8 } ] }
@@ -84,8 +85,8 @@ class App extends Component {
8485 renderSelectedIcon = { ( ) => < Icon color = { colors . primary } name = 'list' size = { 26 } /> }
8586 onPress = { ( ) => this . changeTab ( 'more' ) } >
8687 < More />
87- </ TabNavigator . Item >
88- </ TabNavigator >
88+ </ Tab >
89+ </ Tabs >
8990
9091 )
9192 }
0 commit comments