@amityco/react-native-social-uikit 4.0.0-03e2bf8.0

package/src/v4/assets/icons/trash.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M19.3125 6.0625C19.5938 6.0625 19.875 6.34375 19.875 6.625V7.1875C19.875 7.50391 19.5938 7.75 19.3125 7.75H18.75L17.9766 19.668C17.9414 20.582 17.2031 21.25 16.2891 21.25H7.67578C6.76172 21.25 6.02344 20.582 5.98828 19.668L5.25 7.75H4.6875C4.37109 7.75 4.125 7.50391 4.125 7.1875V6.625C4.125 6.34375 4.37109 6.0625 4.6875 6.0625H7.57031L8.76562 4.09375C9.04688 3.60156 9.60938 3.25 10.207 3.25H13.7578C14.3555 3.25 14.918 3.60156 15.1992 4.09375L16.3945 6.0625H19.3125ZM10.207 4.9375L9.53906 6.0625H14.4258L13.7578 4.9375H10.207ZM16.2891 19.5625L17.0273 7.75H6.9375L7.67578 19.5625H16.2891Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/unreport.tsx

@@ -0,0 +1,36 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M14.8125 6.0625C16.043 6.0625 17.3789 5.64062 18.6445 5.07812C19.7344 4.62109 21 5.42969 21 6.625V15.0625C21 15.6602 20.6836 16.1875 20.2266 16.5039C19.2773 17.1016 17.7656 17.875 15.6914 17.875C13.3008 17.875 11.7188 16.75 9.99609 16.75C8.02734 16.75 6.83203 17.1719 5.53125 17.7695V20.6875C5.53125 21.0039 5.25 21.25 4.96875 21.25H4.40625C4.08984 21.25 3.84375 21.0039 3.84375 20.6875V6.41406C3.31641 6.13281 3 5.57031 3 4.9375C3 3.98828 3.80859 3.21484 4.79297 3.28516C5.60156 3.32031 6.26953 3.95312 6.33984 4.76172C6.33984 4.79688 6.375 4.90234 6.375 4.9375C6.375 5.11328 6.30469 5.35938 6.26953 5.5C7.04297 5.18359 7.99219 4.9375 9.11719 4.9375C11.5078 4.9375 13.0898 6.0625 14.8125 6.0625ZM19.3125 15.0625V6.625C18.1875 7.15234 16.3242 7.75 14.8125 7.75C12.7031 7.75 11.2266 6.625 9.11719 6.625C7.64062 6.625 6.26953 7.22266 5.53125 7.75V15.9062C6.62109 15.4141 8.48438 15.0625 9.99609 15.0625C12.1055 15.0625 13.582 16.1875 15.6914 16.1875C17.168 16.1875 18.5391 15.625 19.3125 15.0625Z"
+    fill="currentColor"
+  />
+  <mask
+    id="path-4-outside-1_14618_6810"
+    maskUnits="userSpaceOnUse"
+    x="-1"
+    y="2"
+    width="26"
+    height="21"
+    fill="black"
+  >
+    <rect fill="white" x="-1" y="2" width="26" height="21" />
+    <path d="M21.9844 21.1445L0.960938 4.69141C0.714844 4.51562 0.644531 4.16406 0.855469 3.91797L1.20703 3.46094C1.41797 3.25 1.76953 3.17969 2.01562 3.39062L23.0391 19.8438C23.25 20.0195 23.3203 20.3711 23.1094 20.6172L22.7578 21.0391C22.5469 21.2852 22.1953 21.3555 21.9844 21.1445Z" />
+  </mask>
+  <path
+    d="M21.9844 21.1445L0.960938 4.69141C0.714844 4.51562 0.644531 4.16406 0.855469 3.91797L1.20703 3.46094C1.41797 3.25 1.76953 3.17969 2.01562 3.39062L23.0391 19.8438C23.25 20.0195 23.3203 20.3711 23.1094 20.6172L22.7578 21.0391C22.5469 21.2852 22.1953 21.3555 21.9844 21.1445Z"
+    fill="currentColor"
+  />
+  <path
+    d="M21.9844 21.1445L22.6915 20.4374L22.6485 20.3945L22.6007 20.357L21.9844 21.1445ZM0.960938 4.69141L1.57725 3.9039L1.56 3.8904L1.54218 3.87767L0.960938 4.69141ZM0.855469 3.91797L1.61473 4.56876L1.63195 4.54866L1.64809 4.52768L0.855469 3.91797ZM1.20703 3.46094L0.499924 2.75383L0.454003 2.79975L0.414407 2.85123L1.20703 3.46094ZM2.01562 3.39062L1.36483 4.14988L1.38176 4.16439L1.39932 4.17813L2.01562 3.39062ZM23.0391 19.8438L23.6792 19.0755L23.6675 19.0657L23.6554 19.0562L23.0391 19.8438ZM23.1094 20.6172L22.35 19.9663L22.3412 19.977L23.1094 20.6172ZM22.7578 21.0391L23.5171 21.6899L23.526 21.6792L22.7578 21.0391ZM22.6007 20.357L1.57725 3.9039L0.344629 5.47891L21.3681 21.932L22.6007 20.357ZM1.54218 3.87767C1.63854 3.9465 1.70545 4.05267 1.72483 4.17668C1.74573 4.31046 1.70893 4.45886 1.61473 4.56876L0.0962121 3.26718C-0.539872 4.00928 -0.28862 5.02777 0.379699 5.50514L1.54218 3.87767ZM1.64809 4.52768L1.99966 4.07065L0.414407 2.85123L0.0628448 3.30826L1.64809 4.52768ZM1.91414 4.16804C1.86884 4.21334 1.80563 4.24975 1.71848 4.26031C1.61748 4.27255 1.47829 4.24713 1.36483 4.14988L2.66642 2.63137C1.91528 1.98754 0.970108 2.28365 0.499924 2.75383L1.91414 4.16804ZM1.39932 4.17813L22.4228 20.6313L23.6554 19.0562L2.63193 2.60312L1.39932 4.17813ZM22.3989 20.612C22.3004 20.5299 22.2525 20.427 22.2401 20.3281C22.2261 20.2157 22.2555 20.0768 22.3501 19.9664L23.8686 21.268C24.4917 20.541 24.2582 19.558 23.6792 19.0755L22.3989 20.612ZM22.3412 19.977L21.9896 20.3989L23.526 21.6792L23.8776 21.2574L22.3412 19.977ZM21.9986 20.3883C22.0356 20.345 22.1037 20.2928 22.2167 20.2752C22.3438 20.2553 22.5389 20.2849 22.6915 20.4374L21.2773 21.8516C22.0528 22.6272 23.0837 22.1955 23.5171 21.6899L21.9986 20.3883Z"
+    fill="white"
+    mask="url(#path-4-outside-1_14618_6810)"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/verifiedBadge.tsx

