import React from 'react';
import {
  Button,
  DrawerLayoutAndroid,
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {createStackNavigator} from '@react-navigation/stack'

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'

import { color } from 'react-native-reanimated';

// components
import LoginFunc from './components/LoginFunc'
import Home from './components/Home'
import Signup from './components/Signup'
import FlatList3 from './components/FlatList'
import FlatList_Api from './components/FlatList_Api'
import Class_comp from './components/Class_comp';
import Func_comp from './components/Func_comp'
import FormValidation from './components/FormValidation';
import Login from './components/Login'
import Drawer from './components/Drawer'

// const Tab = createBottomTabNavigator()
const stack = createStackNavigator()

 
function App(){  
    return(
       <NavigationContainer>
         <stack.Navigator>
           <stack.Screen 
           options={{headerTintColor:'white'
          ,headerStyle:{
              backgroundColor:'black'
          }}}  
          name="Login" component={Login}/>
           <stack.Screen name="drawer" component={Drawer}/>
           <stack.Screen name="Signup" component={Signup}/>
           <stack.Screen name="FlatList3" component={FlatList3}/>
           <stack.Screen name="FlatList_Api" component={FlatList_Api}/>
           <stack.Screen name="FormValidate" component={FormValidation}/>
         </stack.Navigator>
       </NavigationContainer>
    )
}

class Class_comp1 extends React.Component
{
    render()
    {
        return(
            <View>
                <Text style={{fontSize:60,}}>From Class_comp</Text>
                <Button width='40' title="Btn from class" onPress={()=> alert("from class comp")}/>
            </View>
        )
    }
}

export default App;