51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { AvatarCustom } from "@/components";
|
|
import { AccentColor } from "@/constants/color-palet";
|
|
import { View, ImageBackground, StyleSheet } from "react-native";
|
|
|
|
const AvatarAndBackground = () => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<ImageBackground
|
|
source={require("@/assets/images/logo-hipmi.png")}
|
|
style={styles.backgroundImage}
|
|
resizeMode="contain"
|
|
/>
|
|
{/* Background Image */}
|
|
|
|
{/* Avatar yang sedikit keluar */}
|
|
<View style={styles.avatarOverlap}>
|
|
<AvatarCustom
|
|
source={require("@/assets/images/react-logo.png")}
|
|
size="lg"
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default AvatarAndBackground;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
backgroundImage: {
|
|
width: "100%",
|
|
height: 150, // Tinggi background sesuai kebutuhan
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 6,
|
|
overflow: "hidden",
|
|
borderWidth: 1,
|
|
borderColor: AccentColor.blue,
|
|
backgroundColor: "white",
|
|
},
|
|
avatarOverlap: {
|
|
position: "absolute", // Meletakkan avatar di atas background
|
|
top: 90, // Posisi avatar sedikit keluar dari background
|
|
left: "50%", // Sentralisasi horizontal
|
|
transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
|
|
},
|
|
}); |