Skip to main content

Styler Cookbook

This cookbook provides practical examples and advanced patterns for using Styler in your React Native applications. Each example demonstrates real-world scenarios you'll encounter when building with Styler.

📚 Advanced Patterns

This cookbook covers advanced styling patterns, custom components, and real-world examples that go beyond basic usage.

Creating Custom Styled Components​

Basic Styled Component​

Create reusable styled components using Styler.create:

import React from 'react';
import { View, Text } from 'react-native';
import { Styler, useStyled } from '@mapples/style';

// Create a styled component using Styler.create
const Card = ({ children, styled, ...props }) => {
  const processedStyle = useStyled(styled);

  return (
    <View style={processedStyle.card} {...props}>
      {children}
    </View>
  );
};

// Define default styles
const defaultCardStyles = Styler.create({
  card: {
    backgroundColor: 'theme.colors.surface',
    borderRadius: 'sizing.md',
    padding: 'sizing.lg',
    shadowColor: 'theme.colors.text',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    '&:mobile': {
      padding: 'sizing.md',
    },
    '&:tablet': {
      padding: 'sizing.xl',
    },
  },
});

// Usage
<Card styled={defaultCardStyles}>
  <Text>Card content</Text>
</Card>

Advanced Styled Component with Props​

🚀 Advanced Components

Create components with variant and size props for maximum flexibility:

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { Styler, useStyled, useTheme } from '@mapples/style';

const Button = ({
  variant = 'primary',
  size = 'md',
  children,
  styled,
  ...props
}) => {
  const { getColor } = useTheme();
  const processedStyle = useStyled(styled);

  const getVariantStyles = () => {
    switch (variant) {
      case 'primary':
        return {
          backgroundColor: 'theme.colors.primary',
          color: 'theme.colors.background',
        };
      case 'secondary':
        return {
          backgroundColor: 'theme.colors.surface',
          color: 'theme.colors.primary',
          borderWidth: 1,
          borderColor: 'theme.colors.primary',
        };
      case 'ghost':
        return {
          backgroundColor: 'transparent',
          color: 'theme.colors.primary',
        };
      default:
        return {};
    }
  };

  const getSizeStyles = () => {
    switch (size) {
      case 'sm':
        return {
          paddingVertical: 'sizing.sm',
          paddingHorizontal: 'sizing.md',
          fontSize: 'sizing.sm',
        };
      case 'lg':
        return {
          paddingVertical: 'sizing.lg',
          paddingHorizontal: 'sizing.xl',
          fontSize: 'sizing.lg',
        };
      default:
        return {
          paddingVertical: 'sizing.md',
          paddingHorizontal: 'sizing.lg',
          fontSize: 'sizing.md',
        };
    }
  };

  return (
    <Pressable
      style={[
        processedStyle.button,
        getVariantStyles(),
        getSizeStyles(),
      ]}
      {...props}
    >
      <Text style={processedStyle.text}>{children}</Text>
    </Pressable>
  );
};

// Usage with custom styling
<Button
  variant="primary"
  size="lg"
  styled={{
    button: {
      borderRadius: 'sizing.sm',
      alignItems: 'center',
      justifyContent: 'center',
      '&:hover': {
        opacity: 0.8,
      },
    },
    text: {
      fontWeight: 'bold',
      textAlign: 'center',
    },
  }}
>
  Click me
</Button>

Using useStyled for Style Transformations​

Complex Style Processing​

🔧 Style Transformations

Use useStyled for complex style processing with theme and responsive interpolation:

import React from 'react';
import { View, Text } from 'react-native';
import { useStyled, useTheme, useResponsive } from '@mapples/style';

