CODEWITHSUNDEEP
react-native
Milan Gajera
Milan Gajera

Reputation: 970

How can make responsive design for phone and tablet in react native?

Explanation: I am learning a React Native framework. I installed the application in my phone. It's working fine. I want to know how react native will manage the design when device density changed.

Similarly, In Native Android we provides the different resource for the phone devices and tablet devices. We also manage the layout file for the tablet and phone for portrait and landscape. When our application run on the device whether it a phone or tablet it will automatically get their best suited resources according to the tablet or phone.

I have little bit stuck when i starting the development in react native.

How react native handle the text size?

How it can manage the design screen when it's running on the phone or tablet?

How it can manage the images resources in different density devices?

Is there any strategy where we can manage everything like Native Android?

Please, help me solve out.

Upvotes: 1

Views: 3794

Answers (2)

flaky
flaky

Reputation: 7404

You can check the docs on PixelRatio, there are several methods to deal with different dpis and fontScalings.

Additionally you might want to look into https://github.com/marudy/react-native-responsive-screen which

is a small library that provides 2 simple methods so that React Native developers can code their UI elements fully responsive. No media queries needed.

Upvotes: 0

gamingumar
gamingumar

Reputation: 1031

You can use flexbox for this.

for example.

flex: 1 is full width flex: 0.5 is half

so you can do something like this.

All dimensions in React Native are unitless, and represent density-independent pixels

For images you can do imagename@2x imagename@3x details are here https://facebook.github.io/react-native/docs/images.html

<View style={{ flex: 1 }}>
  <View style={{ flex: 0.5 }} />
  <View style={{ flex: 0.5 }} />
</View>

This will create a row with 2 columns in it. and this will be responsive.

Upvotes: 1

Related Questions