CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-react-native

A framework for building native apps using React

Overall
score

100%

Evaluation — 100%

↑ 1.06x

Agent success when using this tile

Overview
Eval results
Files

styling.mddocs/

React Native Styling System

React Native provides a comprehensive styling system based on JavaScript objects and flexbox layout, with platform-specific color utilities and dynamic theming support.

Installation

npm install react-native

Core Styling API

StyleSheet

The primary API for creating and managing component styles efficiently with optimization and validation.

// ESM
import {StyleSheet} from 'react-native';

// CommonJS
const {StyleSheet} = require('react-native');

// Basic style creation
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 8,
  },
});

// Use styles in components
<View style={styles.container}>
  <Text style={styles.text}>Hello World</Text>
  <TouchableOpacity style={styles.button}>
    <Text style={[styles.text, {color: 'white'}]}>Press me</Text>
  </TouchableOpacity>
</View>

// Combine styles
const combinedStyles = StyleSheet.create({
  base: {
    fontSize: 16,
    color: 'black',
  },
  bold: {
    fontWeight: 'bold',
  },
  red: {
    color: 'red',
  },
});

// Multiple style application
<Text style={[combinedStyles.base, combinedStyles.bold]}>Bold text</Text>
<Text style={[combinedStyles.base, combinedStyles.red]}>Red text</Text>

// Conditional styling
<View style={[
  styles.container,
  isActive && styles.active,
  {opacity: isVisible ? 1 : 0.5}
]}>
  <Text>Conditional styling</Text>
</View>

// Platform-specific styles
const platformStyles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        backgroundColor: 'white',
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        backgroundColor: '#f8f9fa',
        elevation: 5,
      },
    }),
  },
});

// Dynamic styles based on props
const createStyles = (theme, size) => StyleSheet.create({
  container: {
    backgroundColor: theme.backgroundColor,
    padding: size === 'large' ? 20 : 10,
  },
  text: {
    color: theme.textColor,
    fontSize: size === 'large' ? 18 : 14,
  },
});

// Use hairline width for thin borders
const hairlineStyles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth, // 1 / PixelRatio.get()
    backgroundColor: '#ccc',
  },
});

// Absolute fill shorthand
const overlayStyles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject, // {position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

// Style flattening and composition  
const flattenedStyle = StyleSheet.flatten([
  styles.base,
  styles.modifier,
  {customProperty: 'value'}
]);

// Style arrays with functions
function createButtonStyle(variant, size, disabled) {
  return [
    styles.baseButton,
    styles[`button${variant}`], // buttonPrimary, buttonSecondary, etc.
    styles[`size${size}`],      // sizeLarge, sizeSmall, etc.
    disabled && styles.disabled,
  ];
}
interface StyleSheetStatic {
  // Style creation
  create<T extends NamedStyles<T>>(styles: T): T;
  
  // Style utilities
  flatten<T>(style: StyleProp<T>): T;
  
  // Constants
  hairlineWidth: number;
  absoluteFillObject: {
    position: 'absolute';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  };
  
  // Utility methods
  setStyleAttributePreprocessor?(property: string, process: (value: any) => any): void;
}

// Style property types
type StyleProp<T> = T | RegisteredStyle<T> | RecursiveArray<T | RegisteredStyle<T> | Falsy> | Falsy;

interface NamedStyles<T> {
  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
}

type Falsy = undefined | null | false;
type RecursiveArray<T> = ReadonlyArray<T | ReadonlyArray<T>>;

// Core style interfaces
interface LayoutStyle {
  // Flexbox
  display?: 'none' | 'flex';
  flex?: number;
  flexBasis?: number | string;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  flexGrow?: number;
  flexShrink?: number;
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
  
  // Alignment
  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
  
  // Positioning
  position?: 'absolute' | 'relative';
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  left?: number | string;
  
  // Dimensions
  width?: number | string;
  height?: number | string;
  minWidth?: number | string;
  maxWidth?: number | string;
  minHeight?: number | string;
  maxHeight?: number | string;
  
  // Spacing
  margin?: number | string;
  marginBottom?: number | string;
  marginEnd?: number | string;
  marginHorizontal?: number | string;
  marginLeft?: number | string;
  marginRight?: number | string;
  marginStart?: number | string;
  marginTop?: number | string;
  marginVertical?: number | string;
  