@@ -0,0 +1,9 @@
+const icon =
+  () => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.37994 13.8338L9.38127 13.8325L10.1112 13.1025H11.1457C11.7097 13.1025 12.2263 12.9686 12.5968 12.5981C12.9673 12.2276 13.1012 11.711 13.1012 11.147V10.1122L13.8299 9.37868C13.8303 9.37826 13.8307 9.37784 13.8311 9.37743C14.2311 8.98007 14.501 8.52092 14.5 7.99773C14.499 7.47504 14.2277 7.01654 13.8312 6.62004L13.1012 5.89006V4.85556C13.1012 4.29165 12.9673 3.77501 12.5968 3.40452C12.2263 3.03403 11.7097 2.90007 11.1457 2.90007H10.1112L9.38127 2.17009C8.98227 1.77109 8.52172 1.499 7.99708 1.5C7.47281 1.50101 7.01425 1.77445 6.61805 2.17598L5.8891 2.90007H4.85426C4.29311 2.90007 3.77575 3.03008 3.40418 3.39965C3.03208 3.76972 2.89876 4.28782 2.89876 4.85556V5.89006L2.17011 6.61871C2.16988 6.61894 2.16965 6.61917 2.16942 6.6194C1.76917 7.01688 1.499 7.47622 1.5 7.99966C1.50101 8.52208 1.77199 8.98037 2.16815 9.37673C2.16836 9.37694 2.16857 9.37715 2.16878 9.37735L2.89876 10.1122V11.147C2.89876 11.711 3.03273 12.2276 3.40321 12.5981C3.7737 12.9686 4.29035 13.1025 4.85426 13.1025H5.88875L6.61741 13.8312C6.61768 13.8315 6.61794 13.8317 6.61821 13.832C7.01578 14.2323 7.47508 14.5023 7.999 14.5013C8.52172 14.5003 8.98117 14.2296 9.37994 13.8338ZM10.1639 13.0499C10.1639 13.0499 10.1639 13.0499 10.1638 13.05C10.1639 13.0499 10.1639 13.0499 10.1639 13.0499Z" fill="#1054DE" stroke="white"/>
+<path d="M6.69076 10.4846C6.80553 10.6045 6.9516 10.6724 7.13419 10.6724C7.32722 10.6724 7.48372 10.6045 7.60371 10.448L10.5303 6.3424C10.6086 6.23285 10.6503 6.10243 10.6503 5.99809C10.6503 5.69551 10.4208 5.47119 10.0973 5.47119C9.88868 5.47119 9.75304 5.54423 9.62783 5.7216L7.11333 9.31077L5.85607 7.90745C5.7413 7.78224 5.61088 7.72486 5.43351 7.72486C5.11007 7.72486 4.88574 7.94918 4.88574 8.26219C4.88574 8.39261 4.93269 8.52303 5.02138 8.61694L6.69076 10.4846Z" fill="white"/>
+</svg>
+
+`;
+
+export default icon;

package/src/v4/assets/icons/video.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  color: string = '#898E9E'
+) => `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.375 4.875C20.6055 4.875 21.625 5.89453 21.625 7.125V18.375C21.625 19.6406 20.6055 20.625 19.375 20.625H5.875C4.60938 20.625 3.625 19.6406 3.625 18.375V7.125C3.625 5.89453 4.60938 4.875 5.875 4.875H19.375ZM12.5547 6.5625L9.74219 9.375H12.0977L14.9102 6.5625H12.5547ZM5.3125 8.21484V9.375H6.47266L9.28516 6.5625H6.92969L5.3125 8.21484ZM19.9375 18.375V11.0625H5.3125V18.375C5.3125 18.6914 5.55859 18.9375 5.875 18.9375H19.375C19.6562 18.9375 19.9375 18.6914 19.9375 18.375ZM19.9375 7.19531V7.125C19.9375 6.84375 19.6562 6.5625 19.375 6.5625H18.1797L15.3672 9.375H17.7227L19.9375 7.19531ZM11.2891 17.8125C11.2188 17.8125 11.1836 17.8125 11.1133 17.7773C11.0078 17.707 10.9375 17.5664 10.9375 17.4258V12.5742C10.9375 12.4336 11.0078 12.3281 11.1133 12.2578C11.2188 12.1875 11.3945 12.1875 11.5 12.2227L15.2266 14.6484C15.3672 14.7188 15.4375 14.8242 15.4375 15C15.4375 15.1406 15.3672 15.2812 15.2617 15.3516L11.5 17.7773C11.4297 17.8125 11.3594 17.8125 11.2891 17.8125Z" fill="${color}"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/warning.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 57 56"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M49.0078 41.457C50.3203 43.7539 48.6797 46.625 45.9727 46.625H10.9453C8.23828 46.625 6.59765 43.7539 7.82812 41.457L25.3828 11.5977C26.1211 10.4492 27.2695 9.875 28.5 9.875C29.6484 9.875 30.7969 10.4492 31.5352 11.5977L49.0078 41.457ZM11.7656 42.6875H45.1523L28.418 14.2227L11.7656 42.6875ZM28.5 34.9766C29.8945 34.9766 31.043 36.125 31.043 37.5195C31.043 38.9141 29.8945 40.0625 28.5 40.0625C27.0234 40.0625 25.875 38.9141 25.875 37.5195C25.875 36.125 27.0234 34.9766 28.5 34.9766ZM26.5312 22.3437C26.5312 21.2773 27.3516 20.375 28.5 20.375C29.5664 20.375 30.4688 21.2773 30.4688 22.3437V30.2187C30.4688 31.3672 29.5664 32.1875 28.5 32.1875C27.3516 32.1875 26.5312 31.3672 26.5312 30.2187V22.3437Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/images/GroupChat.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.62067 14.5858V10.325C8.62067 9.39294 9.3899 8.62067 10.3183 8.62067H17.9575C18.9124 8.62067 19.6552 9.39294 19.6552 10.325V14.5858C19.6552 15.5445 18.9124 16.2902 17.9575 16.2902V17.7548C17.9575 17.9679 17.7188 18.0744 17.5597 17.9413L15.3581 16.2902H10.3183C9.3899 16.2902 8.62067 15.5445 8.62067 14.5858Z" fill="white"/>
+<path d="M17.4319 10.2267V4.35049C17.4319 2.60861 15.9833 1.1888 14.244 1.1888H4.37666C2.59197 1.1888 1.1888 2.61685 1.1888 4.35049V10.2267C1.1888 11.7241 2.18916 12.9411 3.56546 13.2886V14.5972C3.56546 15.605 4.70474 16.0664 5.42824 15.4975L8.28306 13.3884H14.244C15.975 13.3884 17.4319 12.0135 17.4319 10.2267Z" fill="white" stroke="#D9E5FC" stroke-width="1.6224"/>
+</svg>

