Anton

A hidden cost of React Native: your app is a patchwork of packages by different authors. Even if each works fine alone, they’ve likely never been tested together. Native dev has other challenges—but this kind of fragility isn’t one of them. #ReactNative #MobileDevelopment

Picture this: A developer sits down to create a mobile app, types a simple description of what they want, and watches as AI generates entire components, suggests optimisations, and debugs code in real-time. This isn’t science fiction—it’s the reality of React Native development in 2025, where artificial intelligence is transforming how we build mobile applications.

The Perfect Storm: When Cross-Platform Meets AI

React Native has always promised developers a holy grail: write once, deploy everywhere. Since its inception by Facebook in 2015, this framework has steadily gained traction among developers seeking efficient ways to build mobile applications for both iOS and Android. But something remarkable has happened in recent months—the integration of AI tools into the React Native ecosystem has sent adoption rates soaring to unprecedented levels.

The framework’s JavaScript (or TypeScript) foundation makes it particularly well-suited for AI integration. Unlike native development languages, JavaScript’s widespread use in web development means AI models have been trained on massive amounts of JS code, making them exceptionally good at understanding and generating React Native components.

AI-Powered Development: The Game Changers

Intelligent Code Generation and Completion

The most visible impact of AI on React Native development comes from sophisticated code completion tools. GitHub Copilot, Cursor, Amazon CodeWhisperer, and specialised React Native AI coding assistants can now generate entire components from natural language descriptions. Developers report productivity increases of 30-50% when using these tools, with junior developers (or even non-developers) experiencing even greater gains.

What makes this particularly powerful for React Native is the framework’s component-based architecture. AI models excel at recognizing patterns in component structures, making suggestions that aren’t just syntactically correct but also follow React Native best practices. For instance, when a developer starts typing a navigation component, AI can instantly suggest the complete implementation, including proper TypeScript interfaces, navigation props, and even accessibility features. Automated Testing and Debugging

One of React Native’s historical pain points has been debugging across platforms. AI is changing this landscape dramatically. New AI-powered tools can analyse error messages, stack traces, and even UI screenshots to identify issues and suggest fixes. These tools understand the nuances of platform-specific bugs, helping developers resolve iOS and Android inconsistencies that previously required hours of manual investigation. Machine learning models trained on millions of bug reports can now predict potential issues before they occur. They analyze code patterns and flag areas likely to cause problems, particularly around platform-specific implementations or performance bottlenecks.

Natural Language to UI: The New Frontier

Perhaps the most exciting development is the emergence of natural language to UI tools specifically optimized for React Native. Developers can now describe interfaces in plain English: “Create a login screen with email and password fields, a forgot password link, and social media login buttons,” and watch as AI generates production-ready React Native components complete with styling and state management.

These tools go beyond simple code generation. They understand design principles, automatically implementing responsive layouts that work across different screen sizes and orientations. They even suggest appropriate animations and transitions based on the component’s purpose and user interaction patterns.

Breaking Down Barriers: Democratisation of Mobile Development

The AI revolution in React Native is having a profound democratizing effect on mobile development. Small businesses and solo entrepreneurs who previously couldn’t afford dedicated mobile development teams are now building sophisticated applications. Non-technical founders are using AI-assisted React Native tools to create MVPs without extensive coding knowledge. While these tools don’t replace the need for experienced developers in complex projects, they’re enabling a new class of creators to enter the mobile app ecosystem. Building and MVP of your idea and then hiring a contractor to polish it has never been easier.

Looking Ahead: The Future of AI-Powered React Native

The convergence of AI and React Native is still in its early stages, but the trajectory is clear. We’re moving toward a future where AI doesn’t just assist in coding but becomes an integral part of the development workflow. Predictive performance optimization, where AI automatically adjusts code for better performance based on real-world usage patterns, is already in beta testing. The next frontier appears to be AI-driven app evolution—systems that can automatically update and improve applications based on user behavior and feedback. React Native’s hot reloading capabilities make it an ideal platform for such dynamic updates. However, this revolution also raises important questions. As AI makes mobile development more accessible, how do we ensure code quality and security? How do we balance automation with the need for developers to understand underlying principles? These challenges will shape the evolution of both AI tools and React Native itself.

The New Reality of Mobile Development

The marriage of React Native and AI represents more than just a technological advancement—it’s a fundamental shift in how we approach mobile development. The framework that promised to simplify cross-platform development has found its perfect partner in AI, creating a development environment that’s faster, more accessible, and more powerful than ever before.

