DEV Community: Malik Chohra

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