React Native UI - Profile Page

import React, {Component} from 'react'; import { SectionList, SafeAreaView, Image, View, Text, TouchableOpacity, StyleSheet, } from 'react-native'; import AntDesign from 'react-native-vector-icons/AntDesign'; const DATA = [ { title: 'General', data: [ {name: 'Edit Profile', icon: 'form', color: '#333'}, {name: 'Notifications', icon: 'notification', color: '#333'}, {name: 'Wishlist', icon: 'hearto', color: '#333'}, ], }, { title: 'Legal', data: [ {name: 'Terms of Use', icon: 'filetext1', color: '#333'}, {name: 'Privacy Policy', icon: 'copy1', color: '#333'}, ], }, { title: 'Personal', data: [ {name: 'CopyRights', icon: 'copyright', color: '#333'}, {name: 'Logout', icon: 'logout', color: '#FF6665'}, ], }, ]; // create a component const ProfilePage = ({navigation}) => { return ( <SafeAreaView style={styles.safeArea}> <View style={styles.mainContainer}> <View style={{ height: 50, flexDirection: 'row', paddingHorizontal: '16', marginBottom: '5', alignItems: 'center', justifyContent: 'space-between', }}> <TouchableOpacity onPress={() => { navigation.goBack(); }}> <AntDesign color="#333" name="left" size={24}></AntDesign> </TouchableOpacity> <Text>My Profile</Text> <TouchableOpacity> <AntDesign color="#333" name="wechat" size={24}></AntDesign> </TouchableOpacity> </View> <View style={styles.topHeader}> <View style={{flexDirection: 'row', alignItems: 'center'}}> <Image source={{ uri: 'https://randomuser.me/api/portraits/men/1.jpg', }} style={{width: 75, height: 75, borderRadius: 40}} /> <View style={{marginLeft: 10}}> <Text style={{ marginLeft: 8, letterSpacing: '1.0', fontSize: '17', fontWeight: '300', }}> Pratap Kumar </Text> <Text style={{ marginTop: 5, marginLeft: 8, fontWeight: '300', fontSize: '13', }}> Hyderabad </Text> </View> </View> </View> <View style={{ height: 2, backgroundColor: '#E6E6E6', marginTop: 10, marginBottom: 10, }}></View> <SectionList sections={DATA} keyExtractor={(item, index) => item + index} renderItem={({item}) => ( <TouchableOpacity style={styles.button} onPress={() => { if (item.name == 'Logout') { navigation.goBack(); } }}> <View style={styles.sectionItem}> <AntDesign color={item.color} name={item.icon} size={24}></AntDesign> <Text style={styles.title}>{item.name}</Text> </View> <View style={{ width: '100%', height: 1, backgroundColor: '#E6E6E6', }}></View> </TouchableOpacity> )} renderSectionHeader={({section: {title}}) => ( <Text style={styles.sectionHeader}>{title}</Text> )} /> </View> </SafeAreaView> ); }; // define your styles const styles = StyleSheet.create({ safeArea: { flex: 1, }, mainContainer: { flex: 1, }, topHeader: { justifyContent: 'center', marginLeft: '16', }, sectionItem: { flexDirection: 'row', alignItems: 'center', marginLeft: 16, }, title: { fontSize: 16, margin: 20, color: '#333', }, sectionHeader: { fontSize: 14, marginLeft: 16, marginBottom: 16, marginTop: 16, color: '#7f7f7f', }, }); //make this component available to the app export default ProfilePage;

Screenshot

==============