For developers considering their next project or companies evaluating their mobile strategy, the message is clear: React Native, supercharged by AI, isn’t just a viable option—it’s increasingly becoming the optimal choice. The question isn’t whether AI will transform mobile development, but how quickly developers and organizations will adapt to this new reality.

As we stand at this inflection point, one thing is certain: the developers who embrace this AI-powered future of React Native will find themselves at the forefront of a mobile development revolution. The tools are here, the community is growing, and the possibilities are limitless. The only question that remains is: what will you build?

First I saw a wave of posts about a0.dev and now bolt.new added #reactnative support. There’s definitely been a lot of progress in #ai lately and it might convince some companies to switch from fully native to RN to reduce costs.

I’ve been using Orion browser on iOS for about a week now. Ability to install Firefox and Chrome extensions is nice, but I found that don’t really need any new extensions. My current set of Safari extensions on iOS cover all my needs.

After a quick review of TypeScript handbook I started reading React Native documentation. I hope my notes will be useful for other SwiftUI devs who want to try RN.

@ViewBulilder -> JSX

JSX is an embeddable XML-like syntax that allows developers to describe UI in a declarative manner, just like view builders in SwiftUI. TypeScript files that contain JSX must have .tsx extension.

To “escape back” into TypeScript world use curly braces.

export default function Hello() {
    const name = "John";
    return (
      <Text>Hello, {name}!</Text>
    );
}

You can only use curly braces in two ways inside JSX: 1 As text directly inside a JSX tag, as in the example above. 2 As attributes immediately following the = sign: src={avatar} will read the avatar variable, but src="{avatar}" will pass the string "{avatar}".

In addition to primitive types and simple expressions, you can pass objects in JSX. Objects are also denoted with curly braces, like { name: "John Johnson", posts: 5 }. So, to pass a TS object into JSX, you must wrap the object in another pair of curly braces: person={ { name: "John Johnson", posts: 5 }}. You will see this with inline CSS styles in JSX.

Conditional rendering

1. You can use if to assign conditional content to a variable and later use it inside JSX block:

if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <Container>
    {content}
  </Container>
);

2. Or, you can use the conditional ? operator.

<Container>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</Container>

You can’t use if inside JSX tag like you do in SwiftUI’s ViewBuilder.

Responding to Events

You can respond to events by declaring event handler functions inside your components:

function MyButton() {
  function handleTap() {
    alert('You tapped me!');
  }

  return (
    <Button onPress={handleTap}>
      Tap me
    </Button>
  );
}

Notice how onClick={handleTap} has no parentheses at the end! We do not want call the event handler function, only to pass it down, otherwise function would be called on each re-render. If you want to define your event handler inline, wrap it in an anonymous function like so: <MyButton onPress={() => alert('You tapped me!')}>

@State

To add state to your component import useState from React, and then declare a state variable inside your component:

import { useState } from 'react';
function MyButton() {
  const [count, setCount] = useState(0); 
  // …
}

You’ll get two things from useState: the current state (count), and the function that lets you update it (setCount). While you can choose any names, the conventional format is [variable, setVariable]. Initially, count will be 0 since you initialized it with useState(0). Just like with @State this state is tied to a component instance, so if you declare multiple instances of the same component each of them will have its own state. Keep multiple state variables if their states are unrelated, but if two variables frequently change together, consider merging them into a single object. To update the state, simply call the setter function: function handleClick() {setCount(count + 1);}.

You can’t use regular variables to represent state for two reasons: 1. Local variables don’t persist between renders. When React renders this component a second time, it renders it from scratch - it doesn’t consider any changes to the local variables. 2. Changes to local variables won’t trigger renders. React doesn’t realise it needs to render the component again with the new data.

A Quick Word About Hooks

Functions starting with use (like useState above) are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the API reference. You can also write your own Hooks by combining the existing ones. Comparing to other functions hooks have several restrictions. Hooks can only be called at the top level of your components or your own Hooks. You can’t call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it’s helpful to think of them as unconditional declarations. You “use” React features at the top of your component similar to how you “import” modules at the top of your file. If you want to use useState in a condition or a loop, extract a new component and put it there.

@Binding

In React Native, the closest equivalent to SwiftUI’s @Binding is passing props and using callback functions, but it’s not as seamless as SwiftUI’s two-way binding: <ChildComponent count={count} onPress={handlePress} />

The information you pass down like this is called props. In the child component read props and use them to implement child functionality:

function ChildComponent({ count, onPress }) {
  return (
    <Button 
        title={`${count}`} 
        onPress={() => {
          // Must use the passed setter function
          onCountChange(prevCount => prevCount + 1)
      }}
    />
  );
}

Props can have default values: function Avatar({ user, size = 100 }).

