gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix typo, and add dimension example (#18926)

Browse Source 
add example of how dimensions can be used
This commit is contained in:
Chris Reyes
2018-10-13 16:30:20 -07:00
committed by Aditya
parent 9e0b0f05e3
commit ecbd6bd64f
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/pages/guide/english/react-native/screen-dimensions/index.md
View File

@ -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
<FancyView
style={(ASPECT_RATIO > TABLET_RATIO) ? styles.phone : styles.ipad }
></FancyView>
```
**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.**