Building SquareOff: Modernizing Roofing Estimates with React Native SVGs

March 24, 2026 (3mo ago)

Roofing estimates are high-stakes. Underestimate the materials, and you eat the cost. Overestimate, and you lose the bid. Many contractors still rely on pen and paper or clunky legacy apps.

I decided to build SquareOff — a premium, dark-mode-first calculator app for roofing contractors. It handles the complex geometry of pitched roofs, calculates materials based on waste factors, and provides instant visual feedback.

The Tech Stack

I aligned the stack with my other mobile tools to maximize development velocity:

  • Framework: React Native with Expo SDK 55
  • Routing: Expo Router
  • State Management: Zustand backed by AsyncStorage
  • Visuals: react-native-svg for dynamic roof diagrams
  • Monetization: RevenueCat for seamless IAP

Architecture Decisions

1. Dynamic SVG Roof Diagrams

The hardest part of measuring a roof isn't the flat footprint, it's accounting for the pitch (slope) and the specific roof shape (Gable, Hip, or Shed). Instead of just showing text results, I built a dynamic RoofDiagram component using react-native-svg.

// components/RoofDiagram.tsx
function HipSvg() {
  return (
    <Svg width={140} height={70} viewBox="0 0 140 70">
      {/* Draw the main roof slopes */}
      <Polygon points="10,65 40,18 100,18 130,65" fill="none" stroke={colors.accent} strokeWidth={1.5} />
      {/* Ridge line */}
      <Line x1={40} y1={18} x2={100} y2={18} stroke={colors.accent} strokeWidth={2} />
      {/* Hip lines */}
      <Line x1={10} y1={65} x2={40} y2={18} stroke={colors.accent} strokeWidth={1} strokeDasharray="4,3" opacity={0.6} />
      <Line x1={130} y1={65} x2={100} y2={18} stroke={colors.accent} strokeWidth={1} strokeDasharray="4,3" opacity={0.6} />
    </Svg>
  );
}

This component dynamically renders GableSvg, HipSvg, or ShedSvg based on user selection. Coupled with native <Text> labels mapping out the Width, Length, Ridge, and Eaves, this immediate visual feedback gives contractors confidence that they've selected the correct geometry.

2. Standalone Zustand Stores & Fast UI

Roofing estimates have a cascading set of variables: the base footprint area, the pitch multiplier, the waste factor percentage (e.g., +15% for valleys and hips), and the coverage rates for shingles, underlayment, and nails.

By centralizing these in a single Zustand store backed by native AsyncStorage, the app avoids any database latency. When a contractor taps a new "Waste Factor" chip or adjusts the pitch, the required number of shingle bundles updates instantly.

3. Native Expo Tooling

Using Expo SDK 55 unlocked massive DX improvements. Features like expo-blur enabled beautiful glassmorphism overlays on the "Pro" locked cards (ProGate components). expo-store-review made asking for ratings trivial, and expo-sharing provides the native iOS/Android bridge to export the calculations.

What I Learned

1. Visual feedback builds trust. Providing a clean SVG representation of the specific roof shape drastically reduces input anxiety compared to a purely text-based form. The visual cues (like dashed lines for hidden hips) map perfectly to how contractors think about 3D spaces.

2. Premium aesthetics matter in B2B tools. By designing SquareOff with a sleek, dark-mode interface (userInterfaceStyle: 'dark' completely locked in app.config.ts), it stands out against legacy competition. Users associate good design with reliable math.

Try It

SquareOff is the sleekest tool to ensure your material orders are dead-on. Find it on the App Store and Google Play.

LinkedIn
X