DEV Community: Malik Chohra

How I wire Claude into my React Native workflow (skills, projects, Cowork)

Malik Chohra — Wed, 13 May 2026 08:01:35 +0000

Claude isn't a chat app anymore. It's a runtime. The interface is still text, but the architecture underneath is execution: load context, pick tools, call APIs, write files, schedule work. Most people are still typing at it like ChatGPT in 2023 and wondering why their workflow hasn't changed.

The shift happened quietly, across four primitives. Each one shipped without much fanfare. Together they're what "advanced" means in 2026: not a longer prompt, but a better-wired one.

This piece is the primer. The four things to understand before you can use Claude well.

The mental model

The outdated framing: Claude is good at writing, explaining, coding.

The 2026 framing: Claude is a runtime that loads skills, scopes memory in projects, calls external systems through MCP, and executes multi-step work in Cowork.

Same model file, completely different surface. The question used to be "what can Claude do?" The question now is "what can I wire into Claude?"

That reframe is the whole article. Everything below is the four primitives that make the reframe real.

1/ Skills (the tool layer)

A skill is a folder with a SKILL.md file. YAML frontmatter at the top with name and description. Markdown body underneath with the instructions Claude follows. That's the entire format.

The mechanism is the part most people miss. The description is what Claude sees in its skill list before responding. The body only loads when the skill triggers. So you can have 50 skills sitting available and pay context cost on only the one that fires.

This changes what you'd put in a skill. A skill isn't a system prompt by another name. It's a tool you teach Claude once and reach for whenever the task fits.

Things skills are good at:

Domain procedures: how your team does code review, how your brand voice works, what your component library calls things
Multi-step workflows: write article → format for Medium → cross-post to Dev.to → generate carousel
Technical conventions: your API's auth quirks, your codebase's folder structure, your testing harness

Two patterns I've seen work in production.

A context skill holds your domain knowledge once. Other skills reference it. Don't repeat your brand voice in every generator. Keep it in a *-context skill and have the generators read it.

A generator skill does one job. It writes a thing, or transforms a thing, or validates a thing. Single-purpose, composable, chains cleanly.

The mistake is making one giant skill that does everything. Anthropic's own open-source skills repo has separate pdf, docx, xlsx, and pptx skills, not one mega "documents" skill, for a reason. Generators that do too much fail in too many ways and get triggered by too many prompts.

The other thing nobody tells you: the description is the trigger. I spent two weeks getting one of my skills to fire when I asked for the right thing. The body was fine. The description was vague. Claude under-triggers skills by default, and Anthropic's own guidance is to be slightly pushy in descriptions. Specific verbs, specific phrases, specific contexts.

Custom skills are available on Pro, Max, Team, and Enterprise. You can create them directly in Claude.ai (Settings → Capabilities), via the API, or as folders in Claude Code.

2/ Projects (scoped memory)

A Project is a workspace with its own files, instructions, and memory. Memory accumulated in one project doesn't bleed into another. Same Claude account, effectively different "instances" of context.

Why it matters: chat memory was useful but contaminating. A single global memory pool meant Claude pulled context from a personal conversation into a work answer, or surfaced last week's product strategy when you asked about something unrelated. Project-scoped memory fixes that without forcing you to start cold every session.

What to use it for:

One project per product or work stream, to keep the contexts clean
Long-running threads where context compounds (research projects, ongoing client engagements, multi-week investigations)
Anywhere you want Claude to remember but not leak

The pattern: every project gets its own files (a PRD, a brand voice doc, a technical spec) and its own memory. The skills you've installed are still available across all projects, but the context is scoped.

A consequence worth noticing. If you're not using Projects, your default chat is becoming a leaky bucket. Memory accumulates. Some of it conflicts. After three months it's a soup. Projects are how you stop that.

3/ Connectors (the integration layer over MCP)

Connectors are Model Context Protocol-based integrations that let Claude read from and write to external services. Google Drive, Gmail, Notion, GitHub, Slack, Linear, Asana, Jira, Stripe, Figma, Canva, HubSpot, Apple Health. 50+ in the directory as of early 2026, with new ones added weekly.

Why they matter: pasting screenshots and copy-pasting JSON is the manual work AI was supposed to remove. Connectors remove it. Instead of "here's the email I got," it's "the email from Sarah yesterday." Claude pulls it. Instead of pasting an issue body, it's "the bug filed in expo_boilerplate." Claude pulls it.

When to use them:

Tools already in your daily workflow. Connectors only earn their place if they're already part of how you work.
Workflows that span tools (calendar + email + Slack = daily briefing)
Anywhere you find yourself screenshot-pasting more than twice in one session

The custom MCP escape hatch (Pro plan and above): if your tool isn't in the directory, you can add any MCP server URL via Settings → Connectors → Add custom connector. Notion's hosted MCP at https://mcp.notion.com/mcp is the canonical example. Anyone publishing an MCP server can be wired into Claude in 30 seconds.

The trap is over-connecting. Each connector adds surface area for Claude to get confused. Multiple integrations claiming to handle "messages" or "tasks" leads to wrong-tool-picked failures. The honest take: pick three to five that match your real flow. Connect more only when you hit a specific gap.

4/ Cowork (the agentic execution layer)

