React Native Core Concepts

React Native Core Concepts

React Native is built on the same principles as React for the web, but with a crucial difference. Instead of rendering to HTML elements like divs and spans, React Native renders to native platform components. When you write a View component, it becomes a UIView on iOS and an Android View on Android. This is the magic that makes React Native apps feel native.

The core components in React Native map directly to native UI elements. Instead of a div, you use a View. Instead of a span or p, you use Text. Instead of an img, you use Image. These components are the building blocks of your application. They are combined and nested to create complex user interfaces, just like HTML elements on the web.

Styling in React Native is done with JavaScript, not CSS. You write styles using JavaScript objects that are similar to CSS properties but use camelCase naming. For example, background-color in CSS becomes backgroundColor in React Native. Styles are applied directly to components using the style prop, and you can use StyleSheet.create to define reusable style objects.

The bridge is the mechanism that connects JavaScript to the native platform. When you write React Native code, it runs in a JavaScript engine on the device. The bridge is responsible for serializing messages between the JavaScript thread and the native UI thread. This architecture allows you to write your app logic in JavaScript while the UI is rendered natively, giving you the best of both worlds.