Tab Bar Navigation

dailydrip · Jan 30, 2017 · f3b8237 · f3b8237
1 parent 1048758
commit f3b8237
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git a/imgs/home.png b/imgs/home.png
diff --git a/imgs/tablet.png b/imgs/tablet.png
diff --git a/index.ios.js b/index.ios.js
@@ -3,26 +3,23 @@ import {
   AppRegistry,
 } from 'react-native';
 import App from './src/App'
-import { StackNavigator } from 'react-navigation';
+import { TabNavigator } from 'react-navigation';
 import SecondScreen from './src/SecondScreen'
 
 class reactNavigationSample extends Component {
-  static navigationOptions = {
-    title: 'Home Screen',
-  };
 
   render(){
     const { navigation } = this.props;
 
     return (
-      <App navigation={ navigation }/>
+      <App />
     );
   }
 }
 
-const SimpleApp = StackNavigator({
-  Home: { screen: reactNavigationSample },
-  SecondScreen: { screen: SecondScreen, title: 'ss' },
+const SimpleApp = TabNavigator({
+  Home: { screen: App },
+  SecondScreen: { screen: SecondScreen }
 });
 
 AppRegistry.registerComponent('reactNavigationSample', () => SimpleApp);
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import {
   StyleSheet,
   Text,
   Button,
+  Image,
   View
 } from 'react-native';
 import { StackNavigator } from 'react-navigation';
@@ -24,22 +25,31 @@ const styles = StyleSheet.create({
     color: '#333333',
     marginBottom: 5,
   },
+  tabIcon: {
+    width: 16,
+    height: 16,
+  },
 });
 
-const App = (props)  => {
-  const { navigate } = props.navigation;
+const App = ()  => {
 
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to React Native Navigation Sample!
       </Text>
-      <Button
-          onPress={() => navigate('SecondScreen')}
-          title="Go to Second Screen"
-        />
     </View>
   );
 }
 
+App.navigationOptions = {
+  tabBar: {
+      icon: () => (
+        <Image
+          source={require('../imgs/home.png')}
+          style={[styles.tabIcon, {tintColor: 'black'}]}
+        />
+  )}
+};
+
 export default App
diff --git a/src/SecondScreen.js b/src/SecondScreen.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {
   StyleSheet,
   Text,
+  Image,
   View
 } from 'react-native';
 
@@ -17,6 +18,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     margin: 10,
   },
+  tabIcon: {
+    width: 16,
+    height: 16,
+  },
 });
 
 const SecondScreen = ()  => {
@@ -30,7 +35,13 @@ const SecondScreen = ()  => {
 }
 
 SecondScreen.navigationOptions = {
-  title: 'Second Screen Title',
+  tabBar: {
+      icon: () => (
+        <Image
+          source={require('../imgs/home.png')}
+          style={[styles.tabIcon, {tintColor: 'black'}]}
+        />
+  )}
 };
 
 export default SecondScreen