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, { Component } from 'react';
+import React from 'react';
import { View } from 'react-native';
-export default function FixedDimensionsBasics() {
+export default 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, { Component } from 'react';
+import React from 'react';
import { View } from 'react-native';
-export default function FlexDimensionsBasics() {
+export default 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, { Component } from 'react';
+import React from 'react';
import { View } from 'react-native';
-export default function FixedDimensionsBasics() {
+export default 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, { Component } from 'react';
+import React from 'react';
import { View } from 'react-native';
-export default function FlexDimensionsBasics() {
+export default 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 @@
.// Running a method after the animation
useMount(() => {
- InteractionManager.runAfterInteractions(() => onShown());
+ const interactionPromise = InteractionManager.runAfterInteractions(() => onShown());
+ return () => interactionPromise.cancel();
});
return <Animated.View style={[styles.ball, { opacity }]} />;
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
.// Running a method after the animation
useMount(() => {
- InteractionManager.runAfterInteractions(() => onShown());
+ const interactionPromise = InteractionManager.runAfterInteractions(() => onShown());
+ return () => interactionPromise.cancel();
});
return <Animated.View style={[styles.ball, { opacity }]} />;
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
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 asynch storage when... Don't use asynch storage for... Do use async storage when... Don't use async 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 asynch storage when... Don't use asynch storage for... Do use async storage when... Don't use async storage for... Persisting non-sensitive data across app runs Token storage