Platform.OS = 'ios' & !Platform.isPad & !Platform.isTVOS & The main use of linear responsive helpers is a layout, like columns width, sidebars, or items grid. Linear responsiveness is not a universal instrument ’cause if you start using it for fonts or borders/paddings, you will see how ugly can be the design of your app. Our responsive helpers use a linear function to the width or height of the device. In this situation, responsive styles will be not enough. But there are devices with much wider screens (iPhone X vs iPhone iPad) that have a much different aspect ratio. In our experience, we got a situation when responsive styles work great for all devices. Step 2: Use different styles/const in React-Native for different device models But if we do this and somebody will run the app on a device with another screen density/ratio this single line will make a lot of trouble for us. It’s very tempting to use +10 px to align space between to controls. 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 kommentar(er)
