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 ;