Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
React Native Design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile…
The styling, navigation, and animation layer that makes a React Native app feel native rather than ported. It runs animations on the UI thread with Reanimated 3 worklets for jank-free 60fps motion, composes touch gestures so swipeable cards and taps never fight each other, and handles iOS/Android visual differences behind a single API. Polished motion is what users read as quality, and this skill delivers it.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
Sixty frames per second is non-negotiable for native feel. Styles stay off the bridge, animations run on the UI thread, navigation is fully typed, and platform differences resolve from one codebase.
- Defines all styles in StyleSheet.create outside the component body, so React Native converts them to IDs and sends only the ID over the bridge instead of recreating style objects on every render.
- Builds layouts with flexbox rows, columns and gap, scaling spacing and font size by screen dimensions via useWindowDimensions instead of fixed pixels, so small phones and tablets both read well.
- Sets up fully typed React Navigation: a native stack with a ParamList for every route and a bottom tab navigator with focused/unfocused icon states, so navigation params are type-checked at compile time.
- Moves animation to the native UI thread with Reanimated: useSharedValue plus useAnimatedStyle worklets drive spring press-in scale and drag interactions at 60fps without touching the JS bridge.
- Composes gestures through GestureDetector (pan, pinch, tap) with simultaneousHandlers, so swipeable cards inside scroll views cooperate instead of swallowing each other's touches.
- Resolves platform differences with Platform.select: iOS shadow versus Android elevation, SF Pro versus Roboto, status bar height and safe-area insets handled per platform from a single codebase.
One power source. 6 lines out.
react-native-design · core
core active · 6 lines
- ✓ styling components with
Styling components with StyleSheet and dynamic variant styles
- ✓ setting up stack and tab
Setting up Stack and Tab navigation with React Navigation
- ✓ building 60fps animations
Building 60fps animations with Reanimated 3 shared values
- ✓ creating draggable, swip…
Creating draggable, swipeable, gesture-driven interactions
- ✓ handling platform-specif…
Handling platform-specific styling for iOS and Android
- ✓ building responsive layo…
Building responsive layouts and safe-area-aware screens
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Native-quality 60fps animations that run on the UI thread, immune to JS bridge lag
license: perpetual -
Gesture interactions that never swallow user input through proper responder chaining
license: perpetual -
Consistent look across iOS and Android from one styling system
license: perpetual -
Better measured performance by keeping styles static and avoiding inline objects that break memoization
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
StyleSheet patterns: static, dynamic variant, and flexbox row/column/centered layouts
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
React Native developers who want their app's styling, navigation, and animations to hit native-quality polish on both platforms.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
Does this cover app architecture too, or just the visual layer?
It is the styling, navigation, and animation layer: StyleSheet patterns, typed React Navigation setup, and Reanimated 3 motion. Data fetching, auth flows, and offline structure belong to the react-native-architecture skill, the two are deliberately split.
-
Why Reanimated worklets, isn't the built-in Animated API enough?
Worklets run the animation on the UI thread, so motion stays at 60fps even when the JS bridge is busy. The gesture composition patterns also keep swipeable cards and taps from fighting over the same touch, which is where Animated-based setups usually stutter.
-
Does it give me a finished design system with brand colors and components?
No. You get patterns plus one worked example, an animated ItemCard with press-in scale feedback, not a branded component library. Color tokens, typography choices, and visual identity remain yours to define.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.