React Native StyleSheet Validator: Catch Style Errors Early

Master React Native StyleSheet patterns: understand the performance difference between StyleSheet.create and inline styles, spot invalid CSS properties, and avoid the platform-specific style gotchas that cause subtle UI bugs.

StyleSheet.create vs Inline Styles

The performance difference is most significant in list items rendered hundreds of times per second during scroll:

import { StyleSheet, View, Text } from 'react-native';

// Bad: new object created on every render
const ListItem = ({ title }) => (
  <View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 8 }}>
    <Text style={{ fontSize: 16, fontWeight: '600' }}>{title}</Text>
  </View>
);

// Good: registered once, referenced by ID
const ListItem = ({ title }) => (
  <View style={styles.container}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
});

When combining static and dynamic styles, put the static part in StyleSheet.create and apply dynamic values as an additional inline style. This preserves the registration benefit for the static parts:

// Combining static and dynamic styles correctly
const Badge = ({ color, label }) => (
  <View style={[styles.badge, { backgroundColor: color }]}>
    <Text style={styles.badgeText}>{label}</Text>
  </View>
);

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '700',
  },
});

Invalid Style Properties (Common Mistakes)

Flexbox Defaults in React Native

// React Native flex DEFAULTS (differ from CSS!)
const defaultStyles = {
  flexDirection: 'column', // CSS default is 'row'
  alignContent: 'flex-start', // CSS default is 'stretch'
  flexShrink: 0, // CSS default is 1
  position: 'relative', // same as CSS
  display: 'flex', // always (no other option except 'none')
};

// Platform-specific shadows
const styles = StyleSheet.create({
  card: {
    // iOS shadow
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    // Android shadow
    elevation: 4,
    // backgroundColor required for Android elevation to work
    backgroundColor: '#fff',
  },
});

StyleSheet.flatten for Reading Style Values

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: { color: '#6366f1', fontSize: 16 },
});

// Read a style value programmatically
const flat = StyleSheet.flatten(styles.text);
console.log(flat.color); // '#6366f1'

// Flatten an array of styles
const merged = StyleSheet.flatten([
  styles.text,
  { fontWeight: '700' },
]);
// Result: { color: '#6366f1', fontSize: 16, fontWeight: '700' }