  padding?: number | string;
  paddingBottom?: number | string;
  paddingEnd?: number | string;
  paddingHorizontal?: number | string;
  paddingLeft?: number | string;
  paddingRight?: number | string;
  paddingStart?: number | string;
  paddingTop?: number | string;
  paddingVertical?: number | string;
  
  // Z-index
  zIndex?: number;
}

interface ViewStyle extends LayoutStyle {
  // Background
  backgroundColor?: string;
  
  // Border
  borderBottomColor?: string;
  borderBottomEndRadius?: number;
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
  borderBottomStartRadius?: number;
  borderBottomWidth?: number;
  borderColor?: string;
  borderEndColor?: string;
  borderEndWidth?: number;
  borderLeftColor?: string;
  borderLeftWidth?: number;
  borderRadius?: number;
  borderRightColor?: string;
  borderRightWidth?: number;
  borderStartColor?: string;
  borderStartWidth?: number;
  borderStyle?: 'solid' | 'dotted' | 'dashed';
  borderTopColor?: string;
  borderTopEndRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  borderTopStartRadius?: number;
  borderTopWidth?: number;
  borderWidth?: number;
  
  // Shadow (iOS)
  shadowColor?: string;
  shadowOffset?: {width: number; height: number};
  shadowOpacity?: number;
  shadowRadius?: number;
  
  // Elevation (Android)  
  elevation?: number;
  
  // Opacity
  opacity?: number;
  
  // Overflow
  overflow?: 'visible' | 'hidden' | 'scroll';
  
  // Transform
  transform?: TransformStyle[];
  
  // Backface
  backfaceVisibility?: 'visible' | 'hidden';
}

interface TextStyle extends LayoutStyle {
  // Font
  color?: string;
  fontFamily?: string;
  fontSize?: number;
  fontStyle?: 'normal' | 'italic';
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  fontVariant?: FontVariant[];
  
  // Text layout
  letterSpacing?: number;
  lineHeight?: number;
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center';
  textDecorationColor?: string;
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
  textShadowColor?: string;
  textShadowOffset?: {width: number; height: number};
  textShadowRadius?: number;
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
  
  // Writing direction
  writingDirection?: 'auto' | 'ltr' | 'rtl';
  
  // Android specific
  includeFontPadding?: boolean;
}

interface ImageStyle extends LayoutStyle {
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
  tintColor?: string;
  overlayColor?: string;
}

type TransformStyle = 
  | {perspective: number}
  | {rotate: string}
  | {rotateX: string}
  | {rotateY: string}
  | {rotateZ: string}
  | {scale: number}
  | {scaleX: number}
  | {scaleY: number}
  | {translateX: number}
  | {translateY: number}
  | {skewX: string}
  | {skewY: string}
  | {matrix: number[]};

Color Utilities

processColor

Process color values into platform-specific formats for native integration.

import {processColor} from 'react-native';

// Process various color formats
const redColor = processColor('red');          // Named color
const hexColor = processColor('#ff0000');      // Hex color
const rgbColor = processColor('rgb(255,0,0)'); // RGB color
const rgbaColor = processColor('rgba(255,0,0,0.5)'); // RGBA color
const hslColor = processColor('hsl(0,100%,50%)');     // HSL color

console.log('Processed colors:', {
  redColor,   // Platform-specific number
  hexColor,   // Platform-specific number
  rgbColor,   // Platform-specific number
  rgbaColor,  // Platform-specific number
  hslColor,   // Platform-specific number
});

// Use with native modules
const processedColor = processColor('#007AFF');
NativeModules.MyNativeModule.setBackgroundColor(processedColor);

// Color validation
const isValidColor = (color) => {
  return processColor(color) !== null;
};

console.log(isValidColor('red'));     // true
console.log(isValidColor('#ff0000')); // true
console.log(isValidColor('invalid')); // false

// Dynamic color processing
const colors = ['red', 'green', 'blue', '#ff0000', 'rgba(0,255,0,0.5)'];
const processedColors = colors.map(color => ({
  original: color,
  processed: processColor(color),
}));
interface processColorStatic {
  (color: string): number | null;
}

