![]() We avoid using ANY hardcoded constants in the layout. ![]() We calculate relative width and height for the current screen size.Įxport const deviceWidth = Dimensions.get('window').widthĮxport const deviceHeight = Dimensions.get('window').heightĮxport const calcHeight = x => PixelRatio.roundToNearestPixel((deviceHeight * x) / 100)Įxport const calcWidth = x => PixelRatio.roundToNearestPixel((deviceWidth * x) / 100) So we need to convert pixels to density-independent pixels. Step 1: Move from physical to density-independent pixelsĪll dimensions in React Native are unitless, and represent density-independent pixels ( wiki).Īny mockup is designed with physical pixels. How to create a responsive react-native app from a mockup? If we just hardcoded in the original design for iPhone X, it would cause us big troubles just before the project launch. This year we will see the new iPhone with different screen sizes and dimensions. Suddenly the client decided to support iPhone 8 Plus, 6, 6 Plus, XS, XR. For example in our last project, we targeted iOS only and had wireframes for iPhone X and iPhone 8 only. When you develop an app, in most cases you have only one wireframe version in Invision/Sketch per platform. Styling of the mobile app may be tricky – there are a lot of screens sizes and screen ratios, especially for Android devices.
0 Comments
Leave a Reply. |