sanber.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
// import { FontAwesome } from '@expo/vector-icons';

export default class App extends Component {
    render() {
        return (
            <View>
                <TouchableOpacity style={styles.imageBack1}>
                    <Image source={require('./assets/left.png')} style={styles.imageBack} />
                </TouchableOpacity>
                <View style={styles.UserPic}>
                    <Text style={styles.textJudul}>About Me</Text>
                    <FontAwesome name="user-circle" size={124} color="#FFC700" />
                </View>
                <View style={styles.data}>
                    <View style={{paddingBottom: 10}}>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 18, color: "#AAA6A6" }}>Name</Text>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 16, paddingLeft: 10 }}>Will Smith</Text>
                    </View>
                    <View style={{paddingBottom: 10}}>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 18, color: "#AAA6A6" }}>Bord Date</Text>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 16, paddingLeft: 10 }}>12-Agustus-1995</Text>
                    </View>
                    <View style={{paddingBottom: 10}}>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 18, color: "#AAA6A6" }} >My Social Media</Text>
                      <Text style={{ fontFamily: "Roboto", fontWeight: "bold", fontSize: 18, color: "#AAA6A6", paddingLeft: 10 }}>My Portofolio</Text>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    imageBack1: {
        height: 40,
        width: 40,
    },
    imageBack: {
        height: 25,
        width: 25,
        left: 20,
        top: 30
    },
    UserPic: {
        alignItems: 'center'
    },
    textJudul: {
        fontFamily: "Roboto",
        fontWeight: 'bold',
        fontSize: 24,
        textAlign: 'center',
        marginTop: 65,
        paddingBottom: 20
    },
    data: {
        flex: 1,
        marginLeft: 37,
        marginTop: 20,
    },
})