Skip to main content

Styler

Package Reference: This documentation covers the Styler system built on top of the @mapples/style package. For complete API documentation, see the @mapples/style package reference.

Styler is a powerful and flexible styling system designed specifically for React Native applications. It provides a comprehensive solution for theme management, responsive design, typography, and enhanced styling capabilities that work seamlessly with the Mapples ecosystem.

What is Styler?​

Styler is built on top of the @mapples/style package and provides a higher-level abstraction for creating beautiful, consistent, and maintainable user interfaces.

📘 Key Concept

Styler operates through a context-based system where style configurations are provided at the application level and consumed throughout your component tree. This approach ensures consistency, flexibility, and performance across your entire application.

It offers:

  • Theme Management: Automatic light/dark mode support with device preference detection
  • Responsive Design: Breakpoint-based styling that adapts to different screen sizes
  • Typography System: Consistent text styling with customizable variants
  • Enhanced Sizing: Support for multipliers, calculations, and theme-based sizing
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Performance: Optimized with memoization and efficient style processing

Key Features​

🎨 Intelligent Theme System

Styler automatically detects and adapts to your device's color scheme preferences. Define your light and dark themes once, and Styler handles the rest.

How Styler Works​

Styler operates through a context-based system where style configurations are provided at the application level and consumed throughout your component tree.

This approach ensures:

  1. Consistency: All components share the same styling rules and theme
  2. Flexibility: Easy to override and customize styles at any level
  3. Performance: Styles are processed once and reused efficiently
  4. Maintainability: Centralized styling logic that's easy to update and modify

Integration with Mapples Creator​

Styler is deeply integrated with Mapples Creator, providing a visual interface for styling configuration and management.

  • Theme Configuration: Set up your color schemes and design tokens
  • Component Styling: Apply styles to components through the visual editor
  • Responsive Design: Configure breakpoints and responsive behavior
  • Typography Setup: Define your text styles and typography scale

Getting Started​

🚀 Quick Start

To begin using Styler in your Mapples project:

  1. Set up your theme in Mapples Creator
  2. Configure your styling preferences through the visual interface
  3. Start building components with automatic styling support
  4. Customize as needed using the powerful API

What's Next?​

🚀 Usage Guide

Learn how to set up themes and use basic Styler features in your projects.

Get Started →

🎨 Styled Components

Learn how to create and use styled components like StyledView with styled props.

Styled Components →

🍳 Cookbook

Explore advanced examples and patterns for custom components and styling.

Advanced Patterns →