Cowork is the same agentic architecture as Claude Code, but for non-coding tasks, in the desktop app. (If you haven't installed Claude Code yet, the Claude Code for beginners guide on the Code Meet AI newsletter walks through the install and your first project.) It reads and writes local files, schedules recurring tasks, and uses connectors first, the browser second, and computer use (driving your screen) only as a last resort. Available on Pro, Max, Team, and Enterprise. Desktop only.

This is where Claude shifts from assistant to colleague. You give it a goal, walk away, come back to a result. The desktop has to be awake while it runs. That's the catch.

What Cowork is good at:

Repetitive multi-step work like file organization, daily briefings, weekly reviews
Tasks that span tools and need orchestration (calendar + email + Slack synthesis)
Work that's too boring to do reliably but too important to skip

What it's not for:

Time-sensitive tasks. Your desktop has to be open and awake.
Sensitive data (financial, health, anything regulated). Prompt injection risk is real, and Cowork activity isn't covered by ZDR.
Work where you want to think alongside Claude. That's chat. Cowork is delegation.

The realest test: if you'd skip the task because it's boring, Cowork is the right tool. If you'd want to watch Claude do it step by step, chat is.

The multiplier: Dispatch + Computer Use

Two extensions on Cowork worth knowing about, because together they're what makes the rest worth setting up.

Computer Use lets Claude drive your screen. Clicking, typing, navigating apps that don't have connectors. Slower than a connector. More fragile. But it works for the long tail of tools that haven't published an MCP server. Research preview on Pro and Max.

Dispatch lets you assign tasks from your mobile app to your desktop. You're on the train; you tell Claude on your phone to summarize three articles you drafted this week. By the time you're at your desk, the answer is in chat.

Both are research previews as of May 2026. Both work. Use sparingly until they harden, but understand they exist. They're the difference between Claude as a desktop tool and Claude as something you can hand work to from anywhere.

What this means for builders

For mobile builders specifically, the implications are sharper than they look from the outside. The web AI dev community has been on this trajectory longer (Cursor, Claude Code in CLI, MCP servers for every database, custom skills for every framework). Mobile dev has stayed a step behind partly because the canonical workflows assume backend or web context.

Skills, Projects, and Connectors don't care what stack you ship to. The runtime is platform-agnostic. The gain compounds the moment you treat Claude as something to wire, not something to type at.

The honest version: most "I'm not getting much out of AI" complaints I hear from devs in 2026 trace to one of three things. They're still on the chat surface. They haven't built a single skill. Or they're treating connectors like a novelty. None of those are model problems. They're setup problems.

Where to start

Pick one primitive, build something, ship it. Add the next one when the simpler setup hits a wall.

For most people, the order is:

One Project per major work stream. Stop polluting the default chat.
One custom skill for your domain context. Brand voice, codebase conventions, whatever your work depends on.
Three connectors. The ones already in your daily flow. Not ten.
One Cowork recurring task. A morning briefing is a good first one.

Stop there for a month. Notice what's still manual. Build the next thing for that.

The advanced version of Claude isn't a longer prompt. It's the four primitives, wired into how you really work. You're writing code now. It just happens to look like English.

If you're shipping mobile-AI

The four primitives apply to every stack, but the wiring for React Native and Expo is its own problem. Web AI dev has a year head start on patterns; mobile is still figuring out what a Claude Code memory bank looks like for a Metro bundler, what skills make sense for an Expo build pipeline, and which connectors actually plug into a mobile workflow.

That's the gap AI Mobile Launcher fills. It ships the U-AMOS memory system, RN-specific Claude Code rules, and the Skills folder structure pre-configured for Expo and the mobile stack, so you're not figuring out the wiring on a Tuesday night with a build failure on the line.

The Lite version is free on GitHub. The full system with the rule packs, generators, and U-AMOS 2.0 memory bank is in the Starter tier.

→ Get AI Mobile Launcher

Malik Chohra · AI-first mobile engineer · WireAI · AI Mobile Launcher · Code Meet AI newsletter

From React to React Native: what web devs get wrong on day one

Malik Chohra — Thu, 07 May 2026 19:46:01 +0000

I built three React Native apps before I really understood it.

The first took me three weeks to ship something that should have taken three days. The second, I shipped fast by ignoring half the platform constraints and paying for it later. The third was the boilerplate I wish I'd had on day one.

This was by 2019, when React Native was new, and I always thought that jumping from React Native to ReactJS for websites would be smooth. Actually, it was.

Since then, i saw so many Web developers, they jump into mobile apps, and it is not the same. So much dependency to manage, just to think about the performance, it is a whole new topic, or to manage packages. Here, we are not talking about Native integration or creating native code from scratch. There is so many mistakes when it comes to that, and i will try to simplify life for you.

If you're a React developer planning to build a mobile app, this is the piece I'd hand you on day zero. What actually transfers from the web? What absolutely doesn't. Where Expo fits in. What to learn first? What to skip. And, because most "React to React Native" guides are written like AI is still 2022, what shipping AI features inside a mobile app actually looks like.

"It's just React, right?"

Yes, it's JSX. Yes, it's hooks. Yes, your component model carries over. That's about a third of what makes up "shipping a working app."

The other things are layout, navigation, storage, build, debugging, and deployment, which are different enough that pretending they aren't is the single biggest reason web devs give up on RN in week two.

So let me split it cleanly.

What transfers from React (the good news)

If you've shipped React on the web, these all carry over more or less untouched:

JSX and the component model. Same mental model. <MyComponent prop={value} /> is <MyComponent prop={value} />.
Hooks. useState, useEffect, useMemo, useCallback, useReducer, useContext, custom hooks all work the same.
TypeScript. Same setup, same tsconfig.json (almost). Expo gives you a working TS template by default.
State management. Zustand, Redux, Jotai. All work in RN. TanStack Query works. (If you're choosing between them, I broke down the trade-offs in Redux vs Zustand vs MobX in React Native.)
Most utility libraries. zod, date-fns, lodash, dayjs, uuid, all fine. Anything with no DOM dependency.
Patterns. Composition, lifting state up, container/presentational, render props if you're into that. All the same.

That's the part that lulls you into thinking "this is going to be smooth."

What doesn't transfer (the painful part)

Here's where week two starts.

No DOM elements. <div> doesn't exist. Neither does <span>, <button>, or <input>. You get <View>, <Text>, <Pressable>, <TextInput>. And every piece of text on the screen has to be inside a <Text> putting a string, directly in a <View> crashes the app at runtime. And by the way, if you use lazy loading for screens, and you don't check that screen, the deployment will crash heavily, as the deployment pipeline is so different. Well, you can use Over The Air update (OTA), but…

No CSS. No stylesheets, no media queries, no cascading, no :hover (there's no hover on mobile). You write style objects in JS, or you use a Tailwind equivalent like NativeWind, which I strongly recommend keeping you on familiar ground.

No React Router. Use Expo Router. It's file-based, feels closest to Next.js's app router, and is now the default for new Expo projects.

No browser APIs. No localStorage, no window, no document. You'll use AsyncStorage (or MMKV for performance), and react-native-reanimated for anything animated. There's no <a href>. There's no scroll event the same way. There's no getElementById.

Forms work differently. <TextInput> doesn't auto-handle the keyboard. You manage focus, dismissal, keyboard-avoiding behavior, autocorrect, and autocapitalize. Keyboard handling on mobile is a small engineering problem in itself.

Images load asynchronously. You don't <img src=...> and forget. You think about caching, placeholders, error states, and image sizes. expo-image handles most of this.

Animations are different. CSS transitions don't exist. Reanimated library is the standard, and it runs animations on the UI thread (separate from your JS), which is actually better than the web, but you have to learn worklets. The idea is we have JS and UI threads in React Native. Animation should run on UI threads to keep the app performance. (For high-performance graphics specifically, RN Skia is worth knowing too.)

Build and deploy aren't Vercel. No git push and you're live. You use EAS Build for cloud builds, EAS Submit to push to the App Store and Play Store, and you wait for app review. EAS Update lets you ship JS-only patches over the air without going through review again. That's the closest thing to "deploy on push."

Debugging is different. Flipper is deprecated. React Native DevTools is the new standard, and it's actually decent now. But native crashes (the kind that surface as a stack trace from Java or Objective-C) require different muscle memory.

That's the surface area you didn't know you didn't know.

Expo vs bare React Native

This is the first real fork in the road.

Bare React Native means you have a native iOS project and a native Android project sitting next to your JS code. You can install any native module, customize anything, and you'll probably spend Saturday afternoons fighting CocoaPods, Gradle, and Xcode signing certificates.

Expo (managed) means you write JS only, install Expo-compatible native modules, and let EAS handle native builds in the cloud. You get OTA updates, a working dev client, and you're shipping to TestFlight in a day instead of a week.

If you're a web developer starting out: use Expo. Don't believe people who tell you it's "for prototypes." It's not 2020 anymore. Expo's ecosystem covers nearly everything you'll actually need (camera, notifications, biometrics, in-app purchases, deep linking, file system). The workflow management in Expo is the best for RN right now.

I tried the bare RN route on app two. I lost a weekend to an Xcode signing error that turned out to be a typo in app.json. I went back to Expo for app three and have not looked back.

What to learn first (the priority list)

If you have one week to come up to speed before starting, here's the order:

Expo Router. File-based routing, layouts, and dynamic routes. Read the Expo Router docs, they're short.
NativeWind. Tailwind for RN. Lets you keep your CSS muscle memory and skip writing StyleSheet.create({ ... }) for every component.
The core RN primitives. View, Text, Pressable, ScrollView, FlatList, TextInput, Image. Know what each is for and when to use which.
AsyncStorage (or MMKV). Your localStorage replacement. MMKV is faster but adds native code; AsyncStorage is fine for most cases.
Reanimated basics. useSharedValue, useAnimatedStyle, withTiming, withSpring. You don't need to master worklets on day one, but you do need this for any real interaction.
EAS Build and EAS Update. Your build and deploy story. Ten minutes of reading saves you hours.

That's enough to ship a real app. Everything else, learn when you need it.

What to avoid (the trap list)

These are the things that cost me time. Don't repeat them.

Don't try to make React Router work. Expo Router exists. Use it. I still use React Navigation for my projects, as I'm more familiar with. Expo Router now is king.
Don't write StyleSheet.create from scratch when NativeWind solves it for you. You'll be slower, your code will read worse, and you'll resist refactoring. You can have a design system library and use it. Faster and easier.
Don't disable Hermes. It's the default RN engine now: faster startup, smaller bundle, better debugging. You shouldn't need to touch this.
Don't use setInterval for animations. Use Reanimated. The frame drops will tell you why.
Don't ignore the keyboard. Test every screen with the keyboard open. KeyboardAvoidingView is the minimum; react-native-keyboard-controller is what I actually use in production now.
Don't ship without offline handling. Phones lose signal in elevators, on planes, on the subway. Check NetInfo and have a fallback. If you want a deeper pattern, I wrote about offline support and caching in Expo with custom queuing.
Don't assume iOS and Android behave the same. Safe-area insets, permissions UX, file system paths, system gestures, they diverge in places that matter. Test both.
Don't ship API keys in your app. This is the single biggest mistake I see web devs make moving over. Your .env ships in your bundle. Anyone can decompile it. You need a backend proxy for any third-party API call that requires a secret key. I wrote a longer piece on secure storage patterns in Expo that covers what to do with the secrets you do need on-device.

That last one matters more than ever now, because of the AI part.

The AI part nobody talks about

If you're building a mobile app today and there's no AI feature on your roadmap, you're either underestimating where the market is or you have a very specific reason. Most web devs come into RN with an LLM feature already on the spec.

Here's the honest version of what changes when you ship AI inside a mobile app.

Streaming LLM responses without dropping frames. On the web, you stream tokens into a <div> and let the browser paint. On mobile, your JS thread renders into a <Text>, and if you re-render too aggressively you drop frames. The pattern is to batch tokens before pushing them into React state, not to call setState for every chunk that comes off the stream.

API key management. I said it above and I'll say it again, because this is where most first-AI-mobile-app projects ship something insecure. You cannot put your OpenAI / Anthropic / whoever-else API key in your app. It will be extracted within minutes if anyone cares. You need a backend proxy, even a tiny one. A Cloudflare Worker or a Vercel function fronting the AI provider, with rate limiting per device, is the minimum.

Generative UI on mobile. This is the gap. On the web, Tambo and Vercel AI SDK UI let you have an LLM render React components on the fly. On mobile, there's nothing equivalent that's stable yet. (Aside: I'm building one, open source. More on that another time.)

On-device inference is possible, barely. llama.rn, Core ML, MLKit can run small models locally for specific use cases (transcription, classification, simple chat). But for anything resembling Claude or GPT-4 quality, you're still calling an API. Plan for that.

Here's a representative snippet, a streaming chat hook the way I'd write it for a mobile app, with the buffer pattern that keeps frames smooth:

// useStreamingChat.ts: pattern from the AI Mobile Launcher boilerplate
// Note: streaming fetch in RN needs expo/fetch (Expo SDK 52+) or a polyfill.
import { useState, useRef, useCallback } from 'react';
import { fetch as expoFetch } from 'expo/fetch';

type Message = { role: 'user' | 'assistant'; content: string };

export function useStreamingChat(apiUrl: string) {
  const [messages, setMessages] = useState<Message[]>([]);
  const bufferRef = useRef('');
  const flushTimerRef = useRef<NodeJS.Timeout | null>(null);

  const flush = useCallback(() => {
    if (!bufferRef.current) return;
    const chunk = bufferRef.current;
    bufferRef.current = '';
    setMessages((prev) => {
      const last = prev[prev.length - 1];
      if (last?.role !== 'assistant') return prev;
      return [
        ...prev.slice(0, -1),
        { ...last, content: last.content + chunk },
      ];
    });
  }, []);

  const send = useCallback(
    async (input: string) => {
      setMessages((prev) => [
        ...prev,
        { role: 'user', content: input },
        { role: 'assistant', content: '' },
      ]);

      // Hit your backend proxy. Never the AI API directly from the device.
      const res = await expoFetch(`${apiUrl}/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ input }),
      });

      const reader = res.body!.getReader();
      const decoder = new TextDecoder();

      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        bufferRef.current += decoder.decode(value);
        // Batch UI updates at ~60fps instead of every token.
        if (!flushTimerRef.current) {
          flushTimerRef.current = setTimeout(() => {
            flush();
            flushTimerRef.current = null;
          }, 16);
        }
      }
      flush();
    },
    [apiUrl, flush]
  );

  return { messages, send };
}

That pattern alone, buffering tokens and flushing at ~60fps instead of on every chunk, fixes most of the dropped-frames issues new RN devs hit when they first try streaming.

The shortcut

If you're at day zero with React Native and you want to ship an AI-powered mobile app, here's the boring truth: the first two weeks are setup. Routing, styling system, secure API proxy, streaming UI, auth, EAS pipeline, build configs, app icons, splash screens. You'll do all of this before you write your first feature.

I built AI Mobile Launcher because I'd done that two-week setup three times in a row. It's an Expo + React Native boilerplate with:

React Navigation with auth screens scaffolded
Reanimated patterns ready
Backend proxy for OpenAI / Anthropic / OpenRouter (deploy to Cloudflare Workers in one command)
Streaming chat UI with the frame-safe pattern from the snippet above
EAS Build and EAS Update preconfigured
App icon, splash screen, and store metadata templated
Revenue Cat, Authentication, Onboarding skills, Design system with react native restyle, High Performance architecture, that is scalable, included with UAMOS system., read it here

I spent 6 months losing fights with AI in React Native. Then I built U-AMOS.

The memory system that cut hallucinations 93% and token costs 91% across my own projects — and why the broader ecosystem is converging on the same pattern.

codemeetai.substack.com

It's the boilerplate I'd hand my past self on day zero. If you're a web dev planning your first AI mobile app, it cuts the setup phase from two weeks to an afternoon.

Use it, fork it, ignore it. The goal is to not lose two weeks to plumbing.

One last thing

If you're a web dev planning to build a mobile app: stop reading the "React Native vs Flutter" arguments. The framework isn't your bottleneck. The surface area you don't know yet, keyboard handling, native builds, store submissions, AI key management, is.

Pick Expo. Ship something small. Hit a wall. Read the docs for that wall. Repeat.

That's the whole path.

How I stopped Claude Code from hallucinating 42% of my React Code

Malik Chohra — Wed, 06 May 2026 08:52:13 +0000

TL;DR

I tracked 6 months of my own AI coding sessions in React Native. In my logs, 42% of AI-generated diffs contained at least one hallucinated import, fake API, or duplicate component.
Token costs were the second tax. Re-loading project context every session cost roughly $135/month per developer at the model pricing I was using.
Better prompts didn’t fix either problem. The AI didn’t need smarter instructions : it needed memory and a map.
I built U-AMOS (Universal AI Memory Operating System): a 3-tier memory bank, a context map, a rule priority system that splits “what to do” from “how to do it,” a 7-point anti-hallucination checklist, and a plan/act workflow that runs before any code is generated.
After deploying U-AMOS across my own projects over a 3-month tracking period: hallucinations dropped from 42% to 3%. Token costs dropped from $180/month to $18/month. Feature velocity increased roughly 5x. These are my internal numbers: I’ll note where external research reports similar magnitudes.
The framework is open and documented. U-AMOS 2.0 also ships pre-configured inside AI Mobile Launcher for anyone who doesn’t want to build it from scratch.

A note on the numbers

Everything in this article that is quantified — the 42%, the $135/month, the 91% reduction — comes from 6 months of my own session logs across my React Native projects. I tracked hallucinations manually, counted tokens via API usage dashboards, and measured debugging time against my own estimates. These are not controlled experiments.

What I can say is that the direction of the results matches what external research is starting to report. Memory-system papers are showing 40–60% accuracy improvements and 60–90% token reductions when you introduce structured memory into LLM workflows. Mem0’s Claude Code integration reports roughly 90% lower token usage with persistent memory vs full-context prompting. The order of magnitude is consistent. The exact numbers are mine.

The moment I stopped pretending it was working

It was a Tuesday in October. I was building a functionality for my app. I asked Claude Code to add a Redux toolkit usage to manage user accounts. It generated something that looked correct. I committed it.

Twenty minutes later, the build failed.

The AI had been imported useRouter from next/router. In a React Native project. That hook doesn’t exist on mobile. It was a 30-second fix, but it wasn’t the first time. It was the fourth time that week.

I started keeping a log. Every wrong thing the AI generated, I wrote down. After a month, I had the data from my own sessions:

42% of AI-generated diffs had at least one hallucinated import, function, or component
25% of the components it created already existed in the codebase under a different name
I was spending roughly 4 hours a week debugging things the AI had invented
I was using Cursor much more than Claude that time, so with Cursor, I had analytics dashboard, an d confirm some of my thesis

The frustrating part was that I knew the AI wasn’t getting worse. I was paying for the best models. The prompts were detailed. The context windows were huge.

The problem wasn’t the model. The problem was that I was treating it like a senior developer when it was behaving like a junior with no memory of the project, and no map of the codebase.

I have played before by adding rules, memory bank,.. but there were always issues in grasping the whole context, and i need to remind him much more often.

The token tax nobody talks about

While I was tracking hallucinations, I also started tracking token usage. The numbers were uncomfortable.

Every session, I was loading the same context: project structure, architecture decisions, naming conventions, what components already existed. The AI had no memory between sessions, so I kept reexplaining everything. Worse, when I didn’t re-explain, the AI would explore : running directory listings, opening files at random, building up its own picture of the codebase by trial and error.

That exploration is where the worst of the token bleeding happens. Asking “where is the authentication logic?” can trigger 25,000 tokens of blind navigation through folders before the AI finds it.

The math, at the model pricing I was using at the time:

Session 1: Re-load + explore project structure → 50,000 tokens
Session 2: Re-load + explore project structure → 50,000 tokens
Session 3: Re-load + explore project structure → 50,000 tokens
Daily total: 150,000 tokens
Monthly cost: ~$135/month per developer

(based on ~$30 per million tokens, prompt + completion)

That’s the invisible tax. Even when the AI was generating correct code, I was paying to give it the same context every time, plus paying for it to wander around the repo finding things it should already know about.

I do remember creating one file, that has architecture.md, where i put this type of context that i give each time, and then i created review_best_practices.md, to have the rules for the mistakes that he was repeating.

Then it comes the Claude Code best practices usage, I tried the obvious approaches first. Longer CLAUDE.md files. More detailed system prompts. Better instructions on what to remember.

None of it worked sustainably. The AI would hold context for a session or two, then drift. Because the problem wasn’t the prompt. It was the architecture.

The reframe that changed everything

The shift came when I stopped thinking of AI as a developer and started thinking of it as a system that needed memory built for it, and a map handed to it. I do remember watching an intreview by Thomas Dohmke, and he asked one of the best practices is to look at it as a colleague, not a tool.

A junior dev with no memory of your project would also generate hallucinated imports. Would also recreate components that already existed. Would also waste hours wandering through unfamiliar code looking for the right file. The AI wasn’t broken. The relationship was broken. I was asking it to behave like it had context it didn’t have.

A lot of content I’ve seen treats this as a prompting problem. Write a better system prompt. Use a longer context window. Be more specific in your instructions.

My experience, and increasingly what I see from teams who’ve shipped real production AI-assisted codebases, is that prompts plateau. Durable context compounds. The teams getting consistent AI output aren’t writing better prompts : they’re building memory systems that load the right context at the right time and update automatically when something changes.

you can read this article about best prompt engineering approach here:

Essential guide of Prompt Engineering for Software Engineers
Malik CHOHRA · 17 November 2025
Read full story

That’s what I built. I called it U-AMOS.

What U-AMOS actually is

U-AMOS : Universal AI Memory Operating System, is a framework for managing AI-assisted development. It has five components, each solving a specific failure mode I’d logged.


┌──────────────────────┐
                  │     Memory Bank      │
                  │ (Cold / Warm / Hot)  │
                  └─────────┬────────────┘
                            ↓
                  ┌──────────────────────┐
                  │     Context Map      │
                  │   (Index / Lookup)   │
                  └─────────┬────────────┘
                            ↓
                  ┌──────────────────────┐
                  │     Plan Mode        │
                  │  (before execution)  │
                  └─────────┬────────────┘
                            ↓
                  ┌──────────────────────┐
                  │ Validation Layer     │
                  │ (7-point checklist)  │
                  └─────────┬────────────┘
                            ↓
                  ┌──────────────────────┐
                  │   Code Generation    │
                  └─────────┬────────────┘
                            ↓
                  ┌──────────────────────┐
                  │  Progress Logging    │
                  │   (.memory updates)  │
                  └─────────┬────────────┘
                            ↓
                  └──────→ FEEDBACK LOOP ──────┘

1. The Memory Bank — three tiers, loaded on demand

Not all context is equally important for every task. So I tiered it.

Cold tier (project identity — loads rarely, ~10% of sessions):

00-description.md — what we’re building, in 500 words
01-brief.md — non-negotiable constraints
10-product.md — feature specs

Warm tier (architecture — loads on demand, ~30% of sessions):

20-system.md — how the system works
30-tech.md — stack and dependencies
60-decisions.md — why we chose what we chose
70-knowledge.md — lessons learned

Hot tier (current state — loads every session, 100%):

40-active.md — what we’re working on right now (max 500 words)
50-progress.md — what shipped recently

The hot tier is small (~2,000 tokens) and always loads. The warm tier loads when the task touches architecture (~5,000 tokens). The cold tier almost never loads during development — it’s the onboarding layer. A new developer (or a new AI agent starting a session) reads the cold tier once and understands the project without hunting through the entire repo.

The result: 2,000–10,000 tokens per session instead of 50,000. That assumes you’re maintaining the files actively — see the hygiene section below.

2. The Context Map — the exploration killer

This is the piece that does the most work for the lowest cost.

context_map.md is a single 500-token lookup file at the root of the project. It indexes everything: every feature, every service, every core UI component, with the entry path next to each one.

# Context Map
## Features (14)
| Feature        | Entry Point                      | Purpose            |
|----------------|----------------------------------|--------------------|
| auth           | src/features/auth/index.ts       | Authentication     |
| onboarding     | src/features/onboarding/index.ts | User onboarding    |
| todos          | src/features/todos/index.ts      | Todo management    |

## Services (15)
| Service        | Path                             | Responsibility     |
|----------------|----------------------------------|--------------------|
| logger         | src/services/logging/logger.ts   | Centralized logs   |
| analytics      | src/services/analytics/...       | Firebase analytics |

## UI Components (40+)
| Category       | Components                       |
|----------------|----------------------------------|
| Buttons        | Button, IconButton, FAB          |
| Forms          | Input, ControlledInput, Switch   |

When the AI starts a session and needs to know “where does authentication live?”, it reads one 500-token file instead of running directory listings, opening five files to compare them, and burning 25,000 tokens building its own mental model of the repo.

In my own logs, this single file removed roughly 60% of the per-session token consumption that wasn’t already covered by the memory bank. The math: 500 tokens replaces 25,000. That’s a 50x reduction on the most expensive part of every session : discovery.

3. The Rule Priority System — three tiers, with generators separate from rules

The same logic applies to coding rules.

Critical rules (always load, ~4,000 tokens):

Meta-rules and session protocol
Anti-hallucination checklist
Common violations (no inline styles, no console.log, no hardcoded strings, no API keys)

Important rules (task-specific, ~2,000 tokens each):

Design system patterns: loads if working on UI
State management rules: loads if working on the state
i18n patterns : loads if adding translations
Navigation patterns: loads if adding routes

Recommended rules (load if relevant):

Performance optimizations
Testing patterns
Security and platform-specific privacy rules

The other architectural distinction that mattered: I separated generators from rules. They look similar but they solve different problems.

Generators answer what to do. Step-by-step implementation guides for recurring tasks: “add a new language,” “add a new screen,” “add a paywall.” They’re workflow documents — copy this template, register here, run this script.
This one i include in my Ai react native boilerplate:
https://aimobilelauncher.com/, and i explained them there, you can check the code about different generators.
Rules answer how to do it well. Code quality patterns and constraints: this is what good styling looks like; this is what the wrong import path looks like.

When you mix the two, when your “how to add a language” doc also tries to explain every i18n best practice, the AI gets overwhelmed and follows neither cleanly. Splitting them means the AI reads the generator to know the steps, then reads the matching rule pack to write the code correctly. Two clean reads. No drift.

4. Concrete examples beat abstract rules

This is a philosophical point but it’s the reason U-AMOS rules actually work.

Most rule documents read like this: “Use proper styling conventions. Avoid inline styles where possible.”

Rules in U-AMOS read like this:

## Styling

### ❌ WRONG — inline styles
<View style={{ marginTop: 20, padding: 16 }}>

### ✅ CORRECT — Restyle props
<Box marginTop="xl" padding="lg"/>

### Exception: unsupported properties
<Box marginTop="xl" style={{ opacity: 0.5 }}>
(opacity is not a Restyle prop, inline is acceptable here)

LLMs don’t generalize abstract principles well. They pattern-match. If you show them what wrong looks like next to what right looks like, they reliably produce the right pattern. If you tell them to “follow good practices,” they produce whatever the training data nudged them toward last time.

Every rule pack in U-AMOS is built this way. ❌ wrong → ✅ correct → exception (if any). No paragraphs of theory. No abstract guidelines. Just visual diffs. This is the single biggest determinant of whether a rule actually changes the AI’s output or gets ignored.

5. The 7-Point Anti-Hallucination Checklist

Before any code is generated, the AI verifies:

Does the file I’m editing exist?
Did I check the component inventory before creating something new?
Did I check the service registry?
Is the import path correct?
Does the function I’m calling actually exist in that file?
Am I using the project’s i18n pattern, not hardcoded strings?
Am I using the project’s logger, not console.log?

If any answer is no, the AI stops and verifies before continuing.

The first week I deployed this, my hallucination rate in my own sessions dropped from 42% to under 5%. Not because the model improved. Because I made verification mandatory before generation.

Each of these rules is manually crafted.

6. Plan/Act Mode — no code without a plan

This is the piece I added after the initial U-AMOS deployment, and it might be the highest-leverage addition.

Before touching more than one file, the AI must:

Read .memory/40-active.md (current focus)
Draft an implementation plan in plain markdown
Wait for my confirmation
Execute only after approval
Log what it actually shipped back into .memory/50-progress.md

This sounds slow. It’s actually faster because you catch architectural mistakes at the plan stage instead of the debugging stage. Tweag’s Agentic Coding Handbook and Lullabot’s memory bank guide both document the same pattern. It’s becoming standard practice in teams using agentic coding seriously.

What changed after U-AMOS

I tracked the same metrics for 3 months after deploying U-AMOS across my own projects.

Hallucinations (from my logs): 42% → 3% (93% reduction)
Tokens per session (average): 48,000 → 4,200 (91% reduction)
Token cost (at my model tier): ~$180/month → ~$18/month
Time debugging AI errors: 4 hours/week → 20 minutes/week
Duplicate components created: 23 in the 3 months before → 0 in the 3 months after
Feature velocity: roughly 5x faster on features I tracked end-to-end

I also started tracking which rule packs loaded most often and which hallucination types were still slipping through. That observability layer is what tells you where the system needs a new rule file vs where the AI needs better examples.

Memory hygiene: pruning, plus living rules

The mistake I see in most memory bank setups is treating the files as append-only. They’re not. They need pruning.

My current hygiene routine:

40-active.md updates at the start of every work session (what’s the actual focus today)
50-progress.md gets a new entry after every shipped feature : old entries archive monthly
70-knowledge.md gets pruned weekly : if a lesson is now in a rule file, it gets removed from the knowledge doc
20-system.md only updates when architecture actually changes
If the AI proposes changes to any memory file, it does it as a plan diff I review : it never writes to memory silently

There’s one more file that prevents documentation rot: updated_rules.md. It’s a changelog for rule exceptions.

When the team makes a real exception to a rule : for example, “we never use inline styles, EXCEPT for the opacity prop because Restyle doesn’t support it” : that exception goes in updated_rules.md with a date and a reason. Not into the main rule file.

# Updated Rules (Living Document)
## 2025-12-20 — Inline styles exception

**Original rule**: NO inline styles ever
**Updated rule**: NO inline styles EXCEPT for single properties not supported by Restyle (opacity)
**Why**: Restyle doesn’t support opacity prop
**Example**: ✅ <Box marginTop="xl" style={{ opacity: 0.5 }} />

Why this matters: rules become outdated quickly, and rewriting them every time creates drift. The living rules file lets the AI always check the latest guidance without losing the original logic. Exceptions are explicit and dated. Historical context is preserved. The main rule files stay clean.

The 2,000–10,000 token figure holds only if you maintain all of this. If you let the files grow unchecked, you’ll hit 50,000 tokens again within two months. The context window isn’t the bottleneck : your maintenance habits are.

What still doesn’t work, and what’s on the roadmap

This isn’t a finished system. Four things still fail or are incomplete:

Long sessions. Context degrades over multi-hour conversations. I re-attach memory bank files every 30–40 messages. A better solution is probably an MCP server that handles re-injection automatically, but I haven’t built it.

Performance edge cases. The AI generates working code that sometimes re-renders too aggressively. Architecture rules help, but don’t eliminate this. I m fixing this by creating performance rules for expo apps. i m using the official one from Expo, but it is not enough, and with the project architecture, it needs a lot of fixes and improvement.

Cross-project memory. U-AMOS handles per-project memory. The next layer — preferences and patterns that follow you across every project you touch — is what tools like Mem0’s MCP integration and Claude Code’s own auto-memory system are starting to solve. If you find yourself re-teaching the same conventions in every new repo, cross-project memory is the fix. I’m watching this space closely.

How to set up U-AMOS yourself

I have created a Prompt intialization for the system, i test it on some of my projects, and it was succefful. not so many rules though, but you can customize that part

You can check it here: link

Thanks for reading Code Meet AI: Stay relevant in the AI era! Subscribe for free to receive new posts and support my work.

Or, if you want it pre-configured

I built AI Mobile Launcher as the productized version of U-AMOS for React Native.

It ships with:

The full 9-file memory bank is pre-structured for a new project
A pre-built context map of every feature, service, and UI component
All critical, important, and recommended rule packs — written as visual diffs, not paragraphs
The split between generators (workflows) and rules (patterns) is already in place
Pre-built component and service inventories
Cursor and Claude Code entry points configured with plan/act mode
Generators for common features (onboarding, paywalls, i18n, design system)
The 7-point anti-hallucination checklist is embedded in every entry point
A starter updated_rules.md ready for your first exception

The Lite tier is free on GitHub. U-AMOS 2.0 ships fully configured in the Starter tier. If you’re starting a new React Native project and want the memory system running from day one without the setup work, that’s the fastest path. aimobilelauncher.com

If you’re adding U-AMOS to an existing project, the steps above are enough to get started. The framework isn’t magic — it’s the result of 6 months of failed sessions, logged and analyzed, until the AI stopped fighting me and started shipping with me.

What I want you to take from this

The content I see most often on AI coding frames is this as a prompting problem. Use a better system prompt. Be more specific. Add more examples to your instructions.

My experience over 6 months of tracking my own sessions is that prompts hit a ceiling. Once you’ve written a clear, specific prompt, the next 10 iterations give you marginal gains. Memory and structure compound differently . every lesson added to the memory bank improves every future session. Every entry in the context map saves another exploration loop. Every rule written as a visual diff prevents an entire category of hallucination permanently.

The AI isn’t a developer you prompt. It’s a system you build context for. Build the memory. Hand it the map. Show it what wrong looks like next to what right looks like. Stop paying to re-explain the same architecture every day.

U-AMOS is how I did it. The principles work without my specific files. The files work better with the principles. Either way: fix the memory and the map first, then build the product.

I write Code Meet AI weekly — AI in mobile development, real tradeoffs, what’s actually working in production. Next issue: agent-first mobile architecture and why most “AI features” in apps are just bolted-on chatbots pretending to be product. → https://codemeetai.substack.com/

Claude Code for beginners: what it is, how to set it up, and why people won’t shut up about it

Malik Chohra — Fri, 20 Mar 2026 10:48:42 +0000

TL;DR

Claude Code is Anthropic’s AI coding agent that runs in your terminal, reads your whole project, edits files, and loops until the task is done
It reached $1B in six months, partly because non-technical users started using it for SEO, file organization, marketing automation, and yes, literally monitoring tomato plants
Setup takes under 10 minutes: install, authenticate, run claude in your project folder
CLAUDE.md is the most important thing to set up — it gives Claude permanent memory about your codebase
Plan Mode makes Claude think and propose a plan before touching anything — essential before any task that spans multiple files
Claude Skills are installable, reusable workflows — over 25,000 exist on GitHub right now

Before we start, a word:

I started working on an AI native Boilerplate for Mobile Development. A solution that has a scalable and clean architecture, with the best approaches to have a great app performance. Adding more AI context and rules, to make the AI hallucinate less, and keep the clean code. You can use it either with Cursor, Antigravity, Claude Code,… and it gives the amazing results as expected. Also, it has most important features that help you launch your app fast

I m now in the Beta version, where i need people to test it, and gather feedback, you will get access to the code base for free, and i m looking for feedbacks.

Check it here: https://aimobilelauncher.com/

Also, I m working on a newsletter for Tech and non tech people, on how to use AI tools for App development: https://aimeetcode.substack.com/. Subscribe here: https://aimeetcode.substack.com/

If you need custom solution, or a mobile development, contact us in :https://casainnov.com/

Introduction:

Lately, I start to see something cool: Product manager, Designer, CS teams,… and non technical roles have started to use Terminal. I was surprised to see that now most of the people have a terminal open, which at some point was only for tech people who really understand what is going on. Now, the terminal in computers has become the norm

It is highly attributed that all of them started using Claude Code to run their project and to assist them in their work, with custom skills for their specific role / organisation. The trend is getting more and more

I don’t want to talk about combining it with OpenClaw, which took the internet by storm.

Why is everyone suddenly talking about this

I started using it at first when it was announced: as a tech person, Anthropic models are the best at coding, and I use most of their models < depends on the tasks in hand, of course>. And I wasn’t that surprised with Claude Code. It has skills and rules, but I kept the same AI architecture for coding < rules, context, memory bank, indexing…>

I have been using this approach for my aimobilelauncher.com to launch my AI native boilerplate. The plan mode was really helpful, and including skills for it is my roadmap for later

Then Anthropic confirmed $1 billion in annualized revenue in six months, and Fortune ran the story. I read it expecting the usual: 10x engineer productivity, enterprise contracts, vibe coding demos.

The use cases they listed were: booking theatre tickets. Filing taxes. Monitoring tomato plants. Combing through museum archives. Automating Slack messages.

That’s not a developer story. Something else was happening.

Netflix, Spotify, Uber, and Salesforce had all adopted it. Accenture announced they’re training 30,000 staff on the platform. Not 30,000 engineers. 30,000 staff. Anthropic’s own non-technical marketing team runs it to automate Google Ads creative, App Store metadata, email workflows, and SEO.

The reason it spread outside engineering is simpler than most people explain: Claude Code doesn’t need you to know how to code. It needs you to know what you want done. The terminal is just a text box. Files are organized information. Claude Code is an agent that can read, edit, and act on both. Also, the community adopted it very fast, and they started creating solutions on top of it: Open source skills is an example.

## What Claude Code actually is

Claude Code is a terminal-native AI agent from Anthropic. Not a plugin. Not autocomplete. It runs in your terminal with access to your actual files and your actual command line.

Give it a task, and it runs this loop:

Reads your files, searches directories, checks configs
Proposes a plan
Edits files, runs commands
Reads the output — test results, build logs, errors
Fixes what broke and runs again

Step five is what most AI coding tools skip. Copilot writes a suggestion and stops. Cursor helps you write code per session and stops. Claude Code stays in the loop until the job is done — or until it runs into something it genuinely can’t figure out and asks you.

How to install it

You need one of these to start:

A paid Claude subscription (Pro at $20/month minimum)
Or a Claude Console account with active API billing

No free tier. That’s the only real gate.

`// macOS / Linux:
curl -fsSL https://claude.ai/install.sh | bash

// Via npm (still works, but deprecated by Anthropic):

npm install -g @anthropic-ai/claude-code`

After installing:

cd your-project-folder claude

First run asks you to authenticate with a link. It sends a verification code back to the terminal. About 60 seconds total. Then you’re in.

## Set up your workflow: CLAUDE.md

CLAUDE.md is a Markdown file you create at the root of your project. Claude Code reads it at the start of every session.

Without it, every session starts from scratch. Claude doesn’t know your stack, your folder structure, your naming conventions, or the three things you told it never to do two sessions ago. It just scans what it can see and makes assumptions.

That leads to weird architecture suggestions, wrong import paths, and Claude confidently using a pattern that your codebase specifically avoids.

CLAUDE.md fixes this. You write down the things Claude should always know, and it reads them every time.

Here’s a real example for a React Native / Expo project:

`# Project: My App

Stack

React Native with Expo SDK 54
TypeScript (strict mode)
NativeWind for styling
Redux for state management
Supabase for backend

Coding conventions

Functional components only — no class components
TypeScript with explicit return types
Named exports, not default exports
Folder structure: screens/, components/, hooks/, utils/, services/

What never to do

Do not install new libraries without asking first
Do not modify .env files
Do not refactor code unless explicitly asked

Git

Always create a branch before making changes
Conventional commits: feat(), fix(), refactor()

Expo

always using 'npx expo install

You can ask Claude to generate a first draft for you:

Read the project structure and generate a CLAUDE.md file for this codebase.

Plan Mode — think before you touch anything

Most people find out about Plan Mode by watching it not be on and regretting it.

Plan Mode makes Claude read files and ask questions, but it cannot write, edit, or run anything while in this state. It has to think, plan, and explain what it intends to do before execution starts. Then you approve, modify, or cancel.

To activate: press Shift + Tab twice. The mode indicator in the bottom left of the terminal changes.

The practical difference is clearest with an example.

Without Plan Mode, you say:

“Add authentication to this React Native app”

Claude starts writing immediately. It picks an auth library, picks a navigation approach, picks a token storage strategy. By the time you see the output, it’s made four foundational decisions you might disagree with and they’re already in the files.

With Plan Mode:

“Add authentication to this React Native app”

Claude asks: “Which auth provider? How is your navigation structured? Where do you store tokens today? Do you want biometric support?” You answer. Claude writes a plan: specific components, a sequence, the libraries it wants to use. You read it. You push back on anything wrong. You approve. Then it executes with a clear, agreed-upon approach.

I use Plan Mode for anything that touches more than two or three files. It’s not slower — the time you spend reviewing the plan is time you’d spend fixing wrong assumptions later.

For non-technical users: Plan Mode is honestly the feature that makes this feel safe. Nothing happens without you seeing it first.

— -

Commands worth knowing

These come up in almost every session:

A note on /clear: in long sessions, Claude starts to lose track of earlier instructions. Not always

/clear and paste a quick summary of where you are. Claude gets back on track fast. Use /compact if you want to keep a condensed memory of the session.

I usually do the 10 prompt rules: after 10 prompts, compact.

## Claude Skills

This is the part most people skip when they start. That’s usually where the frustration comes from.

A Claude Skill is a Markdown-defined workflow packaged as a ZIP or a GitHub repo. It tells Claude exactly how to execute a specific, repeatable task, step by step, with the rules and output format written in.

Every time you want a repeatable task done without a Skill, you explain the whole process from the start. Every session. Skills replace that. Install once, type one command, and Claude runs the full process the same way every time.

Think about any process you’ve explained to someone more than twice. A Skill is that explanation written down properly, so Claude follows it without you having to be there for every run.

There are over 25,000 community-built Skills on GitHub:

awesome-claude-skills: https://github.com/travisvn/awesome-claude-skills

skills.sh: https://skills.sh/

browsable marketplace: https://github.com/anthropics/skills

Skills cover SEO audits, React Native performance checks, documentation generation, DevOps automation, security reviews, data analysis, and a lot more. The ecosystem is growing fast, and most of it is free.

Anthropic also shipped organization-level Skills deployment in December 2025. Admins can now push Skills workspace-wide with automatic updates. Teams can standardize processes the same way they standardize code.

How a Skill actually works

Each Skill has a SKILL.md file. YAML frontmatter at the top tells Claude when and how to invoke it. The Markdown below is what Claude follows when it runs.

— -
name: rn-performance-audit
description: Audits a React Native screen for performance issues.
Use when reviewing a screen component or when the user asks
about performance, re-renders, or slow UI.
— -
When auditing a React Native screen for performance:

Check for unnecessary re-renders (missing useMemo, useCallback)
Identify heavy computations inside render
Check FlatList vs ScrollView usage
Look for images without proper caching or resizing
Flag synchronous operations on the main thread

Output: a prioritized list of issues with code-level fix suggestions.

Once installed, Claude auto-loads this Skill when you ask about performance, or you invoke it directly with /rn-performance-audit.

— -

Example of A skill that I use: Claude SEO skill

I have started lately using seo skill: https://github.com/AgriciDaniel/claude-seo. It is really helpful for website SEo audit, and then adding fixes

Check how to install it there, and then you do / to call it, and do /seo so it gives you the whole report

I like after that to ask to create a fix plan, using Plan mode for that. and then i ask it to implement it

Things that will catch you off guard

I learned these the hard way, so you don’t have to.

Commit before every Claude session:

Claude can introduce regressions. It fixes one thing and occasionally breaks something in a different file. Not often, but enough. A clean Git commit before you start means rollback is one command. I’ve needed it more than once.

Auto-accept is a trap.

*There’s a — dangerously-skip-permissions flag that lets Claude apply all changes without asking. Don’t use it until you’ve run a task type several times and understand its output well. I let it “tidy up some type definitions” once and got 40 renamed interfaces back. All of them logical. None of them what I wanted. I rolled back with Git and never used that flag on unfamiliar tasks again.

Token costs sneak up on you:

Long sessions, large repos, parallel agents — these burn tokens faster than a focused single-task session. Run /cost inside any session to check where you are. Monitor the Anthropic console when you’re starting out. You want to know what a typical session costs before you schedule one as a weekly routine.

Messy codebases produce messy results:

Claude Code’s ability to understand your project depends entirely on how coherent that project is. Scattered configs, inconsistent patterns, no CLAUDE.md — it still runs, but the suggestions start to drift in weird directions. The architecture discipline makes it more useful. Chaos amplifies chaos.

Rate limits reset on a rolling 5-hour window, not daily:

If you hit your limit at 2 pm, you get a fresh allocation around 7 pm. Once I understood this, I stopped fighting the limits and started working in focused sessions instead. Honestly, a better habit anyway.

FAQ

Do I need to know how to code to use Claude Code?
No. The VS Code extension and Claude Desktop both work without the terminal. You describe what you want in plain language and Claude Code executes. Non-technical users are currently using it for SEO, marketing workflows, file management, and data processing.

What is CLAUDE.md and why does it matter?
It’s a Markdown file in your project root that Claude Code reads at the start of every session. It stores your stack, coding conventions, and what Claude should never do. Without it, every session starts from scratch. It’s the single biggest difference between a good and a bad Claude Code experience.

What is Plan Mode?
A state where Claude can read files and ask questions, but cannot write or run anything. It proposes a full plan first. You review and approve before a single file is touched. Activate with Shift + Tab twice.

What are Claude Skills?
Reusable workflow instructions packaged as Markdown files in a ZIP or GitHub repo. Install once, run on demand. Claude follows the workflow consistently every time without re-explanation.

Where do I find Skills?

awesome-claude-skills on GitHub: https://github.com/travisvn/awesome-claude-skills

How much does Claude Code cost?
It requires a paid Anthropic subscription. Pro is $20/month with roughly 45 messages per 5-hour window. Max 5x is $100/month. No free tier access.

Can I use this for React Native development?
Yes. Claude Code works with any file-based project. For React Native and Expo, the main thing is setting up CLAUDE.md with your stack details and conventions. Once that’s in place, Claude can refactor screens, add features, debug issues, and run Expo CLI commands the same way it does for any other project.

Optimizing animations for 60 FPS with React Native Reanimated

Malik Chohra — Thu, 19 Mar 2026 07:47:09 +0000

Before we start, a word:

Check it here: https://aimobilelauncher.com/

Also, I m working on a newsletter for Tech and non tech people, on how to use AI tools for App development: https://aimeetcode.substack.com/. Subscribe here: https://aimeetcode.substack.com/
If you need custom solution, or a mobile development, contact us in :https://casainnov.com/

Introduction

Smooth animations aren't a "nice-to-have." When users say "this app feels slow," they almost always mean animations are dropping frames - even if they'd never describe it that way.
After shipping features on apps with millions of active users, I've learned that animation performance is one of the first things that breaks at scale and one of the hardest to debug if you haven't seen the failure modes before. Here's what actually holds up in production.

Speaking of scale: in Mobile apps, I mean by scale is a bigger team, a lot of users who each person have a different devices, operating system, slow and old devices, or different sizes. In this part, you need to architect your app way better before

TL;DR

60 FPS means keeping animations off the JS thread
Use shared values, not React state
Animate transform + opacity; avoid layout properties
Batch animations and keep logic simple
Test on real devices, not simulators

Why it matters

Dropped frames make an app feel slow. Janky gestures make it feel cheap. And inconsistent motion is hard to explain to a product manager but immediately obvious to users. Beyond UX, smoother animations also mean better battery life, better behavior on low-end devices, and less competition with your business logic.
The one rule that matters most

If your animation depends on the JS thread, you've already lost.
Reanimated runs animations on the UI thread, independent from JS. Everything else in this article is just ways to not break that.

1. Animate only what the native driver supports

Safe: transform, opacity. Slow: width, height, backgroundColor, anything layout-driven.
`
// Good
const style = useAnimatedStyle(() => ({
opacity: opacity.value,
transform: [{ translateY: y.value }, { scale: scale.value }],
}));

// Bad
const style = useAnimatedStyle(() => ({
width: width.value,
height: height.value,
}));`

If you feel like you need to animate the layout, stop and rethink the design. The animation is probably covering for a structural problem.

2. One shared value, not five

I still see this in senior-level code:

// Too many values const opacity = useSharedValue(0); const scale = useSharedValue(0); const translateY = useSharedValue(0); Collapse them: const progress = useSharedValue(0); const style = useAnimatedStyle(() => ({ opacity: progress.value, transform: [ { scale: progress.value }, { translateY: (1 - progress.value) * 20 }, ], }));

One value, fewer calculations, smoother frames. The math is trivial on the UI thread.

3. Batch your animations

Starting animations at different times means the thread is doing more work than it needs to. A single withTiming can drive opacity, scale, and translation at once:

useEffect(() => { progress.value = withTiming(1, { duration: 300 }); }, []);

Obvious in hindsight, but easy to miss when you're wiring up components quickly.

4. Springs for gestures

Timing functions work fine for entrances and exits. For gestures, springs are better - they feel more physical, and they put less pressure on the frame budget:

translateX.value = withSpring(0, { damping: 15, stiffness: 150, });

This matters most for drag, swipe, and scroll interactions, where any stiffness or lag is immediately noticeable.

5. Keep gesture handlers dumb

No conditionals. No calculations. No JS calls inside gesture handlers.

onActive: (event) => { x.value = event.translationX; y.value = event.translationY; }

The UI thread moves pixel. Anything else belongs else where.

6. Clean up animations

Animations that outlive their components create memory pressure. Easy to overlook, adds up on apps with deep navigation:

useEffect(() => { return () => { progress.value = 0; }; }, []);

7. How to test

Simulators will lie to you. A simulator doesn't have thermal throttling, doesn't run on 3GB of RAM, and doesn't have fifteen background apps fighting for CPU. Test on low-end Android, older iPhones, and devices that have been warm for a while.
If it holds up there, you're fine.

Always go with an old device,

What I actually see in code reviews

Animating every component entry - motion should mean something; overuse kills that
Animations tied to React state - state updates and animation updates are not the same thing
Durations over 500ms - they feel slow and block frames; tighten them
Elaborate easing curves - usually not worth it; keep it consistent

Before you ship

Ask yourself: Is this running on the UI thread? Can one shared value drive it? Did I test it on real hardware? If yes across the board, you're done.

FAQ

Does Reanimated always guarantee 60 FPS?
No. It gives you the right architecture. You still have to use it correctly.

Should I use Reanimated for every animation?
Not necessarily. Simple layout animations are fine with LayoutAnimation. Reanimated earns its complexity with gestures and anything UI-thread-sensitive.

Are springs always better than timing?
For interactions, yes. For entrances and exits, timing is usually fine and easier to control.

Is performance worse with Expo?
No. Expo and Reanimated together are production-proven

Example from the AI Mobile Launcher

Integrate DeepSeek AI into React Native app: Full guide for Generative AI in React Native

Malik Chohra — Sat, 08 Mar 2025 10:06:35 +0000

Integrate DeepSeek AI into React Native appIntegrate DeepSeek AI into React Native app: Full guide for Generative AI in React Native

Introduction

React Native has revolutionized mobile app development by enabling developers to build native applications using JavaScript and React. Since its introduction by Facebook (now Meta) in 2015, it has become one of the most popular frameworks for cross-platform mobile development, powering thousands of apps across iOS and Android platforms.

We've witnessed an unprecedented race in generative AI development in the last year. While OpenAI's GPT series and Anthropic's Claude have dominated headlines, open-source alternatives like Meta's Llama and DeepSeek are rapidly gaining traction. These open-source models are particularly interesting because they offer comparable performance while providing more flexibility and control over deployment.

Companies are racing to create an AGI that can solve all the humans problems, although the road is still far for that in my opinion, but we are getting closer each time, and billions of dollars are spent on that. For example the 500 billions projects in USA and the 50 billions AI investment from UAE in France.

DeepSeek, in particular, has shown impressive results in recent benchmarks. According to their technical report, DeepSeek has demonstrated superior performance in coding tasks and mathematical reasoning compared to other open-source models. Their 67B parameter model has achieved competitive results against GPT-4 in several benchmarks, making it an attractive option for developers looking for powerful AI capabilities in their applications.

DeepSeek's impressive performance in benchmarks suggests a promising future for open-source AI models. As these models continue to improve, developers will have more options for implementing AI capabilities in their applications without being locked into proprietary solutions.
The ability to self-host these models or use them through APIs provides flexibility in deployment options, which is particularly important for applications with specific privacy or regulatory requirements.

In this article, I will explain to you how to use it inside a React and React Native app, although the funny part is that they use Open ai SDK package to integrate their solution, which is a clever move from the company to make the switch easy, as the price/performance quote is much better if you use Deepseek that using Open AI models

Integrating DeepSeek AI in React Native

Let's walk through the process of integrating DeepSeek AI into a React Native application to create an AI chat interface.
1. Setting Up the Project

First, ensure you have the necessary dependencies installed:
context

npm install react-native-gifted-chat axios react-native-paper react-native-safe-area-context // or if you are using Yarn yarn install react-native-gifted-chat axios react-native-paper react-native-safe-area-context

2. Creating the Chat Interface

The implementation uses react-native-gifted-chat, a popular library for building chat interfaces in React Native. Here's how to structure your component:

import React, {useState, useCallback, useEffect} from 'react'; import {GiftedChat, IMessage} from 'react-native-gifted-chat'; import axios from 'axios';

3. Configuration

Set up your DeepSeek API credentials:

const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions'; const DEEPSEEK_API_KEY = 'Your_API_Key_Here';

4. Implementing the Chat Logic

The core functionality revolves around two main parts:
Message Management

const [messages, setMessages] = useState<IMessage[]>([]);
const [loading, setIsLoading] = useState(false);

// Initialize with a welcome message
useEffect(() => {
  setMessages([
    {
      _id: 0,
      text: 'Type your question or share what's on your mind…',
      createdAt: new Date(),
      user: {
        _id: 0,
        name: 'DeepSeek',
        // url for deepseek logo
        avatar: 'https://cdn.deepseek.com/platform/favicon.png', 
      },
    },
  ]);
}, []);

6. API Integration

const sendMessageToDeepSeek = async (userMessage: IMessage) => {
  setIsLoading(true);
  try {
    const response = await axios.post(
      DEEPSEEK_API_URL,
      {
        model: 'deepseek-chat',
        messages: [{role: 'user', content: userMessage}],
      },
      {
        headers: {
          Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
          'Content-Type': 'application/json',
        },
      },
    );
    // Process response and update chat
  } catch (error) {
    console.error('DeepSeek API Error:', error);
  } finally {
    setIsLoading(false);
  }

7. UI Customization

const renderInputToolbar = (props: InputToolbarProps<IMessage>) => (
  <InputToolbar {...props} containerStyle={{backgroundColor: '#f0f0f0'}} />
);

const renderSend = (props: SendProps<IMessage>) => (
  <Send {...props}>
    <View style={styles.sendButton}>
      <Icon source="send" color="blue" size={30} />
    </View>
  </Send>
);

return (
<GiftedChat
        messages={messages}
        onSend={messages => onSend(messages)}
        onInputTextChanged={setText}
        bottomOffset={insets.bottom}
        renderSend={renderSend}
        renderInputToolbar={renderInputToolbar}
        renderChatFooter={renderFooter}
        scrollToBottomComponent={renderScrollToBottom}
        user={{
          _id: '1',
          name: 'Malik',
          avatar: PROFILE_IMAGE,
        }}
      />
)

The interface can be customized using custom renderers:

Check the full projects and code here: https://reactnativetemplates.com/screensCode/19

React Native Template

React Native Template, contains beaultifully designed, expert crafted React Native components and screens. To Help you…r

https://reactnativetemplates.com/ react native links

Best Practices and Considerations

API Key Security: Never expose your API key in the client-side code. Use environment variables or a backend service to secure your credentials.
Error Handling: Implement robust error handling for API calls and network issues.
Loading States: Provide visual feedback during API calls using loading indicators.
Message Persistence: Consider implementing local storage to persist chat history.

Conclusion

Integrating DeepSeek AI into a React Native application is straightforward and opens up possibilities for creating sophisticated AI-powered chat interfaces. As the AI landscape continues to evolve, having knowledge of implementing these integrations becomes increasingly valuable for modern mobile developers.
- -
This article provides a comprehensive overview of integrating DeepSeek AI with React Native, from the technical implementation details to the broader industry context. You may want to add specific benchmark numbers and more recent comparisons as they become available, as well as any additional implementation details specific to your use case.

Get the Best React Native Templates in 2025: Community work

Jumpstart your app development with high-quality React Native templates! Discover a variety of pre-designed screens and code examples at React Native Templates:

https://reactnativetemplates.com/.

Want to contribute and showcase your React Native expertise? You can easily add your own templates to share with the community and gain valuable exposure. Browse our diverse collection of React Native screens to find the ideal foundation for your next project.
If you need to integrate Advanced functionalities in your Mobile app, create one from scratch, or need consulting in react native. Visit the casainnov.com, and check their mobile app page, and contact them there.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium.

ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy #TurboModule #nativeModule

Use Generative AI in React Native: Create Mistral AI Mobile app

Malik Chohra — Sat, 23 Nov 2024 12:32:03 +0000

Introduction

Generative AI tools have been leading the headlines for quite some time now, with each new release promising to reshape the way we live, work, and interact with technology. These emerging tools have plainly caused a spark of innovation from automating creative processes to enabling human-like conversations. Every few months, we hear about a new generative AI tool that claims to be a game-changer, fueling the hype and setting expectations sky-high.

While much of this development has centered around the web, recent advancements have started to shift attention to the desktop. Tools are now incorporating AI features directly into operating systems or productivity software, increasing convenience and functionality for users on the desktop. Still, one major market remains under-served: mobile applications.

Mobile applications are at the heart of our lifestyles today and hold a host of opportunities for integrating generative AI into them. The global mobile application market size was valued at USD 252.89 billion in 2023 and is projected to grow at a compound annual growth rate (CAGR) of 14.3%

From 2024 to 2030 From AI-powered chatbots that can be embedded in messaging applications, and personalized content creators used through social media platforms, to productivity applications that can compose emails or summarize documents on the go, the potential of mobile applications to deploy generative AI is immense; a space where very few tools have dared to venture.
**
Read full article here: https://casainnov.com/use-generative-ai-in-react-native-create-mistral-ai-mobile-app
**
Generative AI Tools: A Snapshot
Generative AI is not a vertically oriented market. Several big names lead the charge in this crowded field. Quick overview:

ChatGPT, courtesy of OpenAI, perhaps is the most well-known. It has become synonymous with generative AI. From casual conversations to deep problem-solving, it is in wide usage. By leading the charge, it has smoothened the way for developers to integrate AI into their web apps via APIs.: https://openai.com/

Gemini by Google DeepMind: This exciting new entrant in the generative AI space introduces multimodal capabilities to handle both text and image processing. Positioning itself firmly as a hard competitor to ChatGPT on both performance and versatility.: https://gemini.google.com/

Claude by Anthropic: Designed for safety and reliability, Claude aims at helpful and less biased outputs. It’s gaining traction for applications where quality of content and ethics in AI use are a priority.: https://claude.ai/

Mistral AI: A European player, Mistral AI offers high-performance and scalable, developer-friendly tools. It might not have the same brand recognition in the market today as ChatGPT or Claude, but its underlying APIs have much potential in certain use cases.: https://mistral.ai/

Ai Tools comparaison
Mistral AI: Lagging Behind in Adoption
Despite the fact that Mistral AI has all the makings of a promising player in the generative AI ecosystem, it is still struggling to break into the mainstream. Unlike OpenAI, which enjoys great publicity and overall exposure in every big platform, Mistral AI is still carving its niche. Contributing reasons include:

Insufficient Marketing: Mistral AI has failed to enjoy the buzz in marketing like its other competitors, especially in non-European markets.

Developer-Centric: While this makes Mistral AI an excellent choice for more technical users, the wide consumer market has yet to be captured.

Neglecting Mobile: Similar to many generative AI tools out there, Mistral AI has placed most of its efforts into web-based solutions, leaving a large gap in its mobile integration and adoption.

This, however, is an exciting gap. The idea is to bring Mistral AI into the mobile domain, not only realizing its potential but also showcasing the generative AI capabilities beyond traditional markets. This is what I tried to achieve in my project: using Mistral AI’s generative API within a React Native app, showing how such generative AI could add value to mobile apps and expand the effect of generative AI into everyday mobile experiences

React native and Generative AI tools

The best part about React Native is the usage of Typescript, which includes the usage of Typescript API tools, the same that is used in React for example. most of the apps that have a Web presence, can be integrated into a Mobile app to offer the same service.

Also, it will generate an app that works for both Android and iOS, which makes it easier to attract more users. and with the latest performance updates ( the new architecture), businesses are shipping a native feeling Apps in React native, with half the time of development and half the effort.

Of course, there is a difference when it comes to that, but usually the same approach.

Step by step to implement Generative AI API in React Native
In this tutorial, I create a Mistral AI Mobile app in React native, I will walk you through the tutorial step by step in order to do that:

The GitHub link: https://github.com/chohra-med/mistralAIRN

*The app contains the following,
*
— The app was developed using My boilerplate: https://blog.stackademic.com/architect-your-react-native-app-to-handle-millions-of-users-and-large-development-teams-cfc566ea8bf0

Dark and Light Mode: https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-0224797da39b
Hide keys in React native using the config: https://casainnov.com/securing-sensitive-keys-in-react-native-with-react-native-config
Internalization: https://medium.com/@malikchohra/build-for-scale-use-internalization-for-react-native-6fb9f5c06dd2
Redux for state management and API calls: https://casainnov.com/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native
E2e and Unit testing: https://medium.com/@malikchohra/guide-to-testing-in-react-native-end-to-end-test-using-detox-f29fd1344180
Animation Handling: https://casainnov.com/learn-animation-in-react-native-using-reanimated-library
Fastlane for CI-CD: https://medium.com/@malikchohra/ci-cd-pipeline-for-react-native-apps-use-fastlane-and-github-actions-40f9ad2036d0
React Navigation: https://medium.com/@malikchohra/build-for-scale-best-approach-on-how-to-use-react-navigation-in-react-native-d3eb7362c80e
It uses Gifted Chat: https://github.com/FaridSafi/react-native-gifted-chat

Integrating Mistral AI

**step 1: Do as any Developer: Read the documentation
**If you want to learn more about the API calls that they offer and how you can use them, read this first: https://docs.mistral.ai/getting-started/quickstart/

**step 2: Get An API Key and put it inside your config file
**To use Mistral Ai in your app, you need to get an API key from them, just go to their portal and it is easy to get one.
add that to your .env file, as explained in this article : https://casainnov.com/securing-sensitive-keys-in-react-native-with-react-native-config

//.env MISTRAL_API_KEY=your_api_key_here MISTRAL_API_URL=https://api.mistral.ai/v1/chat/completions

step 3: do the API call and integrate that to Redux
As explained in the Redux article, create your API call to get the answers from Mistral AI, add that to redux and create your store and reducer

step 4: create your UI
we are using Gifted Chat to display answers. read more here in their package: https://github.com/FaridSafi/react-native-gifted-chat/

**step 5: Create Custom Input component
**For this tutorial, to include the custom theme, and add functionalities, I created a custom Input, check the code here: https://github.com/chohra-med/mistralAIRN/blob/main/src/screens/HomeScreen/components/CustomizedInputProps.tsx

**Step 6: finalize and test
**Do the following:

Add your navigation
add your color theme
add container for dark mode handling
add different languages that you use
add your tests: Unit and E2E
add your Fastlane for CI CD
The output of the app:

Mistral ai app usig React Native
**What can be added:
**You can add the following to make the app even better:

Persist conversation to save them for later
Add Lazy Loading for the screens
Debounce Input: Prevent rapid API calls by debouncing user inputs
Error Handling: Provide user-friendly error messages for failed API calls.

Conclusion

Generative AI is going to change the way we interact with technology. The integration of this into mobile applications opens the world for endless possibilities. A lot of tools, like ChatGPT, Gemini, and Claude, are reigning supreme on the web and desktop spaces, but there is an untapped opportunity to bring this powerhouse into our pocket. This article demonstrated how one can harness the power of Mistral AI in a React Native app by showing exactly how to merge bleeding-edge technology with mobile platforms.

By walking through a practical use case — from defining the purpose to implementing API calls and building an intuitive UI — we’ve shown that integrating generative AI into mobile apps is not only achievable but also a step toward shaping the next generation of mobile experiences. Mistral AI, despite its lower adoption compared to its competitors, provides developers with robust tools that can redefine mobile app functionality.

As generative AI continues to evolve, developers have the chance to drive this technology beyond hype and into practical, everyday solutions. Whether it’s crafting personalized experiences, automating workflows, or building smarter apps, the possibilities are endless. Now, it’s your turn to experiment and innovate — because the future of AI is mobile, and it’s waiting to be built.

If you need to integrate Advanced functionalities in your Mobile app, create one from scratch, or need consulting in react native. Visit the casainnov.com, and check their mobile app page, and contact them there.

I share insights about React Native, React, and Typescript. Follow me on Linkedin or Medium.

ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy #generativeAI #mistralAI

Architect Your React Native app to handle Millions of Users and Large Development Teams

Malik Chohra — Sun, 20 Oct 2024 14:51:23 +0000

Introduction

When building a React Native app, poor structure and architecture can lead to significant pain points that affect the development process and user experience. Without a solid foundation, scaling your app can become a daunting task. Here are some common pain points you may encounter with a poorly structured React Native codebase:

Difficulty in Scaling: Adding new features becomes increasingly complex as the codebase grows, often leading to tangled code and duplicated logic.

Reduced Maintainability: A disorganized architecture makes it harder to debug, extend, or refactor the code, resulting in higher maintenance costs over time.

Performance Issues: Inefficient code structures, unoptimized asset management, or excessive re-renders can degrade the app's performance.

Developer Onboarding Challenges: New team members struggle to understand and contribute to the project if the folder structure and code organization lack clarity.

Testing Complexity: Without a clear separation of concerns, writing unit and integration tests becomes cumbersome, leading to low test coverage and less reliable software.

Tech Debt Accumulation: As the project evolves, quick fixes and shortcuts add up, leading to a large amount of technical debt that slows down development.

A well-structured codebase can prevent these issues by fostering a modular and scalable approach to organizing your app. In this article, we'll dive into best practices for architecting a React Native application that scales seamlessly as your project grows. We'll discuss a boilerplate setup with a configuration that provides a solid starting point for structuring your app, helping you avoid common pitfalls and ensuring long-term maintainability and performance. Whether you're setting up a new project or refactoring an existing one, following these guidelines will give your app the robust foundation it needs to thrive.

What should you take into account when creating your React Native app?

1. Learn the Clean Code principles:

When it comes to having a robust architecture, you need to take into account different clean code principles, a summary of that is here: https://gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29
But when it comes to using that in React or React Native app, we need to use a React approach, I wrote this article a time ago here: https://medium.com/@malikchohra/structure-your-react-native-app-for-scale-part-1-patterns-and-principles-to-master-a3b24b6acf97.
Where I talked about which principles and code patterns that you need to take into account when working with React or React Native.

2. What are the things that are specific for a React or a React Native app:

In this section, I will talk about what needs to be taken into account when working with React or a React native app, how to solve it, and which articles or resources you can learn from.

Modular Code Organization:

Structure your codebase into meaningful folders and modules (e.g., Components, Screens, API, Redux, Hooks) to ensure a clear separation of concerns, improve readability, and simplify maintenance.
You can use different Patterns and principles:

SOLID principles for example): https://medium.com/stackademic/use-- -solid-principles-in-react-react-native-663b8cabfa2b
Facade pattern: https://medium.com/@malikchohra/build-to-scale-the-facade-pattern-1f5db01226a9
Higher Order component in React: https://medium.com/@malikchohra/build-for-scale-higher-order-component-hoc-in-react-and-react-nativethis-series-of-build-for-8b9e3dc96317
Other principles: But when it comes to using that in React or React Native app, we need to use a React approach, I wrote this article a time ago here: https://medium.com/@malikchohra/structure-your-react-native-app-for-scale-part-1-patterns-and-principles-to-master-a3b24b6acf97.

Reusable and Atomic Components:

Build components using the atomic design principle (Atoms, Molecules, Organisms) to promote reusability, consistency, and a more structured approach to UI development.

Centralized State Management:

Use a state management solution like Redux, MobX, or Context API to handle global states, making it easier to manage complex state changes and share data across the app.

To learn how to use the Redux toolkit, check this:
https://medium.com/r?url=https%3A%2F%2Fcasainnov.com%2Fhow-to-use-redux-toolkit-for-your-react-and-react-native-app
Learn different types of state management here: https://medium.com/javascript-in-plain-english/build-for-scale-what-is-state-management-in-react-and-react-native-and-what-to-choose-4fc5151e233a

Scalable API Layer:

Consistently organize API-related code, such as using class-based API structures and separate folders for mock data, to easily manage API calls, handle data fetching, and integrate different environments.

example of using GraphQL: https://medium.com/javascript-in-plain-english/mastering-graphql-in-react-native-a-step-by-step-guide-with-typescript-and-redux-toolkit-79f3bce1dae7 or
using API facade approach to get data: https://medium.com/@malikchohra/build-for-scale-from-api-to-ui-using-react-query-to-fetch-and-display-data-in-react-native-and-235428a1db5b

CI/CD Integration:

Automate building, testing, and deployment using tools like Fastlane for continuous integration and continuous delivery, ensuring a streamlined and error-free release process for both Android and iOS.
You can use Fastlane in your React native app to ship faster to Apple Store and Google Play Store, integrate it with Github action: check these two resources:

Efficient Asset Management:

Keep assets like images, icons, fonts, and other resources well-organized in a dedicated folder structure to avoid clutter and make asset management more straightforward.
If you want:

use a custom font, check this article: https://medium.com/@malikchohra/build-for-scale-use-custom-fonts-in-react-native-5cae05ee1a99
use Fastimage for images: https://medium.com/@malikchohra/build-for-scale-how-to-use-react-native-fast-image-393a647d60d5 use custom svg for icons: https://medium.com/@malikchohra/build-for-scale-how-to-use-svgs-in-react-native-5f49ad4a7715

Theming and Styling:

Use a consistent theming strategy by centralizing theme-related configurations (e.g., colors, typography, global styling) to maintain a unified look and feel across the app.
To learn more about design systems, how to create your own in react native, and how to use it with react native paper

What is a design system for beginners: https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-59353baec110
Create your custom Theme: https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-0224797da39b

-How to use React Native paper: React native paper https://medium.com/@malikchohra/build-for-scale-use-a-design-system-in-your-react-native-app-5790982cae7e

Localization and Internationalization (i18n):

Implement localization support early in development to ensure the app is prepared for multiple languages and regions without significant refactoring.

Learn how to use different languages in your react native app here: https://medium.com/@malikchohra/build-for-scale-use-internalization-for-react-native-6fb9f5c06dd2

Custom Hooks:

Create custom hooks for encapsulating logic related to data fetching, state updates, and other reusable functionalities to avoid code duplication and promote a clean separation of logic.

You can check a great approach of how to use them for data fetching here: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a
or the usage of React query hook: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a

Robust Testing Strategy:

Set up a comprehensive testing framework (e.g., unit tests, integration tests, E2E tests) to catch bugs early, improve code quality, and ensure the app behaves as expected.

You can learn more about how to use Detox for e2e testing, and Jest for testing here: https://medium.com/@malikchohra/guide-to-testing-in-react-native-end-to-end-test-using-detox-f29fd1344180
Unit Testing https://medium.com/@malikchohra/guide-to-testing-in-react-native-end-to-end-test-using-detox-f29fd1344180
Integration Test: https://blog.stackademic.com/guide-to-testing-in-react-native-unit-and-integration-test-6cca27dfe293

Navigation Management:

Structure navigation, with a dedicated folder for navigation configuration and screens, to keep the navigation flow organized and easy to manage as the app scales.
You can read this article on what react-navigation is.

to learn how to use it in react native: https://medium.com/@malikchohra/build-for-scale-best-approach-on-how-to-use-react-navigation-in-react-native-d3eb7362c80e

Error Handling and Logging:

Implement centralized error handling and logging solutions to manage crashes, trace errors, and monitor app behavior, which will help debug and improve the app's reliability.
Using a class to debug, add performance tools such as Firebase, Sentry or DataDog.

Performance and optimization app render:

Performance is an important subject for advanced react native development.

check how to get rid of console .log in your code base here: https://medium.com/stackademic/build-for-scale-optimize-app-size-delete-console-log-from-your-app-8fb4ae9470d8
use of Flashlit for big data rendering: https://medium.com/javascript-in-plain-english/build-for-scale-improve-list-performance-using-flashlist-ec0e02804d15
The best approach to implementing infinite scroll: https://medium.com/javascript-in-plain-english/build-for-scale-infinite-scroll-using-react-query-with-redux-toolkit-in-react-and-react-native-d27dab04df2a
Avoid Memory leak: https://medium.com/stackademic/build-for-scale-avoid-memory-leaks-in-react-native-dc19b84d9958

Data and API security:

When creating an app, you need to hide your sensitive keys inside it so you can comply with GDPR rules.

learn more about how to use react native config to hide your keys here: https://casainnov.com/securing-sensitive-keys-in-react-native-with-react-native-config

Best User Experience and Animations:

To have an amazing app that users love, and add more live feeling to your app. a great user experience is Mandatory.

learn more about how to use react native reanimated: https://casainnov.com/learn-animation-in-react-native-using-reanimated-library
you can skip a bad user experience by following this guideline: https://medium.com/stackademic/anticipate-bad-user-experience-in-your-react-react-native-app-40af5d9d1334

Developer Experience

You need to take into account how the development team will use your app. You need to set standards on how to use the code base and how collaboration should be done.

you can check the following:
usage of an absolute path in react native: https://medium.com/@malikchohra/how-to-use-absolute-path-in-the-latest-react-react-native-version-fe88142a6f7e
implement a static code analysis in your react project: https://medium.com/@malikchohra/guide-to-static-code-analysis-for-react-and-react-native-c745dfc250bd
Variable naming in Javascript: https://medium.com/javascript-in-plain-english/best-practices-for-variable-names-in-javascript-and-typescript-7860a84ed80a

**The answer: How to structure your App for scaling to +2 million active users and +150 developers teams

*1. Organize by Feature or Module
*
Structure the app by organizing code into feature-based or module-based folders. This approach groups related files together, making it easier to maintain and scale the app. Each folder contains all related components, screens, hooks, and utilities.
Example:
Screens/
--> HomeScreen/
--> --> index.tsx
--> --> components/
--> --> --> Header.tsx
--> --> --> HomeList.tsx
--> --> hooks/
--> --> --> useHomeData.ts
--> --> tests/
--> --> --> HomeScreen.test.tsx

*2. Atomic Design for Components
*
Adopt the Atomic Design principles to structure your components into different levels, which promotes reusability and keeps the codebase modular.
Example:
Components/
--> Atoms/
--> --> Button.tsx
--> --> Text.tsx
--> Molecules/
--> -->Card.tsx
--> --> ListItem.tsx
--> Organisms/
-->--> Header.tsx
-->--> UserProfile.tsx

*3. Centralized State Management
*
Organize your global state management solution to separate concerns by business feature (actions, reducers, selectors), allowing for scalability as the app grows.
Example:
Redux/
appConfig/
--> --> appcofingReducers.ts
--> --> appConfigModel.ts
--> --> appConfigSelector.ts
--> --> appConfigActions.ts

*4. Efficient API Layer Organization
*
Separate the API layer into specific folders for different modules or services, each containing its own API calls, mock data, and types.
Example:
API/
customApi/
--> customApi.ts
--> Route.ts
types.ts
mockedData.ts

*5. Asset Management
*
Organize your assets (e.g., images, fonts, icons) in a clear folder structure for easy access and management.
Example:
Assets/
--> Images/
--> -->logo.png
--> --> background.jpg
--> Icons/
--> --> menu.svg
--> --> profile.svg
--> Fonts/
--> --> Roboto/
--> --> Roboto-Bold.ttf
--> --> Roboto-Regular.ttf

*6. Custom Hooks for Reusability
*
Create custom hooks for shared functionalities such as data fetching, state handling, or utility functions. This helps keep your components clean and focused on presentation.
Example:
Hooks/
useFetchData.ts

*7. Maintain a Consistent Theming and Styling Strategy
*
Centralize theme-related configurations to keep a unified style throughout the app. This includes colors, typography, global styles, and responsive settings.
Example:
Theme/
colors.ts
typography.ts
globalStyling.ts

*8. Comprehensive Testing Strategy
*

Separate tests based on their type (e.g., unit, integration, E2E) and organize them within folders that mirror the structure of the app. This helps ensure that all aspects of the app are adequately covered by tests.
Example:
tests/
-->unit/
--> --> Button.test.tsx
--> integration/
--> --> HomeScreen.test.tsx
--> e2e/
--> --> loginFlow.test.ts

*9. Navigation Management
*

Use a dedicated folder for navigation configuration, which can be broken down by stacks and tabs to keep the navigation system organized.
Example:
Navigation/
--> AppNavigator.tsx
--> AuthStack.tsx
-->MainStack.tsx
--> BottomTabNavigator.tsx

*10. Configuration and Environment Management
*
Organize configurations and environment settings in a dedicated folder to manage different build environments (e.g., development, testing, production).
Example:
Config/
appConfig.ts
environment.ts
firebaseConfig.ts
.env

**Nothing Speak Better than a real implementation

Real Example: A Boilerplate Open Source to scale your React native app:**

Using the React Native boilerplate, I generated this app just to explain the best approach to scale your app, and the usage of the boilerplate

Check the video here:

usage of react native scalable architecture

*Application Functionality and Best Practices
*

The architecture of this React Native application is meticulously designed to prioritize scalability and maintainability. Engineered to handle over one million active users monthly, the app delivers a seamless user experience through a modular and well-organized codebase. Adhering to software architecture best practices, the application embraces clean code principles, ensuring each component, service, and utility is well-defined and easily navigable.
The architecture adheres to SOLID principles, emphasizing single responsibility and open/closed design. This approach allows components to be easily modified and extended without impacting existing functionality. For instance, the Redux Toolkit is utilized for efficient state management, providing a clear structure for actions, reducers, and selectors, which simplifies the management of application state across the codebase.
The app is structured to enhance code reusability and readability. React Navigation is employed to facilitate intuitive navigation patterns, enabling users to move seamlessly between different sections of the application. Components are categorized using atomic design principles, fostering a hierarchy that separates atoms, molecules, and organisms for better organization and scalability.
Testing is crucial for ensuring the reliability of the app. Tools like Jest and Detox are integrated to facilitate both unit and end-to-end testing. This rigorous testing approach helps maintain code quality and catch issues early in the development cycle.
Moreover, the application incorporates Fastlane for CI/CD, automating the build and deployment process to streamline updates and feature releases. Utilizing Axios for API interactions and Luxon for date and time management further enhances the app's robustness and efficiency

CODE FOR THE BOILERPLATE

You find the GitHub code here: https://github.com/chohra-med/scalableReactNativeBoilerplate

Conclusion

In summary, this article has explored the architectural strategies and best practices employed in building a high-performance React Native application capable of supporting over one million active users and a team of 100 developers. By emphasizing clean code, SOLID principles, and modular design, we create a codebase that is not only scalable but also maintainable and efficient.
As you reflect on the insights shared in this article, consider how you can apply these principles to elevate your own development practices. Embrace the opportunity to learn from these architectural strategies, refine your coding skills, and take your React Native applications to the next level. Remember, the key to successful software development lies in crafting a well-structured and thoughtfully architected application that can adapt and grow alongside your user base.

If you need to integrate Advanced functionalities in your Mobile app, create one from scratch, or need consulting in react native. Visit the casainnov.com[ http://casainnov.com/] , check their mobile app page, and contact them there.

I share insights about React Native, React, and Typescript. Follow me on Linkedin [ https://www.linkedin.com/in/malik-chohra/] or Medium.

ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy #cleancode

Optimizing React Native Performance for a Seamless User Experience

Malik Chohra — Thu, 10 Oct 2024 15:14:11 +0000

In the competitive world of mobile app development, delivering a smooth and responsive user experience is paramount. React Native, a powerful framework for building cross-platform apps offers a robust foundation but requires careful optimization to ensure peak performance. This article explores effective strategies to enhance your React Native app's speed and responsiveness.

1. Image Optimization: A Visual Foundation

Choose the Right Format: Select appropriate image formats based on content. JPEGs are ideal for photographs, while PNGs excel in preserving transparency. Consider WebP for superior compression without compromising quality.

Compress Images: Utilize tools like ImageOptim or TinyPNG to reduce image file sizes without sacrificing visual fidelity.

Lazy Loading: Defer loading images until they're about to appear on the screen. Libraries like react-native-fast-image facilitate this technique.

Effective Caching: Implement caching to prevent redundant image downloads and improve load times.

2. Minimizing Re-renders: A Performance Boost

PureComponent and React.memo: If a component's output remains unchanged for identical props, employ PureComponent or React.memo to avoid unnecessary re-renders.

useCallback and useMemo: Memoize functions and values using these hooks to prevent unnecessary recalculations.

FlatList and SectionList: For large lists, opt for FlatList or SectionList over ScrollView. These components render only visible items, improving performance.

3. Inline Function Optimization: Avoiding Pitfalls

Avoid Inline Functions: Defining functions within JSX can lead to excessive re-renders. Move function definitions outside the render method.

Memoization: Use useCallback to memoize functions and prevent unnecessary re-creations.

`
// Inefficient Inline Function

handlePress(item.id)} />

// Optimal Function Definition with Memoization

const handlePress = useCallback((id) => { // Handle press logic here }, []);

4. JavaScript Bundle Optimization: Streamlining Startup

Code-Splitting: Divide your code into smaller bundles to load only essential parts initially. Dynamic imports enable code-splitting.

Leverage babel-preset-env: Target specific environments or browsers to reduce polyfill and helper code.

Optimize Third-Party Libraries: Import only the necessary components from libraries. For example, use lodash-es and import individual functions:

import debounce from 'lodash-es/debounce';

5. Native Modules for Performance Gains

Custom Native Modules: Write native modules in Swift, Objective-C, Java, or Kotlin for performance-critical tasks.

Pre-Built Native Modules: Utilize existing modules like react-native-reanimated for animations or react-native-fast-image for image handling.

6. Memory Management: A Crucial Aspect

Prevent Memory Leaks: Clean up listeners and subscriptions in componentWillUnmount or useEffect cleanup functions.

Optimize Re-renders: Use shouldComponentUpdate or React.memo to minimize unnecessary updates.

Handle Large Data Efficiently: Process large datasets in smaller chunks or leverage native modules for performance-intensive operations.

7. Performance Profiling and Monitoring

React Native's Built-in Tools: Use React Native's performance monitor and console.time/console.timeEnd to measure code execution times.

Third-Party Tools: Explore Flipper and React Native Debugger for in-depth performance analysis.

8. Navigation Optimization: A Smooth Journey

React Navigation's createNativeStackNavigator: Utilize this navigator for optimized navigation performance.

Minimize Off-Screen Rendering: Avoid rendering screens that are not visible to the user.

Cautious Use of Optimizations: Be mindful of using shouldComponentUpdate or React.memo in navigation, as they might introduce unexpected behavior.

9. Animations: A Visual Delight

React Native Reanimated: Employ this library for native-thread-based animations, ensuring smoothness.

LayoutAnimation API: Animate layout changes using this API.

Minimize JavaScript-Driven Animations: Prioritize native-driven animations for better performance.

10. Hermes for Android: A Performance Boost

Enable Hermes: Add enableHermes: true to your Android/app/build.gradle file.

Benefits: Hermes can reduce startup time, and memory usage, and improve overall performance.

Conclusion

By implementing these strategies, you can significantly enhance your React Native app's performance and deliver a superior user experience. Remember, continuous optimization is essential for staying ahead in the competitive mobile app landscape.

check here how Casainnov helped a leading property listing in KSA to optimize their app and what the output

You can check one of our blogs here:

Learn Animation in React Native: https://casainnov.com/learn-animation-in-react-native-using-reanimated-library

From API to UI: Using React-query to Fetch and Display Data in React Native and React: https://casainnov.com/from-api-to-ui-using-react-query-to-fetch-and-display-data-in-react-native-and-react

React Native 0.75 is Out. What is new?: https://casainnov.com/react-native-075-is-out-what-is-new

How to a React Native agency for your project: https://casainnov.com/comprehensive-guide-to-react-native-development-agencies

Mastering GraphQL in React Native: A Step-by-Step Guide with TypeScript and Redux Toolkit: https://casainnov.com/mastering-graphql-in-react-native-a-step-by-step-guide-with-typescript-and-redux-toolkit

Step-by-Step Guide: Using MirageJS to Mock API Calls in a React Native App: https://casainnov.com/step-by-step-guide-using-miragejs-to-mock-api-calls-in-a-react-native-app

ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy

DEV Community: Malik Chohra

How I wire Claude into my React Native workflow (skills, projects, Cowork)

The mental model

1/ Skills (the tool layer)

2/ Projects (scoped memory)

3/ Connectors (the integration layer over MCP)

4/ Cowork (the agentic execution layer)

The multiplier: Dispatch + Computer Use

What this means for builders

Where to start

If you're shipping mobile-AI

From React to React Native: what web devs get wrong on day one

"It's just React, right?"

What transfers from React (the good news)

What doesn't transfer (the painful part)

Expo vs bare React Native

What to learn first (the priority list)

What to avoid (the trap list)

The AI part nobody talks about

The shortcut

I spent 6 months losing fights with AI in React Native. Then I built U-AMOS.

One last thing

How I stopped Claude Code from hallucinating 42% of my React Code

TL;DR

A note on the numbers

The moment I stopped pretending it was working

The token tax nobody talks about

The reframe that changed everything

What U-AMOS actually is

1. The Memory Bank — three tiers, loaded on demand

2. The Context Map — the exploration killer

3. The Rule Priority System — three tiers, with generators separate from rules

4. Concrete examples beat abstract rules

5. The 7-Point Anti-Hallucination Checklist

6. Plan/Act Mode — no code without a plan

What changed after U-AMOS

Memory hygiene: pruning, plus living rules

What still doesn’t work, and what’s on the roadmap

How to set up U-AMOS yourself

Related work worth reading

Or, if you want it pre-configured

What I want you to take from this

Claude Code for beginners: what it is, how to set it up, and why people won’t shut up about it

TL;DR

Before we start, a word:

Introduction:

Why is everyone suddenly talking about this

How to install it

Stack

Coding conventions

What never to do

Git

Expo

Commands worth knowing

Things that will catch you off guard

Optimizing animations for 60 FPS with React Native Reanimated

Before we start, a word:

Introduction

TL;DR

1. Animate only what the native driver supports

2. One shared value, not five

3. Batch your animations

4. Springs for gestures

5. Keep gesture handlers dumb

6. Clean up animations

7. How to test

What I actually see in code reviews

Before you ship

FAQ

Example from the AI Mobile Launcher

Integrate DeepSeek AI into React Native app: Full guide for Generative AI in React Native

Introduction

Integrating DeepSeek AI in React Native

React Native Template

Best Practices and Considerations

Conclusion

Get the Best React Native Templates in 2025: Community work

ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy #TurboModule #nativeModule

Use Generative AI in React Native: Create Mistral AI Mobile app

Introduction