stack/v1/packages/mosaic/framework/skills/vercel-react-native-skills/rules/ui-styling.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Modern React Native Styling Patterns	MEDIUM	consistent design, smoother borders, cleaner layouts	styling, css, layout, shadows, gradients

Modern React Native Styling Patterns

Follow these styling patterns for cleaner, more consistent React Native code.

Always use borderCurve: 'continuous' with borderRadius:

// Incorrect
{ borderRadius: 12 }

// Correct – smoother iOS-style corners
{ borderRadius: 12, borderCurve: 'continuous' }

Use gap instead of margin for spacing between elements:

// Incorrect – margin on children
<View>
  <Text style={{ marginBottom: 8 }}>Title</Text>
  <Text style={{ marginBottom: 8 }}>Subtitle</Text>
</View>

// Correct – gap on parent
<View style={{ gap: 8 }}>
  <Text>Title</Text>
  <Text>Subtitle</Text>
</View>

Use padding for space within, gap for space between:

<View style={{ padding: 16, gap: 12 }}>
  <Text>First</Text>
  <Text>Second</Text>
</View>

Use experimental_backgroundImage for linear gradients:

// Incorrect – third-party gradient library
<LinearGradient colors={['#000', '#fff']} />

// Correct – native CSS gradient syntax
<View
  style={{
    experimental_backgroundImage: 'linear-gradient(to bottom, #000, #fff)',
  }}
/>

Use CSS boxShadow string syntax for shadows:

// Incorrect – legacy shadow objects or elevation
{ shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 }
{ elevation: 4 }

// Correct – CSS box-shadow syntax
{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)' }

Avoid multiple font sizes – use weight and color for emphasis:

// Incorrect – varying font sizes for hierarchy
<Text style={{ fontSize: 18 }}>Title</Text>
<Text style={{ fontSize: 14 }}>Subtitle</Text>
<Text style={{ fontSize: 12 }}>Caption</Text>

// Correct – consistent size, vary weight and color
<Text style={{ fontWeight: '600' }}>Title</Text>
<Text style={{ color: '#666' }}>Subtitle</Text>
<Text style={{ color: '#999' }}>Caption</Text>

Limiting font sizes creates visual consistency. Use fontWeight (bold/semibold) and grayscale colors for hierarchy instead.