const ProductCard = ({ product, styled }) => {
  const { getColor } = useTheme();
  const { getResponsiveStyle } = useResponsive();
  const processedStyle = useStyled(styled);

  return (
    <View style={processedStyle.container}>
      <View style={processedStyle.imageContainer}>
        <Text style={processedStyle.imagePlaceholder}>
          {product.name.charAt(0)}
        </Text>
      </View>
      <View style={processedStyle.content}>
        <Text style={processedStyle.title}>{product.name}</Text>
        <Text style={processedStyle.price}>${product.price}</Text>
        <Text style={processedStyle.description}>
          {product.description}
        </Text>
      </View>
    </View>
  );
};

// Usage with comprehensive styling
<ProductCard
  product={productData}
  styled={{
    container: {
      backgroundColor: 'theme.colors.surface',
      borderRadius: 'sizing.md',
      margin: 'sizing.sm',
      shadowColor: 'theme.colors.text',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
      '&:mobile': {
        width: 'calc(50% - 16px)',
        margin: 'sizing.xs',
      },
      '&:tablet': {
        width: 'calc(33.333% - 16px)',
        margin: 'sizing.sm',
      },
      '&:desktop': {
        width: 'calc(25% - 16px)',
        margin: 'sizing.md',
      },
    },
    imageContainer: {
      height: 'sizing.xl * 3',
      backgroundColor: 'theme.colors.background',
      borderTopLeftRadius: 'sizing.md',
      borderTopRightRadius: 'sizing.md',
      justifyContent: 'center',
      alignItems: 'center',
    },
    imagePlaceholder: {
      fontSize: 'sizing.xl * 2',
      fontWeight: 'bold',
      color: 'theme.colors.primary',
    },
    content: {
      padding: 'sizing.md',
    },
    title: {
      fontSize: 'sizing.lg',
      fontWeight: 'bold',
      color: 'theme.colors.text',
      marginBottom: 'sizing.xs',
    },
    price: {
      fontSize: 'sizing.md',
      fontWeight: 'bold',
      color: 'theme.colors.primary',
      marginBottom: 'sizing.sm',
    },
    description: {
      fontSize: 'sizing.sm',
      color: 'theme.colors.textSecondary',
      lineHeight: 'sizing.md',
    },
  }}
/>

Dynamic Style Generation​

import React, { useMemo } from 'react';
import { View, Text } from 'react-native';
import { useStyled, useTheme } from '@mapples/style';

const StatusBadge = ({ status, styled }) => {
  const { getColor } = useTheme();
  const processedStyle = useStyled(styled);

  const statusConfig = useMemo(() => {
    const configs = {
      success: {
        backgroundColor: 'theme.colors.success',
        color: 'theme.colors.background',
        icon: '✓',
      },
      warning: {
        backgroundColor: 'theme.colors.warning',
        color: 'theme.colors.background',
        icon: 'âš ',
      },
      error: {
        backgroundColor: 'theme.colors.error',
        color: 'theme.colors.background',
        icon: '✕',
      },
      info: {
        backgroundColor: 'theme.colors.primary',
        color: 'theme.colors.background',
        icon: 'ℹ',
      },
    };
    return configs[status] || configs.info;
  }, [status]);

  return (
    <View style={[processedStyle.badge, statusConfig]}>
      <Text style={processedStyle.icon}>{statusConfig.icon}</Text>
      <Text style={processedStyle.text}>{status}</Text>
    </View>
  );
};

// Usage
<StatusBadge
  status="success"
  styled={{
    badge: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 'sizing.xs',
      paddingHorizontal: 'sizing.sm',
      borderRadius: 'sizing.sm',
      margin: 'sizing.xs',
    },
    icon: {
      fontSize: 'sizing.sm',
      marginRight: 'sizing.xs',
    },
    text: {
      fontSize: 'sizing.sm',
      fontWeight: 'bold',
      textTransform: 'uppercase',
    },
  }}
/>

Advanced Responsive Patterns​

Grid Layout System​

📱 Responsive Grid

Create flexible grid layouts that adapt to different screen sizes:

import React from 'react';
import { View } from 'react-native';
import { useStyled, useResponsive } from '@mapples/style';

