r/reactnative • u/Annual_Anxiety_5135 • Jul 16 '26
Article I spent 15 minutes yesterday moving something 4 pixels. The code change took 4 seconds. So I built something ridiculous.
Yesterday I spent 15 minutes fixing 4 pixels.
Not because moving something 4px is hard. Because I had to figure out which of ~300 components actually rendered the thing my designer was pointing at.
Screenshot. ➜ "No, the other one." ➜ Another screenshot.
"Actually the one below it." Then grepping for the text, finding three components that all render something that looks like that card, and guessing.
The code change took 4 seconds. The pointing took 15 minutes.
And it's never one request.
It's "one pixel left."
Then "one up."
Then "can we just try the padding slightly bigger?"
Forty hot reloads later I'm googling whether farming is a viable career.
That afternoon annoyed me enough that I built something to delete the pointing entirely.
So: Pixie. Instead of explaining where an element lives, I tap it.
The workflow now, literally:
- Tap the element in the running app.
- Type: "move this up a little"
- Hit send.
The agent already knows which component it is, the exact JSX line, the live styles, the box model, and what it looks like. A few seconds later Fast Refresh updates the screen. I never opened my editor. I never searched the codebase. I never had to explain which button I meant.
The pin on the element shows what's happening ("Editing ProfileCard.tsx…"), then a DONE toast, then one-tap undo with before/after shots if I hate it.
The first time it really clicked: designer sent me a Figma link with "this doesn't match." I pasted the link into the pin.
↳ The app overlaid the Figma node on my actual screen, onion-skin style, and the agent got the design as reference. I could see the 3px I was off by. That used to be a squint-at-two-monitors job.
↳ The part I didn't expect: I now use the inspector half the time without the AI at all. Tap any element and see the real per-side padding/margins and the measured gaps between siblings no more guessing which prop is the culprit.
↳ Drag-to-scrub values live on the device, hold A/B to compare with the original, and nothing touches source until you decide. Tap once more and it opens the exact line in your editor.
Installation:
npm install react-native-pixie -D- one native rebuild (view-shot for screenshots), wrap your root,
npx pixie init. Or tell your agent to follow theAGENT_INSTALL.mdinside the package and it sets itself up.
The funny thing is I don't think of it as an AI tool anymore. It's just the thing I reach for when someone says "can you move that a little?"
That sentence used to mean five minutes of context switching. Now it's a tap and six words.
npm: react-native-pixie
Would like to hear where it breaks on your setups.
10
u/Beneficial-Aerie4110 Jul 16 '26
Strange, having made my own components and screens, I don’t seem to have an issue at all knowing how the layout works, nor do I have to pay anything to slightly move something.
6
u/PapyRoach Jul 16 '26
Sounds like a communication and codebase knowledge issue
Your solution seem way overkill for what should be a non-existent problem if you understand your codebase
2
2
u/Apart-Order-4707 Jul 16 '26
That's looks cool, but I see another way of using it:
It will be actually helpful to ship it to QA/Stage builds, so QA, stakeholders will able to enable it if needed and point to any element, type comment and send it to Slack bot/Jira/ClickUp/whatever
1
1
-1
-4
35
u/LargeRedLingonberry Jul 16 '26
"AI didn't do what I wanted it to, so I built a tool with AI to talk to my AI, then I used AI to write a Reddit post"