blog.pierrehenry.be

How I Fixed My React Native Crash Using AI Without Losing My Mind

Photo by Favour Usifo How I Fixed My React Native Crash Using AI Without Losing My Mind - Photo by Favour Usifo on Unsplash

Alright, let’s get straight into it. No fluff, just the real story of how I wrangled my React Native app back from the brink after an AI-assisted feature addition went sideways. If you’ve ever let an AI tool like Cursor loose on your codebase and then watched your app crash and burn, you know the feeling. This is my journey—warts, wins, and all.

The Setup: Adding Swipe Actions with AI

So, here’s what happened. I wanted to add a swipe left/right feature to my food tracker app—think swipe to delete or share an item, pretty standard stuff. I asked Cursor to handle it. The idea was simple: you swipe, and the app should show a nice SF Symbol icon, making the UI feel slick and modern.

But, as soon as I tried swiping on the item list, the app crashed. Not just a little glitch—full-on crash. This is your classic “AI did what I asked, but not what I meant” moment. And honestly, it’s a good reminder: always review AI-generated code before merging.

Digging In: Where Did It Go Wrong?

First step, I checked the commit history to see what Cursor changed. Turns out, there was an issue with data types—one was undefined, another was numeric when it shouldn’t have been. Classic type mismatch. Cursor tried to fix it, but it also made some questionable decisions, like importing haptic feedback directly instead of using my existing helper.

Here’s a quick code snippet to show what I mean:

1// What Cursor did (not ideal)
2import Haptic from 'react-native-haptic-feedback';
3
4// What I wanted
5import { triggerHaptic } from '../helpers/haptic.ts';

Lesson: Even if AI is “thinking,” it can still make rookie mistakes. Sometimes it feels like pair programming with a junior dev who doesn’t know your codebase.

Reviewing AI Changes: Trust, But Verify

Photo by Van Tay Media How I Fixed My React Native Crash Using AI Without Losing My Mind - Photo by Van Tay Media on Unsplash

Cursor is actually pretty good at catching typos and understanding context, but it doesn’t always follow established patterns. For example, it replaced imports in a way that broke other components. I had to remind myself: AI is only as smart as your prompt. If you’re not specific, you’ll get generic or even wrong results.

I also noticed Cursor sometimes tries to be helpful by adding or removing code that isn’t necessary. For example, it tried to replace a file that was already correct, or it added extra state management that just complicated things.

Debugging Navigation Issues

After fixing the swipe crash, I ran into another problem: navigation to the report page just stopped working. Clicking the link did nothing. Cursor had added a mainTabs parameter to the navigation, which broke the link. The fix was simple—remove the unnecessary parameter and export the function correctly.

1// Broken export (from Cursor)
2export default function AuthenticatedNavigator() { ... }
3
4// Fixed export
5export const AuthenticatedNavigator = () => { ... }

Pro tip: Always double-check how your navigation is exported and used. Small changes can break the whole flow.

The AI Feedback Loop: Prompt, Review, Repeat

Here’s where things get interesting. I started questioning Cursor’s changes directly in the chat:

This back-and-forth is actually super useful. Treat AI like a colleague—don’t be afraid to push back or ask for clarification. The more specific your prompts, the better the results.

The Importance of Clear Prompts

If you give AI too much detail, it gets confused. Too little, and it guesses. It’s like training a dog: if your instructions are inconsistent, you can’t blame the dog for not listening. Same with AI—if it messes up, it’s probably your fault for not being clear enough.

Mindset shift: Instead of blaming AI, ask yourself, How can I improve my prompt? This self-improvement mindset pays off big time.

Pictures for programming, coding, software engineering, STEM, technology. How I Fixed My React Native Crash Using AI Without Losing My Mind - Photo by Favour Usifo on Unsplash

Final Fixes and Dev Tips

After a lot of trial and error (and some late-night debugging), I finally got the app stable again. The swipe feature works, navigation is fixed, and the UI looks clean. A few extra bugs popped up—like missing images in the meal details—but those were easy to squash once I focused on clear, concise prompts.

One last tip: read the explanations AI gives you, not just the code snippets. Sometimes the answer is buried in the text, not the code.


Key Takeaways

“AI is only as smart as your prompt. If you’re not specific, you’ll get generic—or even wrong—results.”

“Treat AI like a colleague: question, clarify, and always double-check.”


🤔 Learn more about me on Dev.to


Debugging with AI: It’s a Journey, Not a Shortcut


Pierre-Henry Soria

GitHub · PierreHenry.Dev · YouTube

<< Previous Post

|

Next Post >>

#Ai Debugging #Bug Fixing #Developer Experience #Mobile App Development #React Native #Tech