Handle Keyboard and Safe Areas in React Native with Codex

Build a mobile screen inside an existing React Native project. Check safe areas, system text scaling, touch interaction, and keyboard behavior.

中文

Install in Codex

Use Codex with access to a local project. Keep the skill directory and its companion files from the same pinned revision.

Run git clone https://github.com/Eldergenix/Codex-Design.git. From the checkout, run git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c.
Copy the full skills/mobile-app-ui-implementation folder to .agents/skills/mobile-app-ui-implementation in your project, with its companion files.
Open your project in Codex. Select the skill via /skills or $mobile-app-ui-implementation and use the example on this page.

Example task

Add an event-notes screen to a fictional Expo app. It has a multiline input and a Save action at the bottom. Cover an open keyboard, large system text, and a local save failure.

What to check

The active text stays visible and Save remains reachable. Large text stays readable. A failed save shows a message and retry action. Record the platforms actually checked.

Original SKILL.md on GitHub · Updated 2026-11-11

Frequently asked question

Should I add NativeWind before using the skill?

Inspect the current dependencies, theme, and components first. Reuse the existing styling approach where it fits. Add NativeWind if the project is configured for it or the request calls for it.