Scribd
Upload
12 views

Profil Screen 2

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.

Uploaded by

muflihahindra00
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Profil Screen 2

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.

Uploaded by

muflihahindra00
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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