const Grid = ({ children, columns = 1, styled }) => {
  const { getResponsiveStyle } = useResponsive();
  const processedStyle = useStyled(styled);

  const gridStyle = getResponsiveStyle({
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: 'sizing.sm',
    '&:mobile': {
      margin: 'sizing.xs',
    },
  });

  return (
    <View style={[processedStyle.grid, gridStyle]}>
      {children}
    </View>
  );
};

const GridItem = ({ children, span = 1, styled }) => {
  const { getResponsiveStyle } = useResponsive();
  const processedStyle = useStyled(styled);

  const itemStyle = getResponsiveStyle({
    flex: span,
    padding: 'sizing.sm',
    '&:mobile': {
      flex: '100%',
      padding: 'sizing.xs',
    },
    '&:tablet': {
      flex: span <= 2 ? '50%' : '100%',
    },
  });

  return (
    <View style={[processedStyle.item, itemStyle]}>
      {children}
    </View>
  );
};

// Usage
<Grid styled={{ grid: { backgroundColor: 'theme.colors.background' } }}>
  <GridItem span={1} styled={{ item: { backgroundColor: 'theme.colors.surface' } }}>
    <Text>Item 1</Text>
  </GridItem>
  <GridItem span={2} styled={{ item: { backgroundColor: 'theme.colors.surface' } }}>
    <Text>Item 2 (spans 2 columns)</Text>
  </GridItem>
</Grid>

Animated Styled Components​

Combine Styler with React Native animations for smooth transitions:

import React, { useRef, useEffect } from 'react';
import { View, Text, Animated } from 'react-native';
import { useStyled } from '@mapples/style';

const AnimatedCard = ({ children, styled, isVisible = true }) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(50)).current;
  const processedStyle = useStyled(styled);

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: isVisible ? 1 : 0,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(slideAnim, {
        toValue: isVisible ? 0 : 50,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  }, [isVisible, fadeAnim, slideAnim]);

  return (
    <Animated.View
      style={[
        processedStyle.card,
        {
          opacity: fadeAnim,
          transform: [{ translateY: slideAnim }],
        },
      ]}
    >
      {children}
    </Animated.View>
  );
};

// Usage
<AnimatedCard
  isVisible={true}
  styled={{
    card: {
      backgroundColor: 'theme.colors.surface',
      borderRadius: 'sizing.md',
      padding: 'sizing.lg',
      margin: 'sizing.sm',
      shadowColor: 'theme.colors.text',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 8,
      elevation: 4,
    },
  }}
>
  <Text>Animated content</Text>
</AnimatedCard>

Performance Optimization Patterns​

Memoized Styled Components​

âš¡ Performance

Optimize your styled components for better performance with memoization:

import React, { memo, useMemo } from 'react';
import { View, Text } from 'react-native';
import { useStyled, Styler } from '@mapples/style';

const ExpensiveComponent = memo(({ data, styled }) => {
  const processedStyle = useStyled(styled);

  // Memoize expensive calculations
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      displayValue: item.value * 2,
    }));
  }, [data]);

  return (
    <View style={processedStyle.container}>
      {processedData.map((item, index) => (
        <View key={index} style={processedStyle.item}>
          <Text style={processedStyle.text}>{item.displayValue}</Text>
        </View>
      ))}
    </View>
  );
});

// Pre-create styles for better performance
const styles = Styler.create({
  container: {
    flex: 1,
    padding: 'sizing.md',
  },
  item: {
    backgroundColor: 'theme.colors.surface',
    padding: 'sizing.sm',
    marginBottom: 'sizing.xs',
    borderRadius: 'sizing.xs',
  },
  text: {
    color: 'theme.colors.text',
    fontSize: 'sizing.md',
  },
});

// Usage
<ExpensiveComponent data={largeDataSet} styled={styles} />

What's Next?​

🎨 Styled Components

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

Styled Components →

📚 Usage Guide

Learn the basics of setting up and using Styler in your projects.

Basic Setup →

🔧 API Reference

Complete technical documentation for all Styler functions and components.

Full API →