content: // @flow
  
  import React from 'react'
  import { StyleSheet, Text, View } from 'react-native'
  import Feed from './Feed'
  import Movie from './Movie'
  import AddMovie from './AddMovie'
  import { StackNavigator, TabNavigator } from 'react-navigation'
  import Dimensions from 'Dimensions'
  
  const { width } = Dimensions.get('window')
  
  export class Home extends React.Component {
    static navigationOptions = {
      title: 'Feed',
      headerStyle: {
        backgroundColor: '#25292E',
        borderBottomWidth: 0
      },
      headerTitleStyle: {
        color: '#25292E'
      }
    }
  
    render() {
      const { navigate } = this.props.navigation
  
      return (
        <View
          style={{
            backgroundColor: '#fff',
            flex: 1
          }}
        >
          <View
            style={{
              width,
              backgroundColor: '#25292E',
              borderBottomColor: '#efefef',
              borderBottomWidth: 1,
              position: 'absolute',
              top: 0,
              height: 300
            }}
          />
          <Feed navigate={navigate} />
        </View>
      )
    }
  }
  
  const HomeNav = StackNavigator({
    Feed: {
      screen: Home
    },
    Movie: {
      screen: Movie
    }
  })
  
  export default TabNavigator(
    {
      Home: { screen: HomeNav },
      AddMovie: { screen: AddMovie }
    },
    {
      tabBarPosition: 'bottom',
      tabBarOptions: {
        lazyLoad: true,
        tabStyle: {
          paddingBottom: 10
        }
      }
    }
  )
  