// Social app UI
Social Media Reels App UI Design in Expo
This social media app UI covers the three screens every social product needs: full-screen reels, a home feed with stories, and a creator profile with a video grid.
- Screens
- 3
- Built with
- Expo SDK 58
- Fonts
- Urbanist
- License
- Free (MIT)
Frindly Social app screens
Reels
A full-screen forest road, creator row with a follow button, side action rail and glass navigation.
Home feed
A stories row with live and add badges, then post cards with video, captions and engagement counts.
Creator profile
An avatar, bio, follower stats, content tabs and a three column grid of reels with view counts.
Copy the Frindly Social kit
Use the artifact as a design brief, the skill to generate the UI with an AI agent, or the code to run it right away.
Design artifact
The full design: tokens, screens and source
# Frindly Social: design artifact
This social media app UI covers the three screens every social product needs: full-screen reels, a home feed with stories, and a creator profile with a video grid.
- Type: Social mobile app UI
- Screens: 3
- Artboard: 390 × 844
- Target: Expo SDK 58, Expo Router, TypeScript, expo-blur, expo-image, expo-linear-gradient, react-native-svg
- Live page: https://developermill.com/app-designs/social-media-reels-app-ui-design
## Design direction
Fresh green accents on clean white and full-screen nature video frames, with frosted glass navigation on every screen.
- Full-screen reels with a side action rail
- Stories row with live and add badges
- Feed cards with engagement pills
- Three column reels grid on profiles
## Foundations
### Colour
| Token | Hex |
| --- | --- |
| Frindly green | `#62D61C` |
| Deep green | `#10200A` |
| Off white | `#F1F2EF` |
| Ink | `#161A14` |
| Like red | `#F0384B` |
| Moss grey | `#626860` |
### Typography
- Typefaces: Urbanist
- Common sizes (px): 9, 11, 12, 13, 14, 17, 19, 22
### Shape and depth
- Common corner radii (px): 6, 9, 12, 14, 18, 22
## Screens
### 1. Reels
A full-screen forest road, creator row with a follow button, side action rail and glass navigation.
Preview: https://developermill.com/app-designs/social-media-reels-app-ui-design/reels.webp
Copy on this screen:
- Reels
- Sienna
- Bangladesh’s First Love
- Follow
- 2.6K
- 1,000
### 2. Home feed
A stories row with live and add badges, then post cards with video, captions and engagement counts.
Preview: https://developermill.com/app-designs/social-media-reels-app-ui-design/feed.webp
Copy on this screen:
- Frindly
- LIVE
- Sienna
- 1h ago
- More fresh new travel content inspo for all you travel bloggers or creators working but as …
- More...
- 26K
- 1K
- 381
- Esther Howard
- 4h ago
### 3. Creator profile
An avatar, bio, follower stats, content tabs and a three column grid of reels with view counts.
Preview: https://developermill.com/app-designs/social-media-reels-app-ui-design/profile.webp
Copy on this screen:
- Brooklyn Simmons
- @Broo65dx
- Follow
- Top UI/UX Inspiration
- Best resources and guide
- 400
- Post
- 128.6K
- Followers
- 600
- Following
- 4.8M
- Likes
## Full source
The original artboards as HTML. Image URLs point at the hosted demo assets.
### Reels (Main)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frindly Reels</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body{margin:0}
button{font:inherit;border:0;padding:0;margin:0;cursor:pointer;background:none;color:inherit}
a{color:#237A0A}a:hover{color:#175607}
</style>
</helmet>
<div style="width: 390px; height: 844px; position: relative; overflow: hidden; background: #2F5A2C; font-family: 'Urbanist', system-ui, sans-serif; color: #FFFFFF">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/20eb923053.jpg" alt="Aerial view of a road through misty green forest" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block">
<div style="position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0))"></div>
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 260px; background: linear-gradient(0deg, rgba(0,0,0,0.42), rgba(0,0,0,0))"></div>
<header style="position: absolute; top: 56px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between">
<h1 style="margin: 0; font-size: 22px; font-weight: 700">Reels</h1>
<button aria-label="Open camera" style="width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.22); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"></path><circle cx="12" cy="13.5" r="3.5"></circle></svg>
</button>
</header>
<div style="position: absolute; top: 122px; left: 20px; right: 20px; display: flex; align-items: center; gap: 12px">
<div style="width: 48px; height: 48px; border-radius: 999px; padding: 2px; background: {{accent}}; box-sizing: border-box; flex-shrink: 0">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/8c1946dbf2.jpg" alt="Sienna" style="width: 100%; height: 100%; border-radius: 999px; border: 2px solid #FFFFFF; box-sizing: border-box; object-fit: cover; display: block">
</div>
<div style="flex-grow: 1; display: flex; flex-direction: column; gap: 3px">
<span style="font-size: 17px; font-weight: 700">Sienna</span>
<span style="display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.92)"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z" fill="#FF8A1F"></path></svg>Bangladesh’s First Love</span>
</div>
<button style="height: 32px; padding: 0 18px; border-radius: 999px; background: {{accent}}; color: #10200A; font-size: 14px; font-weight: 700">Follow</button>
</div>
<button aria-label="Play reel" style="position: absolute; top: 380px; left: 169px; width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,0.3); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"></path></svg>
</button>
<div style="position: absolute; right: 16px; bottom: 132px; display: flex; flex-direction: column; align-items: center; gap: 14px">
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
<button aria-label="Like" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.24); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #F0384B">
<svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-9-9.2C1.8 7.7 3.8 4.5 7 4.5c2 0 3.3 1.1 5 3 1.7-1.9 3-3 5-3 3.2 0 5.2 3.2 4 6.3C19 15.6 12 20 12 20z" fill="currentColor"></path></svg>
</button>
<span style="font-size: 12px; font-weight: 600">2.6K</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
<button aria-label="Comments" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.24); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"></path></svg>
</button>
<span style="font-size: 12px; font-weight: 600">1,000</span>
</div>
<button aria-label="Share" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.24); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 3 10 14"></path><path d="M21 3 14 21l-4-7-7-4z"></path></svg>
</button>
<button aria-label="More options" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.24); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.8" fill="currentColor"></circle><circle cx="12" cy="12" r="1.8" fill="currentColor"></circle><circle cx="12" cy="19" r="1.8" fill="currentColor"></circle></svg>
</button>
<button aria-label="Original audio" style="width: 40px; height: 40px; border-radius: 12px; border: 2px solid #FFFFFF; box-sizing: border-box; overflow: hidden"><img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/8c1946dbf2.jpg" alt="" style="width: 100%; height: 100%; object-fit: cover; display: block"></button>
</div>
<button aria-label="Mute" style="position: absolute; left: 16px; bottom: 130px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #FFFFFF">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z"></path><path d="M17 9a4 4 0 0 1 0 6"></path></svg>
</button>
<nav aria-label="Main" style="position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 10px">
<div style="display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px)">
<button aria-label="Home" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"></path></svg></button>
<button aria-label="Gallery" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><circle cx="9" cy="9" r="1.6"></circle><path d="m21 15-4.5-4.5L7 20"></path></svg></button>
<button aria-label="Reels" aria-current="page" style="width: 44px; height: 44px; border-radius: 999px; background: {{accent}}; display: flex; align-items: center; justify-content: center; color: #10200A"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><path d="M3 8h18M8 3l3 5M14 3l3 5"></path><path d="m10 12 5 3-5 3z"></path></svg></button>
<button aria-label="Profile" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></button>
</div>
<button aria-label="Search" style="width: 56px; height: 56px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
</nav>
<div style="position: absolute; left: 0; bottom: 0; width: 34%; height: 4px; background: {{accent}}"></div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#62D61C","options":["#62D61C","#2EC4B6","#FF8A1F"]},"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
renderVals() {
return { accent: this.props.accent ?? '#62D61C' };
}
}
</script>
</body>
</html>
```
### Home feed (Feed)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frindly Home Feed</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body{margin:0}
button{font:inherit;border:0;padding:0;margin:0;cursor:pointer;background:none;color:inherit}
a{color:#237A0A;font-weight:600;text-decoration:none}a:hover{color:#175607}
</style>
</helmet>
<div style="width: 390px; height: 844px; position: relative; overflow: hidden; background: #F1F2EF; font-family: 'Urbanist', system-ui, sans-serif; color: #161A14">
<div style="background: #FFFFFF; padding: 56px 16px 16px; display: flex; flex-direction: column; gap: 16px">
<header style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center; gap: 8px">
<div style="width: 30px; height: 30px; border-radius: 9px; background: {{accent}}; display: flex; align-items: center; justify-content: center">
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6v6h6v6h-6v6H9v-6H3V9h6z" fill="#10200A"></path></svg>
</div>
<span style="font-size: 23px; font-weight: 800; letter-spacing: -0.01em">Frindly</span>
</div>
<div style="display: flex; gap: 10px">
<button aria-label="Create post" style="width: 44px; height: 44px; border-radius: 999px; background: #F1F2EF; display: flex; align-items: center; justify-content: center; color: #161A14">
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="#161A14"></circle><path d="M12 7.5v9M7.5 12h9" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path></svg>
</button>
<button aria-label="Notifications" style="width: 44px; height: 44px; border-radius: 999px; background: #F1F2EF; display: flex; align-items: center; justify-content: center; color: #161A14; position: relative">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 16v-5a6 6 0 0 1 12 0v5l2 2H4z" fill="#161A14"></path><path d="M10 20a2 2 0 0 0 4 0" fill="#161A14"></path></svg>
<span style="position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 999px; background: #F0384B; border: 2px solid #F1F2EF"></span>
</button>
</div>
</header>
<div style="display: flex; gap: 14px; overflow: hidden; margin-right: -16px">
<sc-for list="{{stories}}" as="s" hint-placeholder-count="6">
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 56px">
<div style="position: relative; width: 56px; height: 56px; border-radius: 999px; padding: 2px; background: {{accent}}; box-sizing: border-box">
<img src="{{s.img}}" alt="{{s.name}}" style="width: 100%; height: 100%; border-radius: 999px; border: 2px solid #FFFFFF; box-sizing: border-box; object-fit: cover; display: block">
<sc-if value="{{s.live}}" hint-placeholder-val="{{ false }}">
<span style="position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: #F0384B; border: 2px solid #FFFFFF; font-size: 9px; font-weight: 800; color: #FFFFFF; letter-spacing: 0.04em">LIVE</span>
</sc-if>
<sc-if value="{{s.me}}" hint-placeholder-val="{{ false }}">
<span style="position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 999px; background: {{accent}}; border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center"><svg width="10" height="10" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke="#10200A" stroke-width="3.5" stroke-linecap="round"></path></svg></span>
</sc-if>
</div>
<span style="font-size: 12px; font-weight: 600; color: #2A2E27">{{s.name}}</span>
</div>
</sc-for>
</div>
</div>
<div style="padding: 12px 12px 0; display: flex; flex-direction: column; gap: 12px">
<article style="background: #FFFFFF; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; align-items: center; gap: 10px">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/8c1946dbf2.jpg" alt="Sienna" style="width: 38px; height: 38px; border-radius: 999px; object-fit: cover; display: block">
<div style="flex-grow: 1; display: flex; flex-direction: column; gap: 2px">
<span style="font-size: 14px; font-weight: 700">Sienna</span>
<span style="display: flex; align-items: center; gap: 4px; font-size: 11px; color: #626860">1h ago <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18"></path></svg></span>
</div>
<button aria-label="Post options" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #626860"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.8" fill="currentColor"></circle><circle cx="12" cy="12" r="1.8" fill="currentColor"></circle><circle cx="12" cy="19" r="1.8" fill="currentColor"></circle></svg></button>
</div>
<p style="margin: 0; font-size: 13px; line-height: 1.45; color: #2A2E27">More fresh new travel content inspo for all you travel bloggers or creators working but as … <a href="#">More...</a></p>
<div style="position: relative; height: 196px; border-radius: 18px; overflow: hidden; background: #6E9A63; display: flex; align-items: center; justify-content: center">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/0791cc21ff.jpg" alt="Road winding along a green ridge into the clouds" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block">
<button aria-label="Play video" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.32); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"></path></svg></button>
<button aria-label="Mute" style="position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z"></path><path d="M17 9a4 4 0 0 1 0 6"></path></svg></button>
</div>
<div style="display: flex; align-items: center; gap: 8px">
<button aria-label="Like, 26K likes" style="height: 32px; padding: 0 12px; border-radius: 999px; background: #F1F2EF; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #161A14"><svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-9-9.2C1.8 7.7 3.8 4.5 7 4.5c2 0 3.3 1.1 5 3 1.7-1.9 3-3 5-3 3.2 0 5.2 3.2 4 6.3C19 15.6 12 20 12 20z" fill="#F0384B"></path></svg>26K</button>
<button aria-label="Comments, 1K" style="height: 32px; padding: 0 12px; border-radius: 999px; background: #F1F2EF; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #161A14"><svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z" fill="#161A14"></path></svg>1K</button>
<button aria-label="Share, 381 shares" style="margin-left: auto; height: 32px; padding: 0 4px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #161A14">381<svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 3 3 10l7 4 4 7z" fill="#161A14"></path></svg></button>
</div>
</article>
<article style="background: #FFFFFF; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; align-items: center; gap: 10px">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/285c9fc0a5.jpg" alt="Esther Howard" style="width: 38px; height: 38px; border-radius: 999px; object-fit: cover; display: block">
<div style="flex-grow: 1; display: flex; flex-direction: column; gap: 2px">
<span style="font-size: 14px; font-weight: 700">Esther Howard</span>
<span style="display: flex; align-items: center; gap: 4px; font-size: 11px; color: #626860">4h ago <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18"></path></svg></span>
</div>
<button aria-label="Post options" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #626860"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="5" r="1.8" fill="currentColor"></circle><circle cx="12" cy="12" r="1.8" fill="currentColor"></circle><circle cx="12" cy="19" r="1.8" fill="currentColor"></circle></svg></button>
</div>
<p style="margin: 0; font-size: 13px; line-height: 1.45; color: #2A2E27">More fresh new travel content inspo for all you travel bloggers or creators working but as … <a href="#">More...</a></p>
<div style="position: relative; height: 196px; border-radius: 18px; overflow: hidden; background: #557F4C">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/45a7c42aa5.jpg" alt="Road through rainforest disappearing into clouds" style="width: 100%; height: 100%; object-fit: cover; display: block">
</div>
</article>
</div>
<nav aria-label="Main" style="position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 10px">
<div style="display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px)">
<button aria-label="Home" aria-current="page" style="width: 44px; height: 44px; border-radius: 999px; background: {{accent}}; display: flex; align-items: center; justify-content: center; color: #10200A"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"></path></svg></button>
<button aria-label="Gallery" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><circle cx="9" cy="9" r="1.6"></circle><path d="m21 15-4.5-4.5L7 20"></path></svg></button>
<button aria-label="Reels" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><path d="M3 8h18M8 3l3 5M14 3l3 5"></path><path d="m10 12 5 3-5 3z"></path></svg></button>
<button aria-label="Profile" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></button>
</div>
<button aria-label="Search" style="width: 56px; height: 56px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
</nav>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#62D61C","options":["#62D61C","#2EC4B6","#FF8A1F"]},"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
renderVals() {
return {
accent: this.props.accent ?? '#62D61C',
stories: [
{ name: 'Me', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/5e10a900f8.jpg', me: true, live: false },
{ name: 'Haris', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/2c59778199.jpg', me: false, live: true },
{ name: 'Abdullah', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/8c4d711d8f.jpg', me: false, live: false },
{ name: 'Sienna', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/8c1946dbf2.jpg', me: false, live: false },
{ name: 'Alex', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/16d174176c.jpg', me: false, live: false },
{ name: 'Joe', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/edbf36e0ac.jpg', me: false, live: false }
]
};
}
}
</script>
</body>
</html>
```
### Creator profile (Profile)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frindly Profile</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body{margin:0}
button{font:inherit;border:0;padding:0;margin:0;cursor:pointer;background:none;color:inherit}
a{color:#237A0A}a:hover{color:#175607}
</style>
</helmet>
<div style="width: 390px; height: 844px; position: relative; overflow: hidden; background: #F1F2EF; font-family: 'Urbanist', system-ui, sans-serif; color: #161A14">
<div style="background: #FFFFFF; padding: 56px 16px 0; display: flex; flex-direction: column; gap: 14px">
<div style="display: flex; align-items: center; gap: 12px">
<div style="width: 54px; height: 54px; border-radius: 999px; padding: 2px; background: {{accent}}; box-sizing: border-box; flex-shrink: 0">
<img src="https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/1111e64415.jpg" alt="Brooklyn Simmons" style="width: 100%; height: 100%; border-radius: 999px; border: 2px solid #FFFFFF; box-sizing: border-box; object-fit: cover; display: block">
</div>
<div style="flex-grow: 1; display: flex; flex-direction: column; gap: 2px">
<h1 style="margin: 0; font-size: 17px; font-weight: 700">Brooklyn Simmons</h1>
<span style="font-size: 12px; color: #626860">@Broo65dx</span>
</div>
<button style="height: 34px; padding: 0 20px; border-radius: 999px; background: {{accent}}; color: #10200A; font-size: 14px; font-weight: 700">Follow</button>
</div>
<div style="display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #2A2E27">
<span style="display: flex; align-items: center; gap: 6px"><svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z" fill="#FF7A12"></path></svg>Top UI/UX Inspiration</span>
<span style="display: flex; align-items: center; gap: 6px"><svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z" fill="#FF7A12"></path></svg>Best resources and guide</span>
</div>
<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px 0">
<div style="display: flex; flex-direction: column; align-items: center; gap: 2px"><span style="font-size: 19px; font-weight: 800">400</span><span style="font-size: 12px; color: #626860">Post</span></div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 2px"><span style="font-size: 19px; font-weight: 800">128.6K</span><span style="font-size: 12px; color: #626860">Followers</span></div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 2px"><span style="font-size: 19px; font-weight: 800">600</span><span style="font-size: 12px; color: #626860">Following</span></div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 2px"><span style="font-size: 19px; font-weight: 800">4.8M</span><span style="font-size: 12px; color: #626860">Likes</span></div>
</div>
<div role="tablist" aria-label="Profile content" style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0">
<button role="tab" aria-selected="false" aria-label="Posts" style="height: 46px; display: flex; align-items: center; justify-content: center; color: #8A9086; border-bottom: 3px solid transparent"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"></rect><rect x="14" y="3" width="7" height="7" rx="1.5"></rect><rect x="3" y="14" width="7" height="7" rx="1.5"></rect><rect x="14" y="14" width="7" height="7" rx="1.5"></rect></svg></button>
<button role="tab" aria-selected="true" aria-label="Reels" style="height: 46px; display: flex; align-items: center; justify-content: center; color: #161A14; border-bottom: 3px solid {{accent}}"><svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="#161A14"></rect><path d="M3 8h18M8 3l3 5M14 3l3 5" stroke="#FFFFFF" stroke-width="1.6"></path><path d="m10 12 5 3-5 3z" fill="#FFFFFF"></path></svg></button>
<button role="tab" aria-selected="false" aria-label="Saved" style="height: 46px; display: flex; align-items: center; justify-content: center; color: #8A9086; border-bottom: 3px solid transparent"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"></rect><path d="M8 8h8M8 12h8M8 16h5"></path></svg></button>
</div>
</div>
<div style="padding: 10px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px">
<sc-for list="{{tiles}}" as="t" hint-placeholder-count="9">
<div style="position: relative; height: 152px; border-radius: 14px; overflow: hidden; background: {{t.tone}}">
<img src="{{t.img}}" alt="{{t.label}}" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block">
<div style="position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0))"></div>
<span style="position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #FFFFFF"><span style="width: 16px; height: 16px; border-radius: 999px; background: {{accent}}; display: flex; align-items: center; justify-content: center"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#10200A" stroke-width="2.6" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg></span>{{t.views}}</span>
</div>
</sc-for>
</div>
<nav aria-label="Main" style="position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 10px">
<div style="display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px)">
<button aria-label="Home" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"></path></svg></button>
<button aria-label="Gallery" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><circle cx="9" cy="9" r="1.6"></circle><path d="m21 15-4.5-4.5L7 20"></path></svg></button>
<button aria-label="Reels" style="width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4"></rect><path d="M3 8h18M8 3l3 5M14 3l3 5"></path><path d="m10 12 5 3-5 3z"></path></svg></button>
<button aria-label="Profile" aria-current="page" style="width: 44px; height: 44px; border-radius: 999px; background: {{accent}}; display: flex; align-items: center; justify-content: center; color: #10200A"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></button>
</div>
<button aria-label="Search" style="width: 56px; height: 56px; border-radius: 999px; background: rgba(28,36,26,0.42); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
</nav>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#62D61C","options":["#62D61C","#2EC4B6","#FF8A1F"]},"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
renderVals() {
return {
accent: this.props.accent ?? '#62D61C',
tiles: [
{ label: 'Lakeside alpine village', views: '260K', tone: '#4E6E86', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/7d07382419.jpg' },
{ label: 'Forest road, aerial', views: '1.2M', tone: '#4F7A45', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/7acbb3bce1.jpg' },
{ label: 'Snowy mountain town', views: '3.2M', tone: '#6F7F8C', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/3a97d9868e.jpg' },
{ label: 'Peaks above the clouds', views: '11K', tone: '#5B6E58', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/e13755bb9e.jpg' },
{ label: 'Green ridge road', views: '200K', tone: '#6E9A63', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/6faec5afbd.jpg' },
{ label: 'Fjord with chapel', views: '232K', tone: '#3F7287', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/9acd8c1b02.jpg' },
{ label: 'Misty forest road', views: '98K', tone: '#557F4C', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/bed37d7825.jpg' },
{ label: 'Tea hills road in fog', views: '45K', tone: '#628A57', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/5d20b6d9d7.jpg' },
{ label: 'Jungle highway', views: '1.1M', tone: '#4A7341', img: 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets/e6b8997303.jpg' }
]
};
}
}
</script>
</body>
</html>
```SKILL.md
Save as .claude/skills/social-media-reels-app-ui/SKILL.md
--- name: social-media-reels-app-ui description: Build the Frindly Social mobile app UI in Expo React Native. Use when asked to create a social media app UI or a new screen in this visual style. --- # Frindly Social app UI Build this social app UI in an Expo Router project with TypeScript. Reference: https://developermill.com/app-designs/social-media-reels-app-ui-design ## Visual direction Fresh green accents on clean white and full-screen nature video frames, with frosted glass navigation on every screen. Keep these signature details: - Full-screen reels with a side action rail - Stories row with live and add badges - Feed cards with engagement pills - Three column reels grid on profiles ## Set up ```bash npx expo install expo-blur expo-image expo-linear-gradient react-native-svg @expo-google-fonts/urbanist expo-font ``` ## Tokens | Name | Hex | | --- | --- | | Frindly green | `#62D61C` | | Deep green | `#10200A` | | Off white | `#F1F2EF` | | Ink | `#161A14` | | Like red | `#F0384B` | | Moss grey | `#626860` | - Typefaces: Urbanist - Text sizes (px): 9, 11, 12, 13, 14, 17, 19, 22 - Corner radii (px): 6, 9, 12, 14, 18, 22 Define these once and reuse them. Do not add new colours. ## Screens 1. **Reels.** A full-screen forest road, creator row with a follow button, side action rail and glass navigation. 2. **Home feed.** A stories row with live and add badges, then post cards with video, captions and engagement counts. 3. **Creator profile.** An avatar, bio, follower stats, content tabs and a three column grid of reels with view counts. ## Build rules - Draw each screen on a 390 × 844 artboard and scale it to the device width. - Load each custom font weight by family name with expo-font. Do not set fontWeight with custom fonts. - Draw icons, charts and illustrations with react-native-svg. - Use Pressable with an accessibilityLabel for controls, with at least a 44px target. - Navigate with router.navigate and keep sample data as constants at the top of the file. - Use expo-image with contentFit for photos. ## Done when - All routes are linked and reachable. - Colours, type and radii match the tokens above. - `npx tsc --noEmit` and `npx expo lint` pass. - The layout holds up on small and large phones.
Set up the project
npx create-expo-app@latest social-media-reels-app --template default cd social-media-reels-app rm -rf src npx expo install expo-blur expo-image expo-linear-gradient react-native-svg @expo-google-fonts/urbanist expo-font
src/app/_layout.tsx
import {
Urbanist_400Regular,
Urbanist_500Medium,
Urbanist_600SemiBold,
Urbanist_700Bold,
Urbanist_800ExtraBold,
} from '@expo-google-fonts/urbanist';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
export default function RootLayout() {
const [fontsLoaded] = useFonts({
Urbanist_400Regular,
Urbanist_500Medium,
Urbanist_600SemiBold,
Urbanist_700Bold,
Urbanist_800ExtraBold,
});
if (!fontsLoaded) return null;
return <Stack screenOptions={{ headerShown: false }} />;
}src/app/index.tsx
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';
import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';
const accent = '#62D61C';
export default function MainScreen() {
return (
<Screen background="#2F5A2C" statusBar="light">
<View style={{ flex: 1 }}>
<Image
source={{ uri: asset('20eb923053.jpg') }}
contentFit="cover"
accessibilityLabel="Aerial view of a road through misty green forest"
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 220 }}>
<LinearGradient
colors={['rgba(0,0,0,0.38)', 'rgba(0,0,0,0)']}
locations={[0, 1]}
start={{ x: 0.5, y: 0 }}
end={{ x: 0.5, y: 1 }}
style={StyleSheet.absoluteFill}
/>
</View>
<View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 260 }}>
<LinearGradient
colors={['rgba(0,0,0,0.42)', 'rgba(0,0,0,0)']}
locations={[0, 1]}
start={{ x: 0.5, y: 1 }}
end={{ x: 0.5, y: 0 }}
style={StyleSheet.absoluteFill}
/>
</View>
<View
style={{
position: 'absolute',
top: 56,
left: 20,
right: 20,
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
}}>
<Text
style={{
margin: 0,
flexShrink: 1,
fontFamily: 'Urbanist_700Bold',
fontSize: 22,
color: '#FFFFFF',
}}>
Reels
</Text>
<Pressable
accessibilityRole="button"
accessibilityLabel="Open camera"
style={{
width: 40,
height: 40,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.22)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Path d="M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" />
<Circle cx="12" cy="13.5" r="3.5" />
</Svg>
</Pressable>
</View>
<View
style={{
position: 'absolute',
top: 122,
left: 20,
right: 20,
alignItems: 'center',
gap: 12,
flexDirection: 'row',
}}>
<View
style={{
width: 48,
height: 48,
borderRadius: 999,
padding: 2,
backgroundColor: accent,
flexShrink: 0,
}}>
<Image
source={{ uri: asset('8c1946dbf2.jpg') }}
contentFit="cover"
accessibilityLabel="Sienna"
style={{
width: '100%',
height: '100%',
borderRadius: 999,
borderWidth: 2,
borderColor: '#FFFFFF',
}}
/>
</View>
<View style={{ flexGrow: 1, gap: 3, flexShrink: 1 }}>
<Text style={{ fontFamily: 'Urbanist_700Bold', fontSize: 17, color: '#FFFFFF' }}>
Sienna
</Text>
<View style={{ alignItems: 'center', gap: 4, flexDirection: 'row' }}>
<Svg width="12" height="12" viewBox="0 0 24 24">
<Path
d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z"
fill="#FF8A1F"
/>
</Svg>
<Text
style={{
fontFamily: 'Urbanist_500Medium',
fontSize: 12,
color: 'rgba(255,255,255,0.92)',
flexShrink: 1,
}}>
Bangladesh’s First Love
</Text>
</View>
</View>
<Pressable
accessibilityRole="button"
style={{
height: 32,
paddingVertical: 0,
paddingHorizontal: 18,
borderRadius: 999,
backgroundColor: accent,
flexShrink: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 14,
color: '#10200A',
textAlign: 'center',
}}>
Follow
</Text>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Play reel"
style={{
position: 'absolute',
top: 380,
left: 169,
width: 52,
height: 52,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.3)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg width="22" height="22" viewBox="0 0 24 24" style={{ position: 'relative' }}>
<Path d="M8 5v14l11-7z" fill="#FFFFFF" />
</Svg>
</Pressable>
<View
style={{ position: 'absolute', right: 16, bottom: 132, alignItems: 'center', gap: 14 }}>
<View style={{ alignItems: 'center', gap: 5 }}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Like"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.24)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg width="22" height="22" viewBox="0 0 24 24" style={{ position: 'relative' }}>
<Path
d="M12 20s-7-4.4-9-9.2C1.8 7.7 3.8 4.5 7 4.5c2 0 3.3 1.1 5 3 1.7-1.9 3-3 5-3 3.2 0 5.2 3.2 4 6.3C19 15.6 12 20 12 20z"
fill="#F0384B"
/>
</Svg>
</Pressable>
<Text style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
2.6K
</Text>
</View>
<View style={{ alignItems: 'center', gap: 5 }}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Comments"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.24)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z" />
</Svg>
</Pressable>
<Text style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 12, color: '#FFFFFF' }}>
1,000
</Text>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Share"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.24)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Path d="M21 3 10 14" />
<Path d="M21 3 14 21l-4-7-7-4z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="More options"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.24)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg width="20" height="20" viewBox="0 0 24 24" style={{ position: 'relative' }}>
<Circle cx="12" cy="5" r="1.8" fill="#FFFFFF" />
<Circle cx="12" cy="12" r="1.8" fill="#FFFFFF" />
<Circle cx="12" cy="19" r="1.8" fill="#FFFFFF" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Original audio"
style={{
width: 40,
height: 40,
borderRadius: 12,
borderWidth: 2,
borderColor: '#FFFFFF',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
}}>
<Image
source={{ uri: asset('8c1946dbf2.jpg') }}
contentFit="cover"
style={{ width: '100%', height: '100%' }}
/>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Mute"
style={{
position: 'absolute',
left: 16,
bottom: 130,
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M4 9h4l5-4v14l-5-4H4z" />
<Path d="M17 9a4 4 0 0 1 0 6" />
</Svg>
</Pressable>
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 30,
justifyContent: 'center',
alignItems: 'center',
gap: 10,
flexDirection: 'row',
}}>
<View
style={{
gap: 8,
padding: 6,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
flexShrink: 1,
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="dark" style={StyleSheet.absoluteFill} />
<Pressable
accessibilityRole="button"
accessibilityLabel="Home"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Gallery"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Circle cx="9" cy="9" r="1.6" />
<Path d="m21 15-4.5-4.5L7 20" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Reels"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: accent,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#10200A"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Path d="M3 8h18M8 3l3 5M14 3l3 5" />
<Path d="m10 12 5 3-5 3z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Profile"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Circle cx="12" cy="8" r="4" />
<Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
</Svg>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Search"
style={{
width: 56,
height: 56,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="dark" style={StyleSheet.absoluteFill} />
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Circle cx="11" cy="11" r="7" />
<Path d="m20 20-3.5-3.5" />
</Svg>
</Pressable>
</View>
<View
style={{
position: 'absolute',
left: 0,
bottom: 0,
width: '34%',
height: 4,
backgroundColor: accent,
}}
/>
</View>
</Screen>
);
}src/app/feed.tsx
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';
import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';
const accent = '#62D61C';
const stories = [
{ name: 'Me', img: '5e10a900f8.jpg', me: true, live: false },
{ name: 'Haris', img: '2c59778199.jpg', me: false, live: true },
{ name: 'Abdullah', img: '8c4d711d8f.jpg', me: false, live: false },
{ name: 'Sienna', img: '8c1946dbf2.jpg', me: false, live: false },
{ name: 'Alex', img: '16d174176c.jpg', me: false, live: false },
{ name: 'Joe', img: 'edbf36e0ac.jpg', me: false, live: false },
];
export default function FeedScreen() {
return (
<Screen background="#F1F2EF" statusBar="dark">
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: '#FFFFFF',
paddingTop: 56,
paddingBottom: 16,
paddingHorizontal: 16,
gap: 16,
}}>
<View
style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
<View style={{ alignItems: 'center', gap: 8, flexShrink: 1, flexDirection: 'row' }}>
<View
style={{
width: 30,
height: 30,
borderRadius: 9,
backgroundColor: accent,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="18" height="18" viewBox="0 0 24 24">
<Path d="M9 3h6v6h6v6h-6v6H9v-6H3V9h6z" fill="#10200A" />
</Svg>
</View>
<Text
style={{
flexShrink: 1,
fontFamily: 'Urbanist_800ExtraBold',
fontSize: 23,
color: '#161A14',
letterSpacing: -0.23,
}}>
Frindly
</Text>
</View>
<View style={{ gap: 10, flexShrink: 1, flexDirection: 'row' }}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Create post"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: '#F1F2EF',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="18" height="18" viewBox="0 0 24 24">
<Circle cx="12" cy="12" r="10" fill="#161A14" />
<Path
d="M12 7.5v9M7.5 12h9"
stroke="#FFFFFF"
strokeWidth="2"
strokeLinecap="round"
/>
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Notifications"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: '#F1F2EF',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="20" height="20" viewBox="0 0 24 24">
<Path d="M6 16v-5a6 6 0 0 1 12 0v5l2 2H4z" fill="#161A14" />
<Path d="M10 20a2 2 0 0 0 4 0" fill="#161A14" />
</Svg>
<View
style={{
position: 'absolute',
top: 10,
right: 11,
width: 12,
height: 12,
borderRadius: 999,
backgroundColor: '#F0384B',
borderWidth: 2,
borderColor: '#F1F2EF',
}}
/>
</Pressable>
</View>
</View>
<View style={{ gap: 14, overflow: 'hidden', marginRight: -16, flexDirection: 'row' }}>
{stories.map((s, index) => (
<View key={index} style={{ alignItems: 'center', gap: 6, flexShrink: 0, width: 56 }}>
<View
style={{
width: 56,
height: 56,
borderRadius: 999,
padding: 2,
backgroundColor: accent,
}}>
<Image
source={{ uri: asset(s.img) }}
contentFit="cover"
style={{
width: '100%',
height: '100%',
borderRadius: 999,
borderWidth: 2,
borderColor: '#FFFFFF',
}}
/>
{s.live ? (
<Text
style={{
position: 'absolute',
bottom: -4,
left: '50%',
transform: [{ translateX: '-50%' }],
paddingVertical: 1,
paddingHorizontal: 6,
borderRadius: 6,
backgroundColor: '#F0384B',
borderWidth: 2,
borderColor: '#FFFFFF',
fontFamily: 'Urbanist_800ExtraBold',
fontSize: 9,
color: '#FFFFFF',
letterSpacing: 0.36,
}}>
LIVE
</Text>
) : null}
{s.me ? (
<View
style={{
position: 'absolute',
bottom: -2,
right: -2,
width: 22,
height: 22,
borderRadius: 999,
backgroundColor: accent,
borderWidth: 2,
borderColor: '#FFFFFF',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="10" height="10" viewBox="0 0 24 24">
<Path
d="M12 5v14M5 12h14"
stroke="#10200A"
strokeWidth="3.5"
strokeLinecap="round"
/>
</Svg>
</View>
) : null}
</View>
<Text
style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 12, color: '#2A2E27' }}>
{s.name}
</Text>
</View>
))}
</View>
</View>
<View style={{ paddingTop: 12, paddingBottom: 0, paddingHorizontal: 12, gap: 12 }}>
<View style={{ backgroundColor: '#FFFFFF', borderRadius: 22, padding: 14, gap: 12 }}>
<View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
<Image
source={{ uri: asset('8c1946dbf2.jpg') }}
contentFit="cover"
accessibilityLabel="Sienna"
style={{ width: 38, height: 38, borderRadius: 999 }}
/>
<View style={{ flexGrow: 1, gap: 2, flexShrink: 1 }}>
<Text style={{ fontFamily: 'Urbanist_700Bold', fontSize: 14, color: '#161A14' }}>
Sienna
</Text>
<View style={{ alignItems: 'center', gap: 4, flexDirection: 'row' }}>
<Text
style={{
fontFamily: 'Urbanist_400Regular',
fontSize: 11,
color: '#626860',
flexShrink: 1,
}}>
1h ago
</Text>
<Svg
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="#626860"
strokeWidth="2">
<Circle cx="12" cy="12" r="9" />
<Path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18" />
</Svg>
</View>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Post options"
style={{
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="18" height="18" viewBox="0 0 24 24">
<Circle cx="12" cy="5" r="1.8" fill="#626860" />
<Circle cx="12" cy="12" r="1.8" fill="#626860" />
<Circle cx="12" cy="19" r="1.8" fill="#626860" />
</Svg>
</Pressable>
</View>
<Text
style={{
margin: 0,
fontFamily: 'Urbanist_400Regular',
fontSize: 13,
color: '#2A2E27',
lineHeight: 18.85,
}}>
{
'More fresh new travel content inspo for all you travel bloggers or creators working but as … '
}
More...
</Text>
<View
style={{
height: 196,
borderRadius: 18,
overflow: 'hidden',
backgroundColor: '#6E9A63',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Image
source={{ uri: asset('0791cc21ff.jpg') }}
contentFit="cover"
accessibilityLabel="Road winding along a green ridge into the clouds"
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1,
}}
/>
<Pressable
accessibilityRole="button"
accessibilityLabel="Play video"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.32)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={20} tint="default" style={StyleSheet.absoluteFill} />
<Svg width="18" height="18" viewBox="0 0 24 24" style={{ position: 'relative' }}>
<Path d="M8 5v14l11-7z" fill="#FFFFFF" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Mute"
style={{
position: 'absolute',
right: 8,
bottom: 8,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M4 9h4l5-4v14l-5-4H4z" />
<Path d="M17 9a4 4 0 0 1 0 6" />
</Svg>
</Pressable>
</View>
<View style={{ alignItems: 'center', gap: 8, flexDirection: 'row' }}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Like, 26K likes"
style={{
height: 32,
paddingVertical: 0,
paddingHorizontal: 12,
borderRadius: 999,
backgroundColor: '#F1F2EF',
alignItems: 'center',
gap: 6,
flexShrink: 1,
flexDirection: 'row',
}}>
<Svg width="16" height="16" viewBox="0 0 24 24">
<Path
d="M12 20s-7-4.4-9-9.2C1.8 7.7 3.8 4.5 7 4.5c2 0 3.3 1.1 5 3 1.7-1.9 3-3 5-3 3.2 0 5.2 3.2 4 6.3C19 15.6 12 20 12 20z"
fill="#F0384B"
/>
</Svg>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 12,
color: '#161A14',
flexShrink: 1,
}}>
26K
</Text>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Comments, 1K"
style={{
height: 32,
paddingVertical: 0,
paddingHorizontal: 12,
borderRadius: 999,
backgroundColor: '#F1F2EF',
alignItems: 'center',
gap: 6,
flexShrink: 1,
flexDirection: 'row',
}}>
<Svg width="15" height="15" viewBox="0 0 24 24">
<Path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z" fill="#161A14" />
</Svg>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 12,
color: '#161A14',
flexShrink: 1,
}}>
1K
</Text>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Share, 381 shares"
style={{
marginLeft: 'auto',
height: 32,
paddingVertical: 0,
paddingHorizontal: 4,
alignItems: 'center',
gap: 6,
flexShrink: 1,
flexDirection: 'row',
}}>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 12,
color: '#161A14',
flexShrink: 1,
}}>
381
</Text>
<Svg width="17" height="17" viewBox="0 0 24 24">
<Path d="M21 3 3 10l7 4 4 7z" fill="#161A14" />
</Svg>
</Pressable>
</View>
</View>
<View style={{ backgroundColor: '#FFFFFF', borderRadius: 22, padding: 14, gap: 12 }}>
<View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
<Image
source={{ uri: asset('285c9fc0a5.jpg') }}
contentFit="cover"
accessibilityLabel="Esther Howard"
style={{ width: 38, height: 38, borderRadius: 999 }}
/>
<View style={{ flexGrow: 1, gap: 2, flexShrink: 1 }}>
<Text style={{ fontFamily: 'Urbanist_700Bold', fontSize: 14, color: '#161A14' }}>
Esther Howard
</Text>
<View style={{ alignItems: 'center', gap: 4, flexDirection: 'row' }}>
<Text
style={{
fontFamily: 'Urbanist_400Regular',
fontSize: 11,
color: '#626860',
flexShrink: 1,
}}>
4h ago
</Text>
<Svg
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="#626860"
strokeWidth="2">
<Circle cx="12" cy="12" r="9" />
<Path d="M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18" />
</Svg>
</View>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Post options"
style={{
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg width="18" height="18" viewBox="0 0 24 24">
<Circle cx="12" cy="5" r="1.8" fill="#626860" />
<Circle cx="12" cy="12" r="1.8" fill="#626860" />
<Circle cx="12" cy="19" r="1.8" fill="#626860" />
</Svg>
</Pressable>
</View>
<Text
style={{
margin: 0,
fontFamily: 'Urbanist_400Regular',
fontSize: 13,
color: '#2A2E27',
lineHeight: 18.85,
}}>
{
'More fresh new travel content inspo for all you travel bloggers or creators working but as … '
}
More...
</Text>
<View
style={{
height: 196,
borderRadius: 18,
overflow: 'hidden',
backgroundColor: '#557F4C',
}}>
<Image
source={{ uri: asset('45a7c42aa5.jpg') }}
contentFit="cover"
accessibilityLabel="Road through rainforest disappearing into clouds"
style={{ width: '100%', height: '100%' }}
/>
</View>
</View>
</View>
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 30,
justifyContent: 'center',
alignItems: 'center',
gap: 10,
flexDirection: 'row',
}}>
<View
style={{
gap: 8,
padding: 6,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
flexShrink: 1,
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
<Pressable
accessibilityRole="button"
accessibilityLabel="Home"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: accent,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#10200A"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Gallery"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Circle cx="9" cy="9" r="1.6" />
<Path d="m21 15-4.5-4.5L7 20" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Reels"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Path d="M3 8h18M8 3l3 5M14 3l3 5" />
<Path d="m10 12 5 3-5 3z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Profile"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Circle cx="12" cy="8" r="4" />
<Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
</Svg>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Search"
style={{
width: 56,
height: 56,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Circle cx="11" cy="11" r="7" />
<Path d="m20 20-3.5-3.5" />
</Svg>
</Pressable>
</View>
</View>
</Screen>
);
}src/app/profile.tsx
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';
import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';
const accent = '#62D61C';
const tiles = [
{ label: 'Lakeside alpine village', views: '260K', tone: '#4E6E86', img: '7d07382419.jpg' },
{ label: 'Forest road, aerial', views: '1.2M', tone: '#4F7A45', img: '7acbb3bce1.jpg' },
{ label: 'Snowy mountain town', views: '3.2M', tone: '#6F7F8C', img: '3a97d9868e.jpg' },
{ label: 'Peaks above the clouds', views: '11K', tone: '#5B6E58', img: 'e13755bb9e.jpg' },
{ label: 'Green ridge road', views: '200K', tone: '#6E9A63', img: '6faec5afbd.jpg' },
{ label: 'Fjord with chapel', views: '232K', tone: '#3F7287', img: '9acd8c1b02.jpg' },
{ label: 'Misty forest road', views: '98K', tone: '#557F4C', img: 'bed37d7825.jpg' },
{ label: 'Tea hills road in fog', views: '45K', tone: '#628A57', img: '5d20b6d9d7.jpg' },
{ label: 'Jungle highway', views: '1.1M', tone: '#4A7341', img: 'e6b8997303.jpg' },
];
export default function ProfileScreen() {
return (
<Screen background="#F1F2EF" statusBar="dark">
<View style={{ flex: 1 }}>
<View
style={{
backgroundColor: '#FFFFFF',
paddingTop: 56,
paddingBottom: 0,
paddingHorizontal: 16,
gap: 14,
}}>
<View style={{ alignItems: 'center', gap: 12, flexDirection: 'row' }}>
<View
style={{
width: 54,
height: 54,
borderRadius: 999,
padding: 2,
backgroundColor: accent,
flexShrink: 0,
}}>
<Image
source={{ uri: asset('1111e64415.jpg') }}
contentFit="cover"
accessibilityLabel="Brooklyn Simmons"
style={{
width: '100%',
height: '100%',
borderRadius: 999,
borderWidth: 2,
borderColor: '#FFFFFF',
}}
/>
</View>
<View style={{ flexGrow: 1, gap: 2, flexShrink: 1 }}>
<Text
style={{
margin: 0,
fontFamily: 'Urbanist_700Bold',
fontSize: 17,
color: '#161A14',
}}>
Brooklyn Simmons
</Text>
<Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 12, color: '#626860' }}>
@Broo65dx
</Text>
</View>
<Pressable
accessibilityRole="button"
style={{
height: 34,
paddingVertical: 0,
paddingHorizontal: 20,
borderRadius: 999,
backgroundColor: accent,
flexShrink: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 14,
color: '#10200A',
textAlign: 'center',
}}>
Follow
</Text>
</Pressable>
</View>
<View style={{ gap: 4 }}>
<View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
<Svg width="13" height="13" viewBox="0 0 24 24">
<Path
d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z"
fill="#FF7A12"
/>
</Svg>
<Text
style={{
fontFamily: 'Urbanist_400Regular',
fontSize: 13,
color: '#2A2E27',
flexShrink: 1,
}}>
Top UI/UX Inspiration
</Text>
</View>
<View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
<Svg width="13" height="13" viewBox="0 0 24 24">
<Path
d="M12 21c-4 0-7-2.7-7-6.5 0-3 2-5 3.5-6.5.3 2 1.3 3 2.5 3.5C11 8 12 5 14 3c.5 3 5 5.5 5 11 0 4-3 7-7 7z"
fill="#FF7A12"
/>
</Svg>
<Text
style={{
fontFamily: 'Urbanist_400Regular',
fontSize: 13,
color: '#2A2E27',
flexShrink: 1,
}}>
Best resources and guide
</Text>
</View>
</View>
<View style={{ paddingVertical: 4, paddingHorizontal: 0, flexDirection: 'row', gap: 4 }}>
<View style={{ alignItems: 'center', gap: 2, flex: 1 }}>
<Text style={{ fontFamily: 'Urbanist_800ExtraBold', fontSize: 19, color: '#161A14' }}>
400
</Text>
<Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 12, color: '#626860' }}>
Post
</Text>
</View>
<View style={{ alignItems: 'center', gap: 2, flex: 1 }}>
<Text style={{ fontFamily: 'Urbanist_800ExtraBold', fontSize: 19, color: '#161A14' }}>
128.6K
</Text>
<Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 12, color: '#626860' }}>
Followers
</Text>
</View>
<View style={{ alignItems: 'center', gap: 2, flex: 1 }}>
<Text style={{ fontFamily: 'Urbanist_800ExtraBold', fontSize: 19, color: '#161A14' }}>
600
</Text>
<Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 12, color: '#626860' }}>
Following
</Text>
</View>
<View style={{ alignItems: 'center', gap: 2, flex: 1 }}>
<Text style={{ fontFamily: 'Urbanist_800ExtraBold', fontSize: 19, color: '#161A14' }}>
4.8M
</Text>
<Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 12, color: '#626860' }}>
Likes
</Text>
</View>
</View>
<View style={{ flexDirection: 'row', gap: 0 }}>
<Pressable
accessibilityRole="button"
accessibilityLabel="Posts"
style={{
height: 46,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 3,
borderBottomColor: 'transparent',
flex: 1,
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#8A9086"
strokeWidth="1.8">
<Rect x="3" y="3" width="7" height="7" rx="1.5" />
<Rect x="14" y="3" width="7" height="7" rx="1.5" />
<Rect x="3" y="14" width="7" height="7" rx="1.5" />
<Rect x="14" y="14" width="7" height="7" rx="1.5" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Reels"
style={{
height: 46,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 3,
borderBottomColor: accent,
flex: 1,
flexDirection: 'row',
}}>
<Svg width="20" height="20" viewBox="0 0 24 24">
<Rect x="3" y="3" width="18" height="18" rx="4" fill="#161A14" />
<Path d="M3 8h18M8 3l3 5M14 3l3 5" stroke="#FFFFFF" strokeWidth="1.6" />
<Path d="m10 12 5 3-5 3z" fill="#FFFFFF" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Saved"
style={{
height: 46,
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 3,
borderBottomColor: 'transparent',
flex: 1,
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#8A9086"
strokeWidth="1.8"
strokeLinecap="round">
<Rect x="4" y="3" width="16" height="18" rx="2" />
<Path d="M8 8h8M8 12h8M8 16h5" />
</Svg>
</Pressable>
</View>
</View>
<View
style={{
paddingVertical: 10,
paddingHorizontal: 8,
flexDirection: 'row',
gap: 6,
flexWrap: 'wrap',
}}>
{tiles.map((t, index) => (
<View
key={index}
style={{
height: 152,
borderRadius: 14,
overflow: 'hidden',
backgroundColor: t.tone,
flexGrow: 1,
flexBasis: '26%',
}}>
<Image
source={{ uri: asset(t.img) }}
contentFit="cover"
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
<View style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 44 }}>
<LinearGradient
colors={['rgba(0,0,0,0.45)', 'rgba(0,0,0,0)']}
locations={[0, 1]}
start={{ x: 0.5, y: 1 }}
end={{ x: 0.5, y: 0 }}
style={StyleSheet.absoluteFill}
/>
</View>
<View
style={{
position: 'absolute',
left: 6,
bottom: 6,
alignItems: 'center',
gap: 4,
flexDirection: 'row',
}}>
<View
style={{
width: 16,
height: 16,
borderRadius: 999,
backgroundColor: accent,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="#10200A"
strokeWidth="2.6">
<Path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
<Circle cx="12" cy="12" r="3" />
</Svg>
</View>
<Text
style={{
fontFamily: 'Urbanist_700Bold',
fontSize: 11,
color: '#FFFFFF',
flexShrink: 1,
}}>
{t.views}
</Text>
</View>
</View>
))}
</View>
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 30,
justifyContent: 'center',
alignItems: 'center',
gap: 10,
flexDirection: 'row',
}}>
<View
style={{
gap: 8,
padding: 6,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
flexShrink: 1,
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
<Pressable
accessibilityRole="button"
accessibilityLabel="Home"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Gallery"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Circle cx="9" cy="9" r="1.6" />
<Path d="m21 15-4.5-4.5L7 20" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Reels"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: 'rgba(255,255,255,0.18)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Rect x="3" y="3" width="18" height="18" rx="4" />
<Path d="M3 8h18M8 3l3 5M14 3l3 5" />
<Path d="m10 12 5 3-5 3z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="button"
accessibilityLabel="Profile"
style={{
width: 44,
height: 44,
borderRadius: 999,
backgroundColor: accent,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#10200A"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round">
<Circle cx="12" cy="8" r="4" />
<Path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" />
</Svg>
</Pressable>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Search"
style={{
width: 56,
height: 56,
borderRadius: 999,
backgroundColor: 'rgba(28,36,26,0.42)',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<BlurView intensity={28} tint="default" style={StyleSheet.absoluteFill} />
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinecap="round"
strokeLinejoin="round"
style={{ position: 'relative' }}>
<Circle cx="11" cy="11" r="7" />
<Path d="m20 20-3.5-3.5" />
</Svg>
</Pressable>
</View>
</View>
</Screen>
);
}src/components/screen.tsx
import { StatusBar } from 'expo-status-bar';
import type { ReactNode } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';
// Every screen is drawn on a 390 wide artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;
type Props = {
background: string;
statusBar: 'light' | 'dark';
height?: number;
children: ReactNode;
};
export function Screen({ background, statusBar, height: artboardHeight = 844, children }: Props) {
const { width, height } = useWindowDimensions();
const scale = width / ARTBOARD_WIDTH;
return (
<ScrollView
bounces={false}
showsVerticalScrollIndicator={false}
style={{ flex: 1, backgroundColor: background }}
contentContainerStyle={{ height: Math.max(artboardHeight * scale, height) }}>
<StatusBar style={statusBar} />
<View
style={{
width: ARTBOARD_WIDTH,
height: artboardHeight,
overflow: 'hidden',
transformOrigin: 'left top',
transform: [{ scale }],
}}>
{children}
</View>
</ScrollView>
);
}src/lib/assets.ts
// Demo images are hosted by DeveloperMill. Point this at your own CDN, or swap to require().
const ASSET_BASE = 'https://developermill.com/app-designs/social-media-reels-app-ui-design/assets';
export const asset = (name: string) => `${ASSET_BASE}/${name}`;About this design
A frosted glass navigation bar floats over each screen and a bright green accent ties them together. Stories and grid tiles come from simple arrays, so it is quick to connect to a real feed.
Fresh green accents on clean white and full-screen nature video frames, with frosted glass navigation on every screen.
- Full-screen reels with a side action rail
- Stories row with live and add badges
- Feed cards with engagement pills
- Three column reels grid on profiles
Colour palette
Frindly green
#62D61C
Deep green
#10200A
Off white
#F1F2EF
Ink
#161A14
Like red
#F0384B
Moss grey
#626860
How to use this design
- 01
Pick what to copy
Copy the Frindly Social artifact, skill or code from this page.
- 02
Run it or generate it
Paste the code into a new Expo app and start it, or give the skill to your AI coding agent.
- 03
Make it yours
Replace the demo images and sample content, then connect your own data.
Frequently asked questions
Do the reels play video?
The reel uses an image frame in this design. Replace it with expo-video and a vertical pager for real playback.
How is the glass navigation built?
The bar uses BlurView from expo-blur with a tinted background, and the active tab uses the green accent.
Can I change the accent colour?
Yes. The accent is one value, so teal or orange themes are a quick change.
Is the Frindly Social design free to use?
Yes. The design, skill and Expo code are free and MIT licensed, including for commercial apps. Replace the demo images and sample content with your own before you ship.
What is the difference between the artifact, skill and code?
The artifact is the full design: tokens, screens and source. The skill is a SKILL.md that teaches an AI coding agent to build the UI. The code is the finished Expo app you can paste in and run.
Which Expo version does the code use?
It targets Expo SDK 58 with Expo Router and TypeScript. It uses packages installed through npx expo install, with no custom native code.
