import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    TextInput,
    ScrollView,
    Image
} from "react-native";
import Header from './comp/Header';
import Footer from './comp/Footer';
const profile = require('./img/agus.jpg');
class TentangScreen extends Component {
    static navigationOptions = {
        header: null
    };

    render() {
        return (
            <View style={styles.container}>
                <Header judul={"Tentang Kami"} />
                <View style={styles.bioContainer}>
                    <View style={styles.photoContainer}>
                        <Image source={profile}
                            style={styles.photo} />
                    </View>
                    <View style={styles.detailContainer}>
                        <Text style={styles.textBio}>Nama: Agus Wahyu</Text>
                        <Text style={styles.textBio}>NIM: 1715051013</Text>
                        <Text style={styles.textBio}>Skills: Webstreaming Maker</Text>
                    </View>
                </View>
            </View>
        );
    }
}
// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#E3F2FD'
    },
    bioContainer: {
        flex: 0.5,
        flexDirection: 'row',
        marginTop: 25,
    },
    photoContainer: {
        flex: 0.4,
        alignItems: 'center',
        justifyContent: 'center'
    },
    detailContainer: {
        flex: 0.6,
        justifyContent: 'center'
    },
    photo: {
        width: '75%',
        height: '50%',
        backgroundColor: '#005ff0',
        borderRadius: 10,
    },
    textBio: {
        fontSize: 16
    }

});
//make this component available to the app
export default TentangScreen;