import React from 'react';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import Feed from '../screens/Feed';
import Settings from '../screens/Settings';
import UserDetail from '../screens/UserDetail';
import Me from '../screens/Me';

const FeedStack = createStackNavigator({
Feed: {
screen: Feed,
navigationOptions: {
title: 'Feed',
},
},
Details: {
screen: UserDetail,
navigationOptions: ({ navigation }) => ({
title: ${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()},
}),
},
});

export const Tabs = createBottomTabNavigator({
Feed: {
screen: FeedStack,
navigationOptions: {
tabBarLabel: 'Feed',
tabBarIcon: ({ tintColor }) => ,
},
},
Me: {
screen: Me,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ({ tintColor }) => 
},
},
});

const SettingsStack = createStackNavigator({
Settings: {
screen: Settings,
navigationOptions: {
title: 'Settings',
},
},
});

const Root = createStackNavigator({
Tabs: {
screen: Tabs,
},
Settings: {
screen: SettingsStack,
},
}, {
mode: 'modal',
headerMode: 'none',
});

import React, { Component } from "react";
import { View, Text } from "react-native";

class Home extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home</Text>
      </View>
    );
  }
}

export default Home;

import React, { Component } from "react";
import { View, Text } from "react-native";

class Profile extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Profile</Text>
      </View>
    );
  }
}

export default Profile;

import { StackNavigator } from "react-navigation";
import HomeScreen from "./components/Home";
import ProfileScreen from "./components/Profile";

export default MainStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Profile: {
      screen: ProfileScreen
    }
  },
  {
    initialRouteName: "Home"
  }
);

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import Mainstack from "./app/route";

const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

export default class App extends Component {
  render() {
    // alert(Mainstack);
    return (
      <View style={styles.container}>
        <Mainstack />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});