Question 1

How to make my React Native app responsive with media queries?

Accepted Answer

Use React Native Responsive's MediaQuery component or MediaQueryStyleSheet API to define styles based on device dimensions. The library provides CSS-like syntax, as shown in the practical use case examples, making it straightforward to adapt layouts for different screens.

Question 2

React Native Responsive vs using the Dimensions API directly?

Accepted Answer

While Dimensions API gives raw device data, React Native Responsive wraps it with media query logic for conditional styling and rendering, offering a more declarative approach similar to CSS. However, it adds library dependency and setup overhead compared to manual handling.

Question 3

How to debug screen sizes in a React Native app?

Accepted Answer

The library includes a MediaQueryDebug component that displays real-time width, height, and pixel ratio on the screen. This helps verify device specs during development, as illustrated in the README's output example with styled text.

Question 4

Can I use orientation media queries with react-native-responsive?

Accepted Answer

Not currently; the README's TODOs list orientation as a planned feature. For now, you'd need to handle orientation changes separately using React Native's event listeners or other libraries.

Question 5

How to set up MediaQueryDecorator in my project?

Accepted Answer

First, configure Babel with the transform-decorators-legacy plugin in your .babelrc file. Then, import MediaQueryDecorator and apply it to class components with media feature objects, as detailed in the decorator section with prerequisites.

Question 6

Is react-native-responsive good for tablet and phone layouts?

Accepted Answer

Yes, it's designed for responsive design across devices. Use min/max device width and height rules to adapt layouts, similar to the demonstration application showing different layouts for Nexus 5 and Nexus 10 devices.

Question 7

What are alternatives to react-native-responsive for responsive React Native apps?

Accepted Answer

Alternatives include react-native-extended-stylesheet for media queries, or using flexbox with Dimensions API manually. React Native Responsive stands out for its multiple API approaches and CSS-like syntax, but may have more setup steps.

react-native-responsive

What is react-native-responsive?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions