Question 1

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

Accepted 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).

Question 2

Why is StyleSheet.create preferred over direct inline styles?

Accepted Answer

It validates style names and values at creation time, provides type safety in TypeScript, and sends styles once through native memory to associate them with stable numeric IDs instead of creating new objects on every render.

Question 3

How do you build responsive layouts for phones and tablets of different sizes?

Accepted Answer

Use useWindowDimensions to track size and orientation changes, together with percentage-based Flexbox and helper libraries for proportional scaling.

Question 4

How are shadows and elevation handled across iOS and Android?

Accepted Answer

iOS uses shadowColor, shadowOffset, shadowOpacity, and shadowRadius, while Android uses a single built-in elevation property that represents an element's height above the background.

Question 5

How do you support and customize custom fonts and handle height and line-height issues?

Accepted Answer

Add the font files (TTF/OTF), link them through Expo Font or the assets directory in a bare build, use the correct fontFamily name, and set lineHeight to accommodate system text scaling.

Question 6

How do you support right-to-left (RTL) writing and layout interfaces for Arabic?

Accepted Answer

Use the I18nManager module and direction-neutral Flexbox properties such as marginStart, marginEnd, paddingStart, and paddingEnd instead of left and right.

Question 7

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

Accepted Answer

It translates Tailwind CSS classes into React Native-compatible StyleSheet objects at build time, enabling standard, concise className usage.

Question 8

How do you smoothly manage dark and light mode using useColorScheme?

Accepted Answer

Use the useColorScheme hook to listen to the device operating system's theme and connect it to a dynamic color object or Theme Provider to update screen colors immediately.

Question 9

What is the difference between position: "relative" and position: "absolute" in React Native layout?

Accepted Answer

Relative elements remain in the normal Flexbox flow and move relative to their original position, while absolute elements are completely removed from the layout flow and positioned relative to the nearest parent container.

Question 10

What are the benefits and uses of the AspectRatio property for flexible cards and images?

Accepted Answer

aspectRatio automatically controls the width-to-height ratio of any visible element (such as 16/9 or 1/1), allowing its height to adapt precisely when the screen width changes.