package/src/v4/assets/images/Option.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4531 2.60938C15.6641 2.60938 15.875 2.43359 15.875 2.1875V1.0625C15.875 0.851562 15.6641 0.640625 15.4531 0.640625H0.546875C0.300781 0.640625 0.125 0.851562 0.125 1.0625V2.1875C0.125 2.43359 0.300781 2.60938 0.546875 2.60938H15.4531ZM15.4531 8.23438C15.6641 8.23438 15.875 8.05859 15.875 7.8125V6.6875C15.875 6.47656 15.6641 6.26562 15.4531 6.26562H0.546875C0.300781 6.26562 0.125 6.47656 0.125 6.6875V7.8125C0.125 8.05859 0.300781 8.23438 0.546875 8.23438H15.4531ZM15.4531 13.8594C15.6641 13.8594 15.875 13.6836 15.875 13.4375V12.3125C15.875 12.1016 15.6641 11.8906 15.4531 11.8906H0.546875C0.300781 11.8906 0.125 12.1016 0.125 12.3125V13.4375C0.125 13.6836 0.300781 13.8594 0.546875 13.8594H15.4531Z" fill="#292B32"/>
+</svg>

package/src/v4/assets/images/Private.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2857 6.85714C15.2143 6.85714 16 7.64286 16 8.57143V16.5714C16 17.5357 15.2143 18.2857 14.2857 18.2857H1.71429C0.75 18.2857 0 17.5357 0 16.5714V8.57143C0 7.64286 0.75 6.85714 1.71429 6.85714H2.85714V5.14286C2.85714 2.32143 5.14286 0 8 0C10.8571 0.0357143 13.1429 2.35714 13.1429 5.21429V6.85714H14.2857ZM4.57143 5.14286V6.85714H11.4286V5.14286C11.4286 3.28571 9.85714 1.71429 8 1.71429C6.10714 1.71429 4.57143 3.28571 4.57143 5.14286ZM8 14.7143C8.53571 14.7143 9 14.2857 9 13.7143V11.4286C9 10.8929 8.53571 10.4286 8 10.4286C7.42857 10.4286 7 10.8929 7 11.4286V13.7143C7 14.2857 7.42857 14.7143 8 14.7143Z" fill="white"/>
+</svg>

