back to reels
Mobile UI · 18s
OLX Listing Home in React Native — Snap-Scroll Cards + Heart Spring
An OLX-style marketplace home with snap-scroll featured hero cards, an 8-icon category grid, a heart that springs to 1.35×, real Unsplash images, and a sticky Post an Ad FAB — ~200 lines of TypeScript, zero UI kit.
15 views18s05/18/2026 10:51
▸ Watch on
Open reel▸ Stack
React NativeReanimatedexpo-linear-gradientTypeScriptExpo
Views
15
Duration
18s
▸ Write-up
OLX Listing Home in React Native 🛒
The one where I rebuilt OLX from scratch. ~200 lines. Zero UI kit.
Snap-scroll hero cards
typescript
<FlatList
data={FEATURED}
horizontal
pagingEnabled
decelerationRate="fast"
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<View style={styles.heroCard}>
<Image source={{ uri: item.image }} style={styles.heroImg} resizeMode="cover" />
<LinearGradient colors={['transparent', 'rgba(0,0,0,0.7)']} style={styles.heroGrad} />
<Text style={styles.heroTitle}>{item.title}</Text>
</View>
)}
/>Category grid — 8 colour-coded icons
typescript
const CATEGORIES = [
{ label: 'Electronics', icon: 'phone-portrait-outline', color: '#6366f1' },
{ label: 'Vehicles', icon: 'car-outline', color: '#f97316' },
{ label: 'Property', icon: 'home-outline', color: '#22c55e' },
// ...
];Rendered as a 4-column FlatList. Each chip has a coloured background and an Ionicon.
Heart spring
typescript
heartScale.value = withSpring(1.35, { damping: 4, stiffness: 500 }, () => {
heartScale.value = withSpring(1, { damping: 8, stiffness: 300 });
});Sticky Post an Ad FAB
Absolutely positioned at bottom: insets.bottom + 16, always visible above the scroll content. Spring-scales on tap with the same pattern.
Stack: React Native · Reanimated 3 · expo-linear-gradient · TypeScript
LIKE WHAT YOU SEE?
I'm available for freelance & contract React Native work — apps, features, UI implementation, you name it.