Chapter 3 of 12 ~18 min read

From CSS/HTML to React Native Styling

Flexbox by default, StyleSheet.create, no CSS cascade, units in dp, padding/margin, Image vs img.

1. CSS vs React Native StyleSheet Rules

In Cordova, you had full CSS with stylesheets, selector cascading, classes, and pixel/rem/vh units. In React Native:

No CSS Cascade: Styles do not inherit downward (except <Text> inside another <Text>).
Flexbox Direction: Default flexDirection is column (vertical), not row!
Unitless Numbers: Numbers like 16 represent density-independent pixels (dp), never px or rem.
CamelCase Property Names: background-color becomes backgroundColor, margin-top becomes marginTop.

Cordova HTML & CSS

<!-- HTML -->
<div class="card">
  <img src="img/profile.jpg" class="avatar" />
  <div class="info">
    <h3 class="name">Jane Doe</h3>
    <p class="role">Software Engineer</p>
  </div>
</div>

<!-- CSS -->
<style>
.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.avatar { width: 50px; height: 50px; border-radius: 50%; }
.name { font-size: 18px; font-weight: bold; margin: 0 0 4px 12px; }
.role { font-size: 14px; color: #666; margin-left: 12px; }
</style>

React Native JSX & StyleSheet

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

export function UserCard() {
  return (
    <View style={styles.card}>
      <Image 
        source={require('./assets/profile.jpg')} 
        style={styles.avatar} 
      />
      <View style={styles.info}>
        <Text style={styles.name}>Jane Doe</Text>
        <Text style={styles.role}>Software Engineer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
    elevation: 3, // Android native shadow
    shadowColor: '#000', // iOS shadow
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  avatar: { width: 50, height: 50, borderRadius: 25 },
  info: { marginLeft: 12 },
  name: { fontSize: 18, fontWeight: '700', color: '#1e293b' },
  role: { fontSize: 14, color: '#64748b', marginTop: 2 }
});

Previous Chapter Next Chapter