import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TabNavigator } from 'react-navigation';
import {
  UnobtrusiveContainer
} from './js/components.js';
import Style from './js/styles';

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <Text>{JSON.stringify(StyleSheet.flatten({flex: 1}))}</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootTabs = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
}, {
  tabBarOptions: {
    style: {
      height: 0
    }
  }
});

export default class App extends React.Component {
  render() {
    return (
      <UnobtrusiveContainer style={Style.container}>
        <RootTabs />
      </UnobtrusiveContainer>
    )
  }
};