For more complex scenarios, you might use:

• Props drilling (passing props through multiple layers)
• Context API (similar to SwiftUI’s @Environment, see example below)
• Dedicated state management libraries

@Observable / @ObservableObject -> useReducer

useReducer is very different from observation mechnisms in SwiftUI and probably closer to TCA, but this is probably the closest thing React has to offer. Instead of updating properties of an object that describes state of the app you will need to write a function that take current state and an “action” that says how state should be updated. This function called reducer and there is a lot of information available on this topic, so I won’t go in to details.

The following example should be enough for general understanding of how it works.

function counterReducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function CounterComponent() {
    const [state, dispatch] = useReducer(counterReducer, { count: 0 });
    return (
        <View>
            <Text>{state.count}</Text>
            <Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
        </View>
    );
}

Official documentation has a very detailed explanation with usage examples.

.onAppear & .onChange -> useEffect

Syntax and implementation differ, but the concept is similar: declaratively handle lifecycle and state-dependent operations without mixing them directly into the rendering logic.

function UserProfile() {
  const [userId, setUserId] = useState(null);
  const [userData, setUserData] = useState(null);

  // Similar to .onAppear - runs when component first mounts
  useEffect(() => {
    // Initial data fetch when component appears
    fetchUserProfile(userId);
  }, []); // Empty dependency array means "run only on mount"

  // Similar to .onChange - runs when userId changes
  useEffect(() => {
    if (userId) {
      // Fetch user data whenever userId changes
      fetchUserProfile(userId);
    }
  }, [userId]); // Dependency array specifies which values trigger the effect

  return (
    <View>
      <Text>{userData?.name}</Text>
    </View>
  );
}

Warning: The main purpose of Effects is to allow components connect to and synchronize with external systems. Don’t use Effects to orchestrate the data flow of your application. See you might not need an Effect for details.

Other considerations

Design your components as pure functions that don’t cause side effects. In React, side effects usually belong inside event handlers. Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined inside your component, they don’t run during rendering! So event handlers don’t need to be pure. In React there are three kinds of inputs that you can read while rendering: props, state, and context. You should always treat these inputs as read-only.

I took extensive notes while reading the React Native and React documentation this weekind. I plan to post them after verifying that all code snippets in my notes are correct. Similar to my previous posts, I will try to explain React Native using concepts familiar to SwiftUI developers.

I found a few additional differences in the TypeScript documentation that are not mentioned in the Swift-TypeScript cheatsheet I linked in one of my previous posts:

• The return type of a function can be inferred. If there’s no return type specified in the declaration, it doesn’t mean the function returns void.
• Optionality in TypeScript is implemented at the property level, not in the type system. To make a property optional, add ? at the end of the property name. There are utility types in TypeScript that can change the optionality of properties, such as Partial<Type> and Required<Type>.
• Use extends keyword to add type constraints in generics: <T1, T2 extends T1>
• Use & to “combine” two or more types into one. It will create a new type that contains properties from all combined types.
• Use | to create a union type that can be one of the types being “united”.
• To make illegal states unrepresentable Swift devs often use enums with associated types. To mimic Swift’s switch on enum with associated types use union of interfaces representing associated types and add a tag with unique literal types to each interface. Then, use switch on the tag of union type, that’s enough to guarantee type safety.
• For RawRepresentable enums it’s usually more efficient to use a union of literal types representing values because it doesn’t add extra run-time code like TS’s enum. Another alternative is const enum, but there is something in the TS documentation about potential problems with it.
• keyof is a way to provide a type for dynamic member lookups. It’s somewhat similar to keypath in Swift.
• typeof, when used inside conditions, allows for narrowing the type in a conditional branch.
• “Indexed access type” allows to get type of a property by using indexed access syntax: type ContactID = Contact["id"]
• Tuple in TS is a sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions. Example: type StringNumberPair = [string, number]; describes array whose 0 index contains a string and whose 1 index contains a number.

During my journey from Swift to TypeScript, I often wonder how developers migrating in the opposite direction feel. What do they appreciate about Swift, and what aspects of TypeScript do they miss?

One of the things I like about Swift is the ability to make illegal states unrepresentable using type system. It looks like something similar is possible in TypeScript using combination of union types and literal types.

So far, Swift-Typescript Cheatsheet dabbott.github.io/webdev-pr… has been the best resource for learning TS for me.

I’ve been writing native iOS apps using Swift for the last 8 years (and years of ObjC before that). Next week I will start working on a new project with ReactNative and TypeScript. All learning materials I found are written either for web developers or people completely new to programming 🤔