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 views18sMay 18, 2026
Watch on
YouTubeInstagramTikTokFacebookPinterestSource code
Stack
React NativeReanimatedexpo-linear-gradientTypeScriptExpo
Views
15
Duration
18s
Follow
Write-up

About this build

A classifieds marketplace home in a single file: snap-scrolling hero cards, a category grid, a heart that springs when tapped, gradient overlays and a sticky post button. Zero libraries, which is the constraint I set for most of these builds.

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.

Start a project →More reels
Read nextReact Native animation examples, with the technique behind each

More React Native UI reels

All 41 reels →