bottom cool

import React from 'react';
import {StyleSheet, Text, View,Button} from 'react-native';
import { createAppContainer} from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Home Screen</Text>
        </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Profile Screen</Text>
        </View>
    );
  }
}
class ImageScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Image Screen</Text>
            </View>
        );
    }
}
class CartScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Cart Screen</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});
const TabNavigator = createMaterialBottomTabNavigator(
    {
        Home: { screen: HomeScreen,
            navigationOptions:{
                tabBarLabel:'Home',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>
                    </View>),
            }
        },
        Profile: { screen: ProfileScreen,
            navigationOptions:{
                tabBarLabel:'Profile',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-cart'}/>
                    </View>),
                activeColor: '#FFFFFF',
                inactiveColor: '#000',
                barStyle: { backgroundColor: '#c56cf0' },
            }
        },
        Image: { screen: ImageScreen,
            navigationOptions:{
                tabBarLabel:'History',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-images'}/>
                    </View>),
                activeColor: '#fff',
                inactiveColor: '#000',
                barStyle: { backgroundColor: '#ff3838' },
            }
        },
        Cart: {
            screen: CartScreen,
            navigationOptions:{
                tabBarLabel:'Cart',
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>
                    </View>),
                    activeColor: '#fff',
                inactiveColor: '#000',
                barStyle: { backgroundColor: '#2ecc71' },
            }
        },
    },
    {
      initialRouteName: "Home",
      activeColor: '#fff',
      inactiveColor: '#000',
      barStyle: { backgroundColor: '#17c0eb' },
    },
);

export default createAppContainer(TabNavigator);