From ecbd6bd64f8469d63cdfef491e08f334a7aceb69 Mon Sep 17 00:00:00 2001 From: Chris Reyes Date: Sat, 13 Oct 2018 16:30:20 -0700 Subject: [PATCH] fix typo, and add dimension example (#18926) add example of how dimensions can be used --- .../react-native/screen-dimensions/index.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/client/src/pages/guide/english/react-native/screen-dimensions/index.md b/client/src/pages/guide/english/react-native/screen-dimensions/index.md index e2a0d47f0c..bb7a8c277f 100644 --- a/client/src/pages/guide/english/react-native/screen-dimensions/index.md +++ b/client/src/pages/guide/english/react-native/screen-dimensions/index.md @@ -22,5 +22,21 @@ Dimensions.get('screen').height; Dimensions.get('screen').width; ``` -**Note: There have been some known issues in the past with the Dimensions API such as not returning the correct information when a user rotates their device. It's best to make sure you test this on actual devices before deploying an application.** +What makes React-Native so attractive to developers is being able to write code, and have it run on multiple devices (iPhone, iPad, Pixel, etc ...). The use of the Dimensions API enables developers to write modular code to be used across multiple devices. +for example if you wanted a screen to looka certain way on an iPad vs a phone simple math can be done to apply the proper styling. + + +```js +const { width, height } = Dimensions.get('window'); +const TABLET_RATIO = 1.6; +const ASPECT_RATIO = height/width; + + // later on in the view this can be applied with a ternary + TABLET_RATIO) ? styles.phone : styles.ipad } + > + +``` + +**Note: There have been some known issues in the past with the Dimensions API such as not returning the correct information when a user rotates their device. It's best to make sure you test this on actual devices before deploying an application.**