<p>Every React Native codebase I've worked on hits the same wall around month four. A screen that started at 80 lines is now 400. Half of it is <code>useEffect</code> chains coordinating API calls. A push notification mid-flow leaves the app in a state nobody can reproduce.</p> <p>Clean architecture in React Native isn't about folders or layers. It's about whether you can still reason about your app when async, navigation, and native modules collide.</p> <h2> The shape that fails </h2> <p>The default React Native architecture is "everything lives where it's first needed." API calls land in the handler that triggers them. State sits in the screen that displays it. Native modules get called from the button that activates them. It works for the first month.</p> <p>What it doesn't survive:</p> <ul> <li> <strong>Async outliving its caller.</strong> A user kicks off a request, taps a notification, lands on a different screen. The original promise resolves into a setter that no longer makes sense.</li> <li> <strong>Native modules in the UI.</strong> A screen calls <code>NativeModules.Audio.start()</code> directly. iOS 17 changes the audio session semantics. Three screens break, not one.</li> <li> <strong>Auth races.</strong> A token refresh fires while three other requests are in flight. Two retry, one logs the user out, one leaks the old token.</li> <li> <strong>Drift.</strong> The same "send a message" logic lives in two screens. One gets a validation rule added. The other doesn't.</li> </ul> <p>The pattern that produces all of this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="kd">const</span> <span class="nx">handleSend</span> <span class="o">=</span> <span class="k">async </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">api</span><span class="p">.</span><span class="nf">post</span><span class="p">(</span><span class="dl">'</span><span class="s1">/messages</span><span class="dl">'</span><span class="p">,</span> <span class="nx">input</span><span class="p">)</span> <span class="nf">setMessages</span><span class="p">(</span><span class="nx">prev</span> <span class="o">=&gt;</span> <span class="p">[...</span><span class="nx">prev</span><span class="p">,</span> <span class="nx">res</span><span class="p">.</span><span class="nx">data</span><span class="p">])</span> <span class="p">}</span> </code></pre> </div> <p>Nothing wrong with this code on its own. The problem is the second time it gets written, slightly differently, in another screen.</p> <h2> Three layers, one rule </h2> <p>Skip the diagram. The minimum viable framing:</p> <ul> <li> <strong>Presentation.</strong> Screens, components, hooks. Renders. Orchestrates.</li> <li> <strong>Domain.</strong> Use cases. Pure logic. No <code>react</code>, no <code>fetch</code>, no <code>NativeModules</code>.</li> <li> <strong>Data.</strong> API clients, storage, native bridges. Knows about the outside world.</li> </ul> <p>One rule: <strong>the UI talks to the domain, never to data directly.</strong></p> <p>That's the post. The rest is what enforcing that rule does to the bugs above.</p> <h2> Use cases are the boundary </h2> <p>The shift in code is small:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="c1">// Before: handler decides how things work</span> <span class="kd">const</span> <span class="nx">handleSend</span> <span class="o">=</span> <span class="k">async </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">res</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">api</span><span class="p">.</span><span class="nf">post</span><span class="p">(</span><span class="dl">'</span><span class="s1">/messages</span><span class="dl">'</span><span class="p">,</span> <span class="nx">input</span><span class="p">)</span> <span class="nf">setMessages</span><span class="p">(</span><span class="nx">prev</span> <span class="o">=&gt;</span> <span class="p">[...</span><span class="nx">prev</span><span class="p">,</span> <span class="nx">res</span><span class="p">.</span><span class="nx">data</span><span class="p">])</span> <span class="p">}</span> <span class="c1">// After: handler delegates</span> <span class="kd">const</span> <span class="nx">handleSend</span> <span class="o">=</span> <span class="k">async </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">await</span> <span class="nx">sendMessage</span><span class="p">.</span><span class="nf">execute</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">}</span> </code></pre> </div> <p>The use case is where the logic actually lives:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="kd">class</span> <span class="nc">SendMessage</span> <span class="p">{</span> <span class="nf">constructor</span><span class="p">(</span><span class="k">private</span> <span class="nx">repo</span><span class="p">:</span> <span class="nx">MessageRepository</span><span class="p">)</span> <span class="p">{}</span> <span class="k">async</span> <span class="nf">execute</span><span class="p">(</span><span class="nx">input</span><span class="p">:</span> <span class="nx">SendMessageInput</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// validation, business rules, orchestration</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">repo</span><span class="p">.</span><span class="nf">send</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>This isn't ceremony. The point is that <code>SendMessage</code> is the only place anyone outside the domain learns how a message gets sent. Two screens calling it can't drift apart, because there's only one of it.</p> <p>The repository is the other half:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="kr">interface</span> <span class="nx">MessageRepository</span> <span class="p">{</span> <span class="nf">send</span><span class="p">(</span><span class="nx">input</span><span class="p">:</span> <span class="nx">SendMessageInput</span><span class="p">):</span> <span class="nb">Promise</span><span class="o">&lt;</span><span class="nx">Message</span><span class="o">&gt;</span> <span class="p">}</span> </code></pre> </div> <p>The use case depends on the interface. The implementation lives in the data layer. The UI imports neither. It imports the use case, calls <code>execute</code>, and stops thinking.</p> <h2> Where React Native makes you pay for shortcuts </h2> <p>This is the part most "clean architecture" posts are silent on. Web apps have UI and API. React Native has UI, API, navigation lifecycle, native modules, background/foreground transitions, and OS-level interruptions. The cost of mixing layers compounds with each one.</p> <p><strong>Async outliving the screen.</strong> A request starts on screen A and resolves after the user is on screen C. If the resolution reaches for component-local setters, navigation refs, or context that no longer exists, you get a bug that only reproduces when someone moves fast. A use case gives you one place to attach cancellation, idempotency, or "is this caller still listening?" guards. The screen doesn't need to know.</p> <p><strong>Native modules don't belong in handlers.</strong> <code>NativeModules.Audio.start()</code> in a button handler ties the UI to platform behavior. Platform behavior is the part most likely to diverge between iOS and Android, between OS versions, between simulator and device. Wrap the module in a repository, expose a use case (<code>StartRecording</code>), and the UI is platform-agnostic. The platform-specific logic has one home, and you know where to look when iOS changes.</p> <p><strong>Auth and rehydration races.</strong> Token refresh overlapping with three in-flight requests is the canonical React Native bug. If your auth logic is split across an axios interceptor, a context provider, and a screen, the race is unfixable. There's no single thing to serialize. A <code>RefreshSession</code> use case that owns the queue makes it tractable. Boring, but tractable.</p> <h2> Tests stop pretending </h2> <p>The biggest practical payoff isn't reuse. It's that tests stop needing the framework.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="nf">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">sends a message via the repo</span><span class="dl">'</span><span class="p">,</span> <span class="k">async </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">repo</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">FakeMessageRepo</span><span class="p">()</span> <span class="kd">const</span> <span class="nx">useCase</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">SendMessage</span><span class="p">(</span><span class="nx">repo</span><span class="p">)</span> <span class="k">await</span> <span class="nx">useCase</span><span class="p">.</span><span class="nf">execute</span><span class="p">({</span> <span class="na">body</span><span class="p">:</span> <span class="dl">'</span><span class="s1">hi</span><span class="dl">'</span> <span class="p">})</span> <span class="nf">expect</span><span class="p">(</span><span class="nx">repo</span><span class="p">.</span><span class="nx">sent</span><span class="p">).</span><span class="nf">toHaveLength</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="p">})</span> </code></pre> </div> <p>No render tree. No <code>react-test-renderer</code>. No mocked <code>NativeModules</code>. No Detox. The use case runs in pure Node and exits in milliseconds.</p> <p>Most of the value of architecture is what becomes testable, not what becomes "clean."</p> <h2> The trap </h2> <p>A few ways this goes wrong:</p> <ul> <li> <strong>Optional architecture isn't architecture.</strong> "I'll just call the API directly this once" is how you end up with three places that do the same thing badly. Either the boundary is enforced or it isn't.</li> <li> <strong>Three layers for a two-screen app is waste.</strong> If your app is a login and a list, you don't need a use case layer. Apply this when the complexity earns it, usually somewhere between the third real feature and the second engineer.</li> <li> <strong>Folders aren't boundaries.</strong> You can have a <code>domain/</code> directory and still call <code>fetch</code> from a screen. The directory structure is documentation. ESLint rules and code review are enforcement.</li> </ul> <p>The other cost is upfront friction. A new feature now touches three files instead of one. For a few weeks that feels worse, not better. It pays off the first time a bug reproduces only on Android, only after a notification, only when offline. You find the cause in one place instead of grepping six.</p> <h2> What you actually get </h2> <p>Clean architecture in React Native isn't a goal, and it isn't about being clean. Something will go wrong at month twelve, in a way you didn't predict. It's the bill you pay so the code you're staring at is still one you can reason about.</p>