package/src/v4/assets/images/Public.svg

@@ -0,0 +1,5 @@
+<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 17.2679V11.3623C11 10.0704 11.976 9 13.1538 9H22.8462C24.0577 9 25 10.0704 25 11.3623V17.2679C25 18.5967 24.0577 19.6302 22.8462 19.6302V21.6602C22.8462 21.9555 22.5433 22.1032 22.3413 21.9186L19.5481 19.6302H13.1538C11.976 19.6302 11 18.5967 11 17.2679Z" fill="white"/>
+<path d="M22.8112 13.4479V5.27082C22.8112 3.03871 20.9795 1.1888 18.7489 1.1888H5.25109C2.9615 1.1888 1.1888 3.04703 1.1888 5.27082V13.4479C1.1888 15.4522 2.56125 17.0833 4.43989 17.4518V19.5296C4.43989 20.6297 5.68963 21.1905 6.51393 20.5256L10.5002 17.5299H18.7489C20.9712 17.5299 22.8112 15.7394 22.8112 13.4479Z" fill="white" stroke="#D9E5FC" stroke-width="1.6224"/>
+<path d="M12.5 6.5C12.9255 6.5 13.3335 6.66318 13.6343 6.95365C13.9352 7.24411 14.1042 7.63807 14.1042 8.04885C14.1042 8.45963 13.9352 8.85359 13.6343 9.14405C13.3335 9.43452 12.9255 9.5977 12.5 9.5977C12.0745 9.5977 11.6665 9.43452 11.3657 9.14405C11.0648 8.85359 10.8958 8.45963 10.8958 8.04885C10.8958 7.63807 11.0648 7.24411 11.3657 6.95365C11.6665 6.66318 12.0745 6.5 12.5 6.5ZM9.29167 7.60632C9.54833 7.60632 9.78667 7.6727 9.99292 7.79218C9.92417 8.425 10.1167 9.05339 10.5108 9.5446C10.2817 9.96943 9.82333 10.2615 9.29167 10.2615C8.92699 10.2615 8.57726 10.1216 8.31939 9.87265C8.06153 9.62368 7.91667 9.28601 7.91667 8.93391C7.91667 8.58181 8.06153 8.24413 8.31939 7.99516C8.57726 7.74619 8.92699 7.60632 9.29167 7.60632ZM15.7083 7.60632C16.073 7.60632 16.4227 7.74619 16.6806 7.99516C16.9385 8.24413 17.0833 8.58181 17.0833 8.93391C17.0833 9.28601 16.9385 9.62368 16.6806 9.87265C16.4227 10.1216 16.073 10.2615 15.7083 10.2615C15.1767 10.2615 14.7183 9.96943 14.4892 9.5446C14.8833 9.05339 15.0758 8.425 15.0071 7.79218C15.2133 7.6727 15.4517 7.60632 15.7083 7.60632ZM9.52083 12.1422C9.52083 11.2262 10.8546 10.4828 12.5 10.4828C14.1454 10.4828 15.4792 11.2262 15.4792 12.1422V12.9167H9.52083V12.1422ZM7 12.9167V12.2529C7 11.6378 7.86625 11.12 9.03958 10.9695C8.76917 11.2705 8.60417 11.6864 8.60417 12.1422V12.9167H7ZM18 12.9167H16.3958V12.1422C16.3958 11.6864 16.2308 11.2705 15.9604 10.9695C17.1337 11.12 18 11.6378 18 12.2529V12.9167Z" fill="#D9E5FC"/>
+</svg>

package/src/v4/assets/images/back.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.62109 15.9141L9.32422 15.2461C9.46484 15.0703 9.46484 14.7891 9.32422 14.6484L2.96094 8.25L9.32422 1.88672C9.46484 1.74609 9.46484 1.46484 9.32422 1.28906L8.62109 0.621094C8.44531 0.445312 8.19922 0.445312 8.02344 0.621094L0.640625 7.96875C0.5 8.14453 0.5 8.39062 0.640625 8.56641L8.02344 15.9141C8.19922 16.0898 8.44531 16.0898 8.62109 15.9141Z" fill="#292B32"/>
+</svg>

package/src/v4/assets/images/comment.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0938 0H2.09375C0.96875 0 0.09375 0.90625 0.09375 2V11C0.09375 12.125 0.96875 13 2.09375 13H5.09375V15.625C5.09375 15.875 5.25 16 5.46875 16C5.53125 16 5.59375 16 5.6875 15.9375L9.59375 13H14.0938C15.1875 13 16.0938 12.125 16.0938 11V2C16.0938 0.90625 15.1875 0 14.0938 0ZM14.5938 11C14.5938 11.2812 14.3438 11.5 14.0938 11.5H9.09375L8.6875 11.8125L6.59375 13.375V11.5H2.09375C1.8125 11.5 1.59375 11.2812 1.59375 11V2C1.59375 1.75 1.8125 1.5 2.09375 1.5H14.0938C14.3438 1.5 14.5938 1.75 14.5938 2V11Z" fill="#898E9E"/>
+</svg>

package/src/v4/assets/images/person.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1254 1.13117C9.38491 0.406896 8.38054 0 7.33327 0C6.28601 0 5.28164 0.406896 4.54111 1.13117C3.80058 1.85545 3.38455 2.83778 3.38455 3.86207C3.38455 4.88635 3.80058 5.86869 4.54111 6.59296C5.28164 7.31724 6.28601 7.72414 7.33327 7.72414C8.38054 7.72414 9.38491 7.31724 10.1254 6.59296C10.866 5.86869 11.282 4.88635 11.282 3.86207C11.282 2.83778 10.866 1.85545 10.1254 1.13117Z" fill="white"/>
+<path d="M7.33327 9.93104C3.28302 9.93104 -6.10352e-05 11.7848 -6.10352e-05 14.069V16H14.6666V14.069C14.6666 11.7848 11.3835 9.93104 7.33327 9.93104Z" fill="white"/>
+</svg>

package/src/v4/assets/index.ts

@@ -0,0 +1,12 @@
+import { Image } from 'react-native';
+
+const defaultAvatar = require('./images/userAvatar.png');
+const defaultCommunityAvatar = require('./images/communityAvatar.png');
+const defaultAdAvatar = require('./images/adAvatar.png');
+
+export const defaultAvatarUri = Image.resolveAssetSource(defaultAvatar).uri;
+export const defaultCommunityAvatarUri = Image.resolveAssetSource(
+  defaultCommunityAvatar
+).uri;
+
+export const defaultAdAvatarUri = Image.resolveAssetSource(defaultAdAvatar).uri;

package/src/v4/component/AdInformation/AdInformation.tsx

@@ -0,0 +1,66 @@
+import React, { FC, memo } from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import { infoIcon } from '../../../svg/svg-xml-list';
+import { SvgXml } from 'react-native-svg';
+import { useStyles } from './styles';
+import { ComponentID, PageID } from '../../enum';
+import { useAmityComponent } from '../../hook';
+
+type AdInformationType = {
+  pageId?: PageID;
+  companyName: string;
+};
+
+const AdInformation: FC<AdInformationType> = ({
+  pageId = PageID.WildCardPage,
+  companyName,
+}) => {
+  const componentId = ComponentID.post_content;
+
+  const { accessibilityId, themeStyles } = useAmityComponent({
+    pageId,
+    componentId: componentId,
+  });
+  const styles = useStyles(themeStyles);
+
+  return (
+    <View testID={accessibilityId} style={styles.container}>
+      <Text style={styles.header}>About this advertisement</Text>
+      <View style={styles.divider} />
+      <View style={styles.content}>
+        <View style={styles.contentItem}>
+          <Text style={styles.contentTitle}>Why this advertisement?</Text>
+          <View style={styles.contentDetail}>
+            <SvgXml
+              style={styles.infoIcon}
+              xml={infoIcon()}
+              width="16"
+              height="16"
+            />
+            <Text style={styles.contentDetailText}>
+              You're seeing this advertisement because it was displayed to all
+              users in the system.
+            </Text>
+          </View>
+        </View>
+        <View style={styles.contentItem}>
+          <Text style={styles.contentTitle}>About this advertiser</Text>
+          <View style={styles.contentDetail}>
+            <SvgXml
+              style={styles.infoIcon}
+              xml={infoIcon()}
+              width="16"
+              height="16"
+            />
+            <Text style={styles.contentDetailText}>
+              Advertiser name: {companyName}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default memo(AdInformation);

package/src/v4/component/AdInformation/styles.ts

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = (theme: MyMD3Theme) => {
+  const styles = StyleSheet.create({
+    container: {
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      backgroundColor: theme.colors.background,
+      width: '100%',
+    },
+    header: {
+      fontSize: 17,
+      lineHeight: 22,
+      textAlign: 'center',
+      color: theme.colors.base,
+      fontWeight: '600',
+      paddingVertical: 13,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: theme.colors.baseShade4,
+    },
+    content: {
+      paddingHorizontal: 16,
+    },
+    contentItem: {
+      marginTop: 24,
+      marginBottom: 8,
+    },
+    contentTitle: {
+      fontWeight: '600',
+      fontSize: 15,
+      lineHeight: 20,
+      color: theme.colors.base,
+      marginBottom: 8,
+    },
+    contentDetail: {
+      flexDirection: 'row',
+      padding: 8,
+      gap: 8,
+      backgroundColor: theme.colors.baseShade4,
+      borderRadius: 8,
+    },
+    infoIcon: {
+      width: 16,
+      height: 16,
+      color: theme.colors.baseShade1,
+    },
+    contentDetailText: {
+      flex: 1,
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.colors.baseShade1,
+    },
+  });
+
+  return styles;
+};

package/src/v4/component/Avatar/Avatar.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import {
+  Image,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  TouchableOpacity,
+} from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { SvgXml, XmlProps } from 'react-native-svg';
+import { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
+import { category } from '../../../v4/assets/icons';
+import { Typography } from '../Typography/Typography';
+import { useStyles } from './styles';
+import ModeratorBadge from '../../../v4/elements/ModeratorBadge';
+import { isModerator } from '../../../v4/utils/permissions';
+import { RootStackParamList } from '../../../v4/routes/RouteParamList';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from '@react-navigation/native';
+
+type AvatarProps = {
+  uri?: string;
+  imageProps: Omit<ImageProps, 'source'>;
+  iconProps?: XmlProps;
+  userAvatarProps?: {
+    userName?: string;
+    userId?: string;
+    style?: StyleProp<ImageStyle>;
+    roles?: string[];
+    shouldRedirectToUserProfile?: boolean;
+  };
+};
+
+function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
+  const { styles } = useStyles();
+  const [imageError, setImageError] = useState(false);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  return uri && !imageError ? (
+    <TouchableOpacity
+      style={imageProps.style}
+      activeOpacity={0.7}
+      onPress={() => {
+        if (userAvatarProps?.shouldRedirectToUserProfile) {
+          navigation.navigate('UserProfile', {
+            userId: userAvatarProps?.userId,
+          });
+        }
+      }}
+    >
+      <Image
+        source={{ uri }}
+        {...imageProps}
+        onError={() => setImageError(true)}
+      />
+    </TouchableOpacity>
+  ) : iconProps ? (
+    <SvgXml {...iconProps} />
+  ) : (
+    <TouchableOpacity
+      style={[styles.defaultUserAvatar, userAvatarProps.style]}
+      activeOpacity={0.7}
+      onPress={() => {
+        if (userAvatarProps?.shouldRedirectToUserProfile) {
+          navigation.navigate('UserProfile', {
+            userId: userAvatarProps?.userId,
+          });
+        }
+      }}
+    >
+      <Typography.Body style={styles.firstChar}>
+        {userAvatarProps.userName?.trim()?.charAt(0).toUpperCase()}
+      </Typography.Body>
+      {userAvatarProps.roles && isModerator(userAvatarProps.roles) && (
+        <ModeratorBadge style={styles.moderatorBadge} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+type CategoryAvatarProps = {
+  uri?: string;
+  imageStyle?: StyleProp<ImageStyle>;
+  iconProps?: Pick<XmlProps, 'width' | 'height'>;
+};
+
+function CategoryAvatar({
+  uri,
+  imageStyle,
+  iconProps: $iconProps,
+}: CategoryAvatarProps) {
+  const theme = useTheme<MyMD3Theme>();
+  return (
+    <Avatar
+      uri={uri}
+      imageProps={{
+        style: imageStyle,
+        accessibilityLabel: 'Category Avatar',
+      }}
+      iconProps={{
+        xml: category(),
+        color: theme.colors.primaryShade2,
+        ...$iconProps,
+      }}
+    />
+  );
+}
+
+type UserAvatarProps = {
+  uri?: string;
+  userId?: string;
+  roles?: string[];
+  userName?: string;
+  imageStyle?: StyleProp<ImageStyle>;
+  shouldRedirectToUserProfile?: boolean;
+};
+
+function UserAvatar({
+  uri,
+  roles,
+  userId,
+  userName,
+  imageStyle,
+  shouldRedirectToUserProfile,
+}: UserAvatarProps) {
+  return (
+    <Avatar
+      uri={uri}
+      userAvatarProps={{
+        roles,
+        userId,
+        userName,
+        style: imageStyle,
+        shouldRedirectToUserProfile,
+      }}
+      imageProps={{
+        style: imageStyle,
+        accessibilityLabel: `${userName ?? 'User'} Avatar`,
+      }}
+    />
+  );
+}
+
+Avatar.Category = CategoryAvatar;
+
+Avatar.User = UserAvatar;
+
+export default Avatar;

package/src/v4/component/Avatar/index.tsx

@@ -0,0 +1 @@
+export { default } from './Avatar';

package/src/v4/component/Avatar/styles.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    defaultUserAvatar: {
+      borderRadius: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: theme.colors.primaryShade2,
+      position: 'relative',
+    },
+    firstChar: {
+      color: theme.colors.background,
+    },
+    moderatorBadge: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/v4/component/BottomSheetComponent/BottomSheetComponent.tsx

@@ -0,0 +1,30 @@
+import { useStyles } from './styles';
+import React, { memo, useEffect, useRef } from 'react';
+import { useBottomSheet } from '../../../redux/slices/bottomSheetSlice';
+import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
+
+const BottomSheetComponent = () => {
+  const sheetRef = useRef<BottomSheetMethods>(null);
+  const { closeBottomSheet, content, open, height } = useBottomSheet();
+
+  const { styles } = useStyles();
+
+  useEffect(() => {
+    open ? sheetRef.current.open() : sheetRef.current.close();
+  }, [open]);
+
+  return (
+    <BottomSheet
+      ref={sheetRef}
+      height={height}
+      closeOnDragDown
+      closeOnBackdropPress
+      style={styles.container}
+      onClose={closeBottomSheet}
+    >
+      {content}
+    </BottomSheet>
+  );
+};
+
+export default memo(BottomSheetComponent);

package/src/v4/component/BottomSheetComponent/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: theme.colors.background,
+    },
+  });
+
+  return {
+    theme,
+    styles,
+  };
+};