81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import {
|
|
ScrollView,
|
|
View,
|
|
Text,
|
|
ImageBackground,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import { Icon, ProfileItem } from "../components";
|
|
import DEMO from "../assets/data/demo";
|
|
import styles, { WHITE } from "../assets/styles";
|
|
|
|
const Profile = () => {
|
|
const {
|
|
age,
|
|
image,
|
|
info1,
|
|
info2,
|
|
info3,
|
|
info4,
|
|
location,
|
|
match,
|
|
name,
|
|
} = DEMO[7];
|
|
|
|
return (
|
|
<ImageBackground
|
|
source={require("../assets/images/bg.png")}
|
|
style={styles.bg}
|
|
>
|
|
<ScrollView style={styles.containerProfile}>
|
|
<ImageBackground source={image} style={styles.photo}>
|
|
<View style={styles.top}>
|
|
<TouchableOpacity>
|
|
<Icon
|
|
name="chevron-back"
|
|
size={20}
|
|
color={WHITE}
|
|
style={styles.topIconLeft}
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity>
|
|
<Icon
|
|
name="ellipsis-vertical"
|
|
size={20}
|
|
color={WHITE}
|
|
style={styles.topIconRight}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ImageBackground>
|
|
|
|
<ProfileItem
|
|
matches={match}
|
|
name={name}
|
|
age={age}
|
|
location={location}
|
|
info1={info1}
|
|
info2={info2}
|
|
info3={info3}
|
|
info4={info4}
|
|
/>
|
|
|
|
<View style={styles.actionsProfile}>
|
|
<TouchableOpacity style={styles.circledButton}>
|
|
<Icon name="ellipsis-horizontal" size={20} color={WHITE} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.roundedButton}>
|
|
<Icon name="chatbubble" size={20} color={WHITE} />
|
|
<Text style={styles.textButton}>Start chatting</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</ImageBackground>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|