bottom navigator

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator  } from 'react-navigation-material-bottom-tabs';

class Album extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Album!</Text>
      </View>
    );
  }
}

class Library extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Libary!</Text>
      </View>
    );
  }
}

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

class Detail extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Detail!</Text>
      </View>
    );
  }
}

const TabNavigator = createMaterialBottomTabNavigator({
  Album: { screen: Album },
  Library: { screen: Library },
  Profile: { screen: Profile },
  Detail: { screen: Detail },
},
{
  initialRouteName: 'Album',
  activeColor: '#f0edf6',
  inactiveColor: 'blue',
  barStyle: { backgroundColor: 'red'
},}
);

export default createAppContainer(TabNavigator);