/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Font from 'expo-font';
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
interface Iprops extends NavigationDrawerScreenProps { }
export default class CustomFontExample extends React.Component<Iprops> {
  state = {
    fontLoaded: false,
  };
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    return (
      <Container>
        <HeaderCommon title="Custom Fonts" toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          {this.state.fontLoaded ? (
            <View>
              <Text style={styles.paragraph}>
                (This text is written in Montserrat)
                </Text>
              <Text style={styles.paragraph}>
                The expo library provides an API to access native functionality
                of the device from your JavaScript code. Font is the module that
                deals with font-related tasks. First, we must load the font from
                our assets directory using Expo.Font.loadAsync(). We can do this
                in the componentDidMount() lifecycle method of the App
                component. Now that we have the font files saved to disk and the
                Font SDK imported
              </Text>
              <Text style={{ ...styles.paragraph, ...{ fontSize: 56 } }}>
                Hello, world!
              </Text>
            </View>
          ) : null}
        </View>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 10,
    fontSize: 18,
    textAlign: 'center',
  },
});
