skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

android-patterns

Provide idiomatic Android patterns for React Native apps.

3|Updated Dec 30, 2025
Search Tags:#android#react-native#elevation#ui patterns#statusbar#platform detection#backhandler
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill android-patterns-guicheffer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-patterns
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/platform/android-patterns
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill android-patterns-guicheffer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides essential patterns and best practices for developing native Android features within a cross-platform React Native application, ensuring a consistent and robust user experience.

Core Features & Use Cases

  • Platform Detection: Use PlatformIs.android() for clear, type-safe Android checks.
  • Status Bar Customization: Control Android's status bar background color.
  • Hardware Back Button Handling: Implement reliable BackHandler logic for navigation and prevent app exits.
  • Material Design Elevation: Apply shadows and depth using Zest tokens that work cross-platform.
  • Native Component Integration: Utilize Android-specific components like ToastAndroid.
  • Use Case: When building a new screen with a custom header and navigation flow, ensure the back button behavior is correctly handled on Android, and the status bar color matches your app's branding.

Quick Start

Implement the useBackHandler hook to manage the hardware back button press on Android.

Frequently Asked Questions about android-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle the Android hardware back button in React Native?▼

Customize the Android status bar in React Native by setting the background color to match your app's branding. This ensures a consistent visual experience across different screens and platform versions.

What is the best way to detect the Android platform in a React Native app?▼

Detect the Android platform in a React Native app using the PlatformIs.android() method for clear, type-safe checks. This allows you to conditionally render Android-specific components and apply native UI patterns safely.

How do I apply Material Design elevation shadows in React Native?▼

Apply Material Design elevation in React Native using Zest shadow tokens to render cross-platform depth and shadows. This approach provides consistent visual elevation without relying on platform-specific style props directly.

Can I use native Android components like ToastAndroid with React Native?▼

Yes, you can use native Android components like ToastAndroid within React Native. Integrating these native UI elements provides a more authentic platform experience without requiring custom native module bridges.

Related Skills

Explore More Software Engineering Skills→
joaopiccioni44joaopiccioni44

mobile-developer

Build cross-platform mobile apps with React Native and Flutter.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

jutsu-react-native:react-native-platform

Identify and manage platform-specific code paths in React Native apps.

Official
Intermediate
xaderlagguixaderlaggui
3

app-ui-design

Design accessible mobile UI systems for iOS and Android.

Community
Advanced
emilyLi2020emilyLi2020
2

Expo UI Jetpack Compose

Integrate Jetpack Compose components and Material Design 3 into Expo SDK 55 Android builds.

Community
Intermediate