navbar & navigation update

package.json

@@ -26,7 +26,8 @@
 		"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
 		"react-native-animatable": "^1.3.2",
 		"react-native-elements": "^1.1.0",
-		"react-native-gesture-handler": "^1.2.1",
+		"react-native-gesture-handler": "^1.3.0",
+		"react-native-reanimated": "^1.1.0",
 		"react-native-router-flux": "^4.0.6",
 		"react-native-vector-icons": "^6.5.0",
 		"react-native-web": "^0.11.4",

src/navigation/AppRouter.js

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { Router, Scene } from 'react-native-router-flux';
 import { Provider } from 'react-redux';
 import store from '../store';
-
 import PageOne from '../screens/private/PageOne';
 import PageTwo from '../screens/private/PageTwo';
 import LoginPage from '../screens/public/LoginPage';
 import HomePage from '../screens/private/HomePage';
+import HomePage2 from '../screens/private/HomePage2';
 
 class AppRouterComponent extends Component {
 	render() {
@@ -14,7 +14,8 @@ class AppRouterComponent extends Component {
 			<Provider store={store}>
 				<Router>
 					<Scene key="root" hideNavBar>
-						<Scene key="HomePage" component={HomePage} initial={true} />
+						<Scene key="HomePage2" component={HomePage2} initial={true} />
+						<Scene key="HomePage" component={HomePage} />
 						<Scene key="PageOne" component={PageOne} />
 						<Scene key="PageTwo" component={PageTwo} />
 						<Scene key="LoginPage" component={LoginPage} />

src/screens/private/HomePage.js

@@ -24,13 +24,15 @@ class HomePage extends Component {
 	renderButtonTabs = () => {
 		return (
 			<Tabs
-				tabContainerStyle={{ backgroundColor: '#fbfbfb', paddingHorizontal: 20 }}
+				tabContainerStyle={{ backgroundColor: '#fbfbfb' }}
 				tabBarPosition="overlayBottom"
 				tabBarUnderlineStyle={{
+					borderRadius: 3,
+					height: 3,
 					backgroundColor: '#f44c4c',
 					top: 0,
-					width: width / 10,
-					marginLeft: width / 20 + 5,
+					width: width / 10 + 10,
+					marginLeft: width / 20 - 5,
 				}}
 				onChangeTab={({ i }) => {
 					this.setState({ activeIndex: i });

src/screens/private/HomePage2.js

+import React, { Component } from 'react';
+import { View, StyleSheet, Dimensions, Text, Platform } from 'react-native';
+import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
+import { Icon, Container } from 'native-base';
+import { width, height } from '../../constants/Layout';
+import { Header } from 'react-native-elements';
+import Animated from 'react-native-reanimated';
+
+const FirstRoute = () => <View style={[styles.scene, { backgroundColor: '#b9babc' }]} />;
+const SecondRoute = () => <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />;
+const ThirdRoute = () => <View style={[styles.scene, { backgroundColor: 'red' }]} />;
+const FourthRoute = () => <View style={[styles.scene, { backgroundColor: 'green' }]} />;
+// const FifthRoute = () => <View style={[styles.scene, { backgroundColor: 'blue' }]} />;
+import PageOne from '../private/PageOne';
+
+const LeftComponent = () => <Icon name="menu" style={{ color: 'white', fontSize: 24 }} />;
+const RightComponent = () => <Icon name="notifications" style={{ color: 'white', fontSize: 24 }} />;
+
+class HomePage extends Component {
+	position = new Animated.Value(0);
+	state = {
+		index: 0,
+		routes: [
+			{ id: 0, key: 'first', title: 'Smart Meter', icon: { name: 'home' } },
+			{ id: 1, key: 'second', title: 'Time', icon: { name: 'md-time' } },
+			{ id: 2, key: 'third', title: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
+			{ id: 3, key: 'fourth', title: 'Share', icon: { name: 'ios-share-alt' } },
+			{ id: 4, key: 'fifth', title: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
+		],
+	};
+
+	renderTabBar = props => {
+		// console.log();
+		return (
+			<TabBar
+				{...props}
+				tabStyle={{
+					padding: 0,
+					paddingBottom: 4,
+					paddingTop: 10,
+				}}
+				style={{
+					backgroundColor: 'white',
+					opacity: 1,
+					borderTopLeftRadius: 10,
+					borderTopRightRadius: 10,
+				}}
+				// renderIndicator={() => <Icon name="star" />}
+				indicatorStyle={{
+					// marginHorizontal: 10,
+					backgroundColor: '#f44c4c',
+					top: 0,
+					height: 4,
+					borderRadius: 3,
+					width: width / 10 + 10,
+					left: width / 20 - 5,
+					// left: 10 + this.state.index * -10,
+					// left: 10 + props.navigationState.index * -7.5,
+				}}
+				renderIcon={({ route }) => (
+					<Icon
+						style={{ color: this.state.index === route.id ? '#f44c4c' : '#b9babc', fontSize: 22 }}
+						type={route.icon.type || 'Ionicons'}
+						name={route.icon.name}
+					/>
+				)}
+				renderLabel={({ route }) => (
+					<Text
+						style={{
+							color: this.state.index === route.id ? '#f44c4c' : '#b9babc',
+							fontFamily: 'Avenir_Roman',
+							fontSize: 12,
+						}}
+					>
+						{route.title}
+					</Text>
+				)}
+				// onTabPress={() => console.log('hello')}
+			/>
+		);
+	};
+	_renderLazyPlaceholder = ({ route }) => <LazyPlaceholder route={route} />;
+
+	render() {
+		return (
+			<Container style={{ backgroundColor: '#b9babc' }}>
+				<Header
+					containerStyle={{
+						borderBottomWidth: 0,
+					}}
+					statusBarProps={{ barStyle: 'light-content' }}
+					backgroundColor="#f44c4c"
+					leftComponent={<LeftComponent />}
+					centerComponent={{
+						text: 'Untitled',
+						style: { color: '#fff', fontFamily: 'Avenir_Roman', fontSize: 16 },
+					}}
+					rightComponent={<RightComponent />}
+				/>
+
+				<TabView
+					lazy
+					position={this.position}
+					// animationEnabled={false}
+					removeClippedSubviews={Platform.OS === 'ios' ? false : true}
+					tabBarPosition="bottom"
+					navigationState={this.state}
+					renderScene={SceneMap({
+						first: FirstRoute,
+						second: SecondRoute,
+						third: ThirdRoute,
+						fourth: FourthRoute,
+						fifth: PageOne,
+					})}
+					onIndexChange={index => this.setState({ index })}
+					initialLayout={{ width: Dimensions.get('window').width, height: 0 }}
+					renderTabBar={this.renderTabBar}
+				/>
+			</Container>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	scene: {
+		flex: 1,
+	},
+});
+
+export default HomePage;

src/screens/private/HomePage3.js

+import * as React from 'react';
+import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
+import { TabView, SceneMap } from 'react-native-tab-view';
+import Animated from 'react-native-reanimated';
+import { Constants } from 'expo';
+
+const FirstRoute = () => <View style={[styles.container, { backgroundColor: '#ff4081' }]} />;
+const SecondRoute = () => <View style={[styles.container, { backgroundColor: '#673ab7' }]} />;
+
+export default class TabViewExample extends React.Component {
+	state = {
+		index: 0,
+		routes: [{ key: 'first', title: 'First' }, { key: 'second', title: 'Second' }],
+	};
+
+	_handleIndexChange = index => this.setState({ index });
+
+	_renderTabBar = props => {
+		const inputRange = props.navigationState.routes.map((x, i) => i);
+
+		return (
+			<View style={styles.tabBar}>
+				{props.navigationState.routes.map((route, i) => {
+					const color = Animated.color(
+						Animated.round(
+							Animated.interpolate(props.position, {
+								inputRange,
+								outputRange: inputRange.map(inputIndex => (inputIndex === i ? 255 : 0)),
+							})
+						),
+						0,
+						0
+					);
+
+					return (
+						<TouchableOpacity style={styles.tabItem} onPress={() => this.setState({ index: i })}>
+							<Animated.Text style={{ color }}>{route.title}</Animated.Text>
+						</TouchableOpacity>
+					);
+				})}
+			</View>
+		);
+	};
+
+	_renderScene = SceneMap({
+		first: FirstRoute,
+		second: SecondRoute,
+	});
+
+	render() {
+		return (
+			<TabView
+				navigationState={this.state}
+				renderScene={this._renderScene}
+				renderTabBar={this._renderTabBar}
+				onIndexChange={this._handleIndexChange}
+			/>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	tabBar: {
+		flexDirection: 'row',
+		// paddingTop: Constants.statusBarHeight,
+	},
+	tabItem: {
+		flex: 1,
+		alignItems: 'center',
+		padding: 16,
+	},
+});

yarn.lock

@@ -6183,7 +6183,7 @@ react-native-gesture-handler@1.2.1:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
-react-native-gesture-handler@^1.2.1:
+react-native-gesture-handler@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
   integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
@@ -6228,6 +6228,11 @@ react-native-reanimated@1.0.1:
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz#5ecb6a2f6dad0351077ac9b771ca943b7ad6feda"
   integrity sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA==
 
+react-native-reanimated@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.1.0.tgz#ba6864055ec3a206cdd5209a293fe653ce276206"
+  integrity sha512-UGDVNfvuIkMqYUx6aytSzihuzv6sWubn0MQi8dRcw7BjgezhjJnVnJ/NSOcpL3cO+Ld7lFcRX6GKcskwkHdPkw==
+
 react-native-router-flux@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.6.tgz#e4723f5ce89cb5822e0c9bb6d0a8d4de6179eb58"