Height and Width
A component's height and width determine its size on the screen.
Fixed Dimensions
The general way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.
import React from 'react';
+import React, { Component } from 'react';
import { View } from 'react-native';
-export default FixedDimensionsBasics = () => {
+export default function FixedDimensionsBasics() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
@@ -86,7 +86,7 @@
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
-import React from 'react';
+import React, { Component } from 'react';
import { View } from 'react-native';
-export default FlexDimensionsBasics = () => {
+export default function FlexDimensionsBasics() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
@@ -122,7 +122,7 @@
EditHeight and Width
A component's height and width determine its size on the screen.
Fixed Dimensions
The general way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.
-import React from 'react';
+import React, { Component } from 'react';
import { View } from 'react-native';
-export default FixedDimensionsBasics = () => {
+export default function FixedDimensionsBasics() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
@@ -86,7 +86,7 @@
A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.
-import React from 'react';
+import React, { Component } from 'react';
import { View } from 'react-native';
-export default FlexDimensionsBasics = () => {
+export default function FlexDimensionsBasics() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
@@ -122,7 +122,7 @@
EditProps
Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties.
For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.
-import React from 'react';
+import React, { Component } from 'react';
import { Image } from 'react-native';
export default function Bananas() {
@@ -28,7 +28,7 @@
Notice the braces surrounding {pic} - these embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX.
Your own components can also use props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to props in your render function. Here's an example:
-import React from 'react';
+import React, { Component } from 'react';
import { Text, View } from 'react-native';
const Greeting = (props) => {
@@ -53,7 +53,7 @@
);
}
-export default LotsOfGreetings = () => {
+export default function LotsOfGreetings() {
return (
<View style={{alignItems: 'center', top: 50}}>
<Greeting name='Rexxar' />
@@ -65,7 +65,7 @@
EditProps
Most components can be customized when they are created, with different parameters. These created parameters are called props, short for properties.
For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.
-import React from 'react';
+import React, { Component } from 'react';
import { Image } from 'react-native';
export default function Bananas() {
@@ -28,7 +28,7 @@
Notice the braces surrounding {pic} - these embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX.
Your own components can also use props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place by referring to props in your render function. Here's an example:
-import React from 'react';
+import React, { Component } from 'react';
import { Text, View } from 'react-native';
const Greeting = (props) => {
@@ -53,7 +53,7 @@
);
}
-export default LotsOfGreetings = () => {
+export default function LotsOfGreetings() {
return (
<View style={{alignItems: 'center', top: 50}}>
<Greeting name='Rexxar' />
@@ -65,7 +65,7 @@
Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.
-Do use async storage when... Don't use async storage for... Do use asynch storage when... Don't use asynch storage for... Persisting non-sensitive data across app runs Token storage Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.
-Do use async storage when... Don't use async storage for... Do use asynch storage when... Don't use asynch storage for... Persisting non-sensitive data across app runs Token storage
