Scribd Logo
Upload

Welcome to Scribd!

  • Profil Screen 2

    Uploaded by

    muflihahindra00
    4 views2 pages
    This document defines a React Native component called ProfilScreen2 that displays a user profile. It returns a ScrollView with a header section showing the user's image, name, and bio. Below is a info section with three boxes displaying the user's number of posts, followers, and follows. Styles are defined using StyleSheet to layout and style the different elements.

    Original Description:

    Original Title

    ProfilScreen2

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines a React Native component called ProfilScreen2 that displays a user profile. It returns a ScrollView with a header section showing the user's image, name, and bio. Below is a info section with three boxes displaying the user's number of posts, followers, and follows. Styles are defined using StyleSheet to layout and style the different elements.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views2 pages

    Profil Screen 2

    Uploaded by

    muflihahindra00
    This document defines a React Native component called ProfilScreen2 that displays a user profile. It returns a ScrollView with a header section showing the user's image, name, and bio. Below is a info section with three boxes displaying the user's number of posts, followers, and follows. Styles are defined using StyleSheet to layout and style the different elements.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    import {StyleSheet, Text, View, Image, ScrollView} from 'react-native';

    import React from 'react';

    const ProfilScreen2 = () => {


    return (
    <ScrollView style={styles.container}>
    <View style={styles.headerContainer}>
    <Image
    source={require('./img/profil.jpg')}
    style={styles.profileImage}
    />
    <Text style={styles.name}>Alwinston_K</Text>
    <Text style={styles.bio}>Ini adalah profil singkatku...</Text>
    </View>
    <View style={styles.infoContainer}>
    <View style={styles.infoSection}>
    <Text style={styles.infoTitle}>Postingan</Text>
    <Text style={styles.InfoValue}>10k</Text>
    </View>
    <View style={styles.infoSection}>
    <Text style={styles.infoTitle}>Pengikut</Text>
    <Text style={styles.InfoValue}>2,5M</Text>
    </View>
    <View style={styles.infoSection}>
    <Text style={styles.infoTitle}>Mengikuti</Text>
    <Text style={styles.InfoValue}>3</Text>
    </View>
    </View>
    </ScrollView>
    );
    };

    const styles = StyleSheet.create({


    container: {
    flex: 1,
    backgroundColor: '#f7f7f7',
    },
    headerContainer: {
    alignItems: 'center',
    paddingVertical: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBlockColor: '#dedede',
    },
    profileImage: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 3,
    borderColor: '#fff',
    marginTop: 20,
    },
    name: {
    fontSize: 24,
    fontWeight: 'bold',
    marginTop: 10,
    },
    bio: {
    fontSize: 14,
    color: 'gray',
    marginTop: 5,
    },
    infoContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 10,
    backgroundColor: '#fff',
    },
    infoSection: {
    alignItems: 'center',
    },
    infoTitle: {
    fontSize: 14,
    color: 'gray',
    },
    InfoValue: {
    fontSize: 18,
    fontWeight: 'bold',
    },
    });

    export default ProfilScreen2;

    You might also like