PlatformColor

Create platform-specific color references that automatically adapt to system themes and settings.

import {PlatformColor} from 'react-native';

// iOS system colors
const iosSystemColors = {
  label: PlatformColor('label'),                    // Primary text
  secondaryLabel: PlatformColor('secondaryLabel'), // Secondary text
  systemBackground: PlatformColor('systemBackground'), // Background
  systemBlue: PlatformColor('systemBlue'),         // System blue
  systemRed: PlatformColor('systemRed'),           // System red
  systemGray: PlatformColor('systemGray'),         // System gray
};

// Android system colors
const androidSystemColors = {
  primary: PlatformColor('@android:color/holo_blue_bright'),
  accent: PlatformColor('?android:colorAccent'),
  background: PlatformColor('?android:colorBackground'),
  foreground: PlatformColor('?android:textColorPrimary'),
};

// Platform-specific styling
const systemStyles = StyleSheet.create({
  container: {
    backgroundColor: Platform.select({
      ios: PlatformColor('systemBackground'),
      android: PlatformColor('?android:colorBackground'),
    }),
  },
  text: {
    color: Platform.select({
      ios: PlatformColor('label'),
      android: PlatformColor('?android:textColorPrimary'),
    }),
  },
  button: {
    backgroundColor: Platform.select({
      ios: PlatformColor('systemBlue'),
      android: PlatformColor('?android:colorAccent'),
    }),
  },
});

// Semantic color usage
const semanticColors = {
  primary: Platform.select({
    ios: PlatformColor('systemBlue'),
    android: PlatformColor('?android:colorPrimary'),
    default: '#007AFF',
  }),
  background: Platform.select({
    ios: PlatformColor('systemBackground'),
    android: PlatformColor('?android:colorBackground'),
    default: '#ffffff',
  }),
  text: Platform.select({
    ios: PlatformColor('label'),
    android: PlatformColor('?android:textColorPrimary'), 
    default: '#000000',
  }),
};

// Component with platform colors
function ThemedButton({title, onPress}) {
  return (
    <TouchableOpacity
      style={[styles.button, {backgroundColor: semanticColors.primary}]}
      onPress={onPress}
    >
      <Text style={[styles.buttonText, {color: 'white'}]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
}

// Custom platform colors (requires native setup)
const customColors = {
  brandPrimary: Platform.select({
    ios: PlatformColor('MyAppPrimary'),      // Custom iOS color
    android: PlatformColor('@color/brand_primary'), // Custom Android color
  }),
};
interface PlatformColorStatic {
  // Create platform color reference
  (...names: string[]): PlatformColor;
}

interface PlatformColor {
  __typename: 'PlatformColor';
}

// Common iOS system colors
type iOSSystemColor = 
  | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'quaternaryLabel'
  | 'systemBackground' | 'secondarySystemBackground' | 'tertiarySystemBackground'
  | 'systemBlue' | 'systemGreen' | 'systemIndigo' | 'systemOrange' 
  | 'systemPink' | 'systemPurple' | 'systemRed' | 'systemTeal' | 'systemYellow'
  | 'systemGray' | 'systemGray2' | 'systemGray3' | 'systemGray4' | 'systemGray5' | 'systemGray6';

// Common Android system colors  
type AndroidSystemColor =
  | '?android:colorPrimary' | '?android:colorAccent' | '?android:colorBackground'
  | '?android:textColorPrimary' | '?android:textColorSecondary'
  | '@android:color/white' | '@android:color/black'
  | '@android:color/holo_blue_bright' | '@android:color/holo_green_light';

DynamicColorIOS

Create iOS-specific dynamic colors that automatically respond to appearance changes (light/dark mode).

import {DynamicColorIOS} from 'react-native';

// Basic dynamic color (iOS only)
const dynamicBackground = DynamicColorIOS({
  light: '#ffffff',  // Light mode color
  dark: '#000000',   // Dark mode color
});

// Dynamic colors with high contrast support
const dynamicText = DynamicColorIOS({
  light: '#333333',
  dark: '#ffffff',
  highContrastLight: '#000000',     // High contrast light mode
  highContrastDark: '#ffffff',      // High contrast dark mode
});

// Complex dynamic color scheme
const dynamicColors = {
  background: DynamicColorIOS({
    light: '#f8f9fa',
    dark: '#121212',
    highContrastLight: '#ffffff',
    highContrastDark: '#000000',
  }),
  
  surface: DynamicColorIOS({
    light: '#ffffff',
    dark: '#1e1e1e',
    highContrastLight: '#ffffff', 
    highContrastDark: '#1c1c1e',
  }),
  
  text: DynamicColorIOS({
    light: '#1c1c1e',
    dark: '#ffffff',
    highContrastLight: '#000000',
    highContrastDark: '#ffffff',
  }),
  
  secondaryText: DynamicColorIOS({
    light: '#8e8e93',
    dark: '#8e8e93',
    highContrastLight: '#606060',
    highContrastDark: '#a0a0a0',
  }),
  
  accent: DynamicColorIOS({
    light: '#007AFF',
    dark: '#0A84FF',
    highContrastLight: '#0040DD',
    highContrastDark: '#409CFF',
  }),
};

// Themed component with dynamic colors
const themedStyles = StyleSheet.create({
  container: {
    backgroundColor: Platform.OS === 'ios' 
      ? dynamicColors.background 
      : '#f8f9fa', // Android fallback
  },
  
  card: {
    backgroundColor: Platform.OS === 'ios'
      ? dynamicColors.surface
      : '#ffffff', // Android fallback
    
    shadowColor: Platform.OS === 'ios'
      ? DynamicColorIOS({light: '#000000', dark: '#ffffff'})
      : '#000000',
  },
  
  text: {
    color: Platform.OS === 'ios'
      ? dynamicColors.text
      : '#1c1c1e', // Android fallback
  },
  
  button: {
    backgroundColor: Platform.OS === 'ios'
      ? dynamicColors.accent
      : '#007AFF', // Android fallback
  },
});

// Function to create dynamic colors
function createDynamicColor(lightColor, darkColor, options = {}) {
  if (Platform.OS !== 'ios') {
    return lightColor; // Fallback for non-iOS platforms
  }
  
  return DynamicColorIOS({
    light: lightColor,
    dark: darkColor,
    highContrastLight: options.highContrastLight || lightColor,
    highContrastDark: options.highContrastDark || darkColor,
  });
}

// Usage with color scheme hook
function AdaptiveComponent() {
  const colorScheme = useColorScheme();
  
  // iOS uses dynamic colors, others use manual switching
  const backgroundColor = Platform.OS === 'ios' 
    ? dynamicColors.background
    : (colorScheme === 'dark' ? '#121212' : '#f8f9fa');
    
  return (
    <View style={{backgroundColor}}>
      <Text>Adaptive content</Text>
    </View>
  );
}
interface DynamicColorIOSStatic {
  (options: DynamicColorIOSOptions): DynamicColorIOS;
}

interface DynamicColorIOSOptions {
  light: string;
  dark: string;
  highContrastLight?: string;
  highContrastDark?: string;
}

interface DynamicColorIOS {
  __typename: 'DynamicColorIOS';
}

Theme and Appearance Management

useColorScheme Hook

React hook for accessing current color scheme with automatic updates.

import {useColorScheme} from 'react-native';

// Basic color scheme detection
function ThemedComponent() {
  const colorScheme = useColorScheme();
  
  const backgroundColor = colorScheme === 'dark' ? '#000' : '#fff';
  const textColor = colorScheme === 'dark' ? '#fff' : '#000';
  
  return (
    <View style={{backgroundColor}}>
      <Text style={{color: textColor}}>
        Current scheme: {colorScheme}
      </Text>
    </View>
  );
}

// Theme provider with color scheme
const ThemeContext = createContext();

export function ThemeProvider({children}) {
  const colorScheme = useColorScheme();
  
  const theme = {
    colors: {
      background: colorScheme === 'dark' ? '#121212' : '#ffffff',
      surface: colorScheme === 'dark' ? '#1e1e1e' : '#f5f5f5',
      text: colorScheme === 'dark' ? '#ffffff' : '#000000',
      primary: colorScheme === 'dark' ? '#bb86fc' : '#6200ee',
      accent: colorScheme === 'dark' ? '#03dac6' : '#018786',
    },
    isDark: colorScheme === 'dark',
  };
  
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook for theme
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

// Component using theme
function ThemedCard({title, children}) {
  const theme = useTheme();
  
  const styles = StyleSheet.create({
    card: {
      backgroundColor: theme.colors.surface,
      padding: 16,
      borderRadius: 8,
      marginVertical: 8,
      shadowColor: theme.isDark ? '#ffffff' : '#000000',
      shadowOpacity: theme.isDark ? 0.1 : 0.2,
      shadowRadius: 4,
      elevation: 3,
    },
    title: {
      fontSize: 18,
      fontWeight: 'bold',
      color: theme.colors.text,
      marginBottom: 8,
    },
  });
  
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      {children}
    </View>
  );
}

// Responsive theming with dimensions
function ResponsiveThemedComponent() {
  const colorScheme = useColorScheme();
  const {width} = useWindowDimensions();
  
  const isTablet = width >= 768;
  const isDark = colorScheme === 'dark';
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: isDark ? '#121212' : '#ffffff',
      padding: isTablet ? 32 : 16,
    },
    text: {
      color: isDark ? '#ffffff' : '#000000',
      fontSize: isTablet ? 20 : 16,
    },
  });
  
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Responsive themed content</Text>
    </View>
  );
}
interface useColorSchemeStatic {
  (): 'light' | 'dark' | null;
}

