What are the main differences between browser CSS and the styling system in React Native?

Short answer

React Native has no traditional CSS files. Properties use camelCase in JavaScript objects; only Flexbox is supported, without Grid or float; the default flexDirection is column; and dimensions are unitless (density-independent pixels).

Explanation

The Yoga engine does not use CSS selectors (such as .class or #id) or automatic style inheritance, except for nested text inside a <Text> element. Dimensions use dp (density-independent points). There are no elements such as <div>; instead, use <View> and <Text> with explicit style objects.

Code example

// Compare formats:
// CSS: background-color: #fff; margin-top: 10px;
// React Native:
const styles = StyleSheet.create({
  box: {
    backgroundColor: '#ffffff',
    marginTop: 10,
    borderRadius: 8,
  }
});

Common mistakes

• Writing units such as "px", "rem", or "em" in numeric styles, causing a fatal runtime error.

Follow-up questions

• What is NativeWind, and how does it let developers use Tailwind CSS in React Native?

Sources

• React Native docs — Style