import React, { Component } from 'react';
import { Text, View, TouchableOpacity} from 'react-native';
import * as Font from 'expo-font';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const Settings = createStackNavigator();
import firebaseApp from './tools/firebase'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './redux/reducers'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))
import LandingScreen from './components/auth/Landing'
import RegisterScreen from './components/auth/Register'
import LoginScreen from './components/auth/Login'
import MainScreen from './components/Main'
import AddScreen from './components/main/Add'
import SaveScreen from './components/main/Save'
import SettingsScreen from './components/settings/Settings'
import PreferencesScreen from './components/settings/Preferences'
export class App extends Component {
constructor(props){
super(props);
this.state = {
loaded: false,
}
}
state = {
fontsLoaded: false,
};
async loadFonts() {
await Font.loadAsync({
// Load a font [ICODE]Montserrat[/ICODE] from a static resource
CormorantGaramond: require('./assets/fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.ttf'),
// Any string can be used as the fontFamily name. Here we use an object to provide more control
'CormorantGaramond-SemiBold': {
uri: require('./assets/fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.ttf'),
display: Font.FontDisplay.FALLBACK,
},
});
this.setState({ fontsLoaded: true });
}
componentDidMount(){
firebaseApp.auth().onAuthStateChanged((user) => {
if(!user){
this.setState({
loggedIn: false,
loaded: true,
})
}else {
this.setState({
loggedIn: true,
loaded: true,
})
}
})
this.loadFonts();
}
render() {
const {navigation} = this.props;
const {loggedIn, loaded} = this.state;
if(!loaded){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Loading</Text>
</View>
)
}
if(!loggedIn){
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Landing">
<Stack.Screen name="Landing" component={LandingScreen} options={{ headerShown: false}}></Stack.Screen>
<Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false}}></Stack.Screen>
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false}}></Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
function LogoTitle() {
return (
<Text
style={{
fontSize: 50,
fontFamily: 'CormorantGaramond',
//fontWeight: "bold"
}}
[QUOTE][/QUOTE]
Thirstily</Text>
);}
function Root(){
return (
<Settings.Navigator mode="modal">
<Settings.Screen
name="Preferences"
component={PreferencesScreen}
/>
<Settings.Screen
name="Settings"
component={SettingsScreen}
/>
</Settings.Navigator>
);
}
return (
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Main"
screenOptions={{
headerShown: true,
headerTitle: props => <LogoTitle {...props} />,
headerStyle: {
//backgroundColor: '#f4511e',
height: 120
},
headerLeft: () => (
<TouchableOpacity
onPress={() => navigation.navigate('Root', { screen: 'Preferences'})}>
<FontAwesome5
name="address-card"
style={{ color: "#aaa", fontSize: 25, marginLeft: 10}} />
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
onPress={() => navigate('Settings')}>
<FontAwesome5
name="screwdriver"
style={{ color: "#aaa", fontSize: 25, marginRight: 10}} />
</TouchableOpacity>
),
}} >
<Stack.Screen name="Main" component={MainScreen}/>
<Stack.Screen name="Add" component={AddScreen} navigation={this.props.navigation}/>
<Stack.Screen name="Save" component={SaveScreen} navigation={this.props.navigation}/>
<Stack.Screen name="Root" component={Root} options={{ headerShown: false }}/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
)
};
}
export default App