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

fix: spelling and grammar on some react native articles (#23575)

Browse Source 
Signed-off-by: Jonathan Grah <theflametrooper@gmail.com>
This commit is contained in:
Jonathan Grah
2019-01-08 00:05:30 +00:00
committed by Huyen Nguyen
parent f0798189c9
commit 181fea9e8e
3 changed files with 40 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
guide/english/react-native/screen-dimensions/index.md
View File

@@ -1,20 +1,21 @@
---
title: Screen Dimensions
---
## React Native - Screen Dimensions
React Native uses Dots Per Inch (DPI) to measure the sizing of the User Interface (UI) and anything displayed on the UI. This type of measurement allows an application to look uniform across various screen sizes and pixel densities.
React Native uses Dots Per Inch (DPI) to measure the sizing and anything displayed on the User Interface (UI). This type of measurement allows an application to look uniform across various screen sizes and pixel densities.
For standard use cases, applications can be developed without having to know the specifics of the user's device (e.g. pixel density) since the UI elements will scale automatically. When it is required, there are APIs available such as `PixelRatio` for finding out the pixel density of the user's device.
React Native provides an API called `Dimensions` that can be used to get the width and height of the window or screen of a user's device.
React Native provides an API called `Dimensions` that can be used to get the width and height of the window or screen of a user's device.
```js
import { Dimensions } from 'react-native';
```
These are are the methods that this API currently offers:
```
set
get
@@ -22,25 +23,21 @@ addEventListener
removeEventListener
```
For the purposes of this guide, we'll focus on the `get` method, but feel free to check out the React Native official documentation for details on the other methods.
https://facebook.github.io/react-native/docs/dimensions#docsNav
For the purposes of this guide, we'll focus on the `get` method, but feel free to check out the [React Native documentation](https://facebook.github.io/react-native/docs/dimensions#docsNav) for details on the other methods.
The width and height of the window object can be easily retrieved, like so:
```js
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
// if you're feeling fancy, you could also use object destructuring to get those values out of the object that `Dimensions.get("window")` returns
const { width, height } = Dimensions.get("window")
const { width, height } = Dimensions.get('window');
```
Pretty simple, huh? Let's take a look at an example.
Pretty simple, huh? Let's take a look at an example:
Let's say you want to cover the whole screen with a background image. We'll use the `ImageBackground` component that React Native provides. You can read more about it in the link below.
https://facebook.github.io/react-native/docs/images#background-image-via-nesting.
Let's say you want to cover the whole screen with a background image. We'll use the `ImageBackground` component that React Native provides. You can read more about here: https://facebook.github.io/react-native/docs/images#background-image-via-nesting.
We need to set the width and height for this component to work. One way to do that is by using the width and height we got with the `Dimensions` API.
@@ -52,8 +49,7 @@ const { width, height } = Dimensions.get("window")
export default HomePage = () => {
return(
<ImageBackground source={...} style={{ width, height }}>
</ImageBackground>
<ImageBackground source={...} style={{ width, height }} />
)
}
```
@@ -65,13 +61,10 @@ For example, if you wanted a screen to look a certain way on an iPad vs a phone
```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>
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} />;
```
**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.**
**Note: There have been some known issues in the past with the Dimensions API, such as it 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.**