/**
 * 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 { LinearGradient } from 'expo-linear-gradient';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import * as Font from 'expo-font';
interface Iprops extends NavigationDrawerScreenProps {}
export default class LinearGradientExaple 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() {
    const { fontLoaded } = this.state;
    if (!fontLoaded) {
      return  <Container/>;
    }
    return (
      <Container>
        <HeaderCommon title='Linear Gradient' toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          <Text style={styles.paragraph}>
            For using Linear Gradient in react native app you have to import
            LinearGradient API from expo package.
          </Text>
          <Text style={styles.paragraph}>
            This API is pre-installed in managed apps. To use it in a bare React
            Native app, you have to install expo-linear-gradient plugin by this
            command `npm install expo-linear-gradient`.
          </Text>
          <LinearGradient
            colors={['#4c669f', '#3b5998', '#192f6a']}
            style={{ ...styles.gradientStyle }}
          >
            <Text style={{ ...styles.paragraph, ...styles.white }}>
              FacebookButton
            </Text>
          </LinearGradient>
          <LinearGradient
            colors={['rgba(0,0,0,0.8)', 'transparent']}
            style={{
              ...styles.gradientStyle,
              ...{
                height: 200,
              },
            }}
          >
            <Text style={{ ...styles.paragraph, ...styles.white }}>
              Linear Gradient With Trasparency
            </Text>
          </LinearGradient>
        </View>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontFamily: 'montserrat',
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
    color: '#34495e',
  },
  gradientStyle: {
    width: '100%',
    marginTop: 20,
    padding: 15,
    alignItems: 'center',
    borderRadius: 5,
  },
  white: {
    color: 'white',
  },
});