Advanced Styling Patterns

Responsive Design

import {Dimensions, PixelRatio} from 'react-native';

// Responsive breakpoints
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');

const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};

const isTablet = screenWidth >= breakpoints.md;
const isLandscape = screenWidth > screenHeight;

// Responsive utility functions
function responsiveSize(size) {
  const scale = screenWidth / 320; // Base width (iPhone 5)
  const newSize = size * scale;
  
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
  }
}

function responsiveFontSize(fontSize) {
  const {scale, fontScale} = Dimensions.get('window');
  const size = fontSize * scale * fontScale;
  return Math.round(PixelRatio.roundToNearestPixel(size));
}

// Responsive grid system
function createGridStyles(columns = 12) {
  const styles = {};
  
  for (let i = 1; i <= columns; i++) {
    styles[`col${i}`] = {
      width: `${(i / columns) * 100}%`,
    };
  }
  
  return StyleSheet.create(styles);
}

const gridStyles = createGridStyles();

// Usage
<View style={{flexDirection: 'row'}}>
  <View style={gridStyles.col6}>
    <Text>Half width</Text>
  </View>
  <View style={gridStyles.col6}>
    <Text>Half width</Text>
  </View>
</View>

Performance Optimization

// Memoized styles for performance
const memoizedStyles = useMemo(() => 
  StyleSheet.create({
    container: {
      backgroundColor: theme.backgroundColor,
      padding: spacing.medium,
    },
    text: {
      color: theme.textColor,
      fontSize: typography.body,
    },
  }), [theme, spacing, typography]
);

// Style composition patterns
const baseStyles = StyleSheet.create({
  button: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const variantStyles = StyleSheet.create({
  primary: {
    backgroundColor: '#007AFF',
  },
  secondary: {
    backgroundColor: '#8E8E93',
  },
  danger: {
    backgroundColor: '#FF3B30',
  },
});

const sizeStyles = StyleSheet.create({
  small: {
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  large: {
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
});

// Button component with composed styles
function Button({variant = 'primary', size = 'medium', style, ...props}) {
  const buttonStyles = [
    baseStyles.button,
    variantStyles[variant],
    size !== 'medium' && sizeStyles[size],
    style,
  ];
  
  return <TouchableOpacity style={buttonStyles} {...props} />;
}

This comprehensive styling documentation provides developers with all the tools needed to create beautiful, responsive, and platform-appropriate user interfaces in React Native applications.

Install with Tessl CLI

npx tessl i tessl/npm-react-native@1000.0.0

docs

animation.md

core-components.md

index.md

native-bridge.md

platform-apis.md

react-hooks.md

styling.md

user-interaction.md

tile.json