-```jsx
+```tsx
// ReactJS Counter Example using Hooks!
-import React, { useState } from 'react';
+import React, {useState} from 'react';
@@ -141,11 +187,11 @@ const App = () => {
```
-```jsx
+```tsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +212,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
@@ -178,41 +224,31 @@ As shown above, there is no difference in handling the `state` between [React](h
In the following example we will show the same above counter example using classes.
```SnackPlayer name=Hello%20Classes
-import React, { Component } from 'react'
-import {
- StyleSheet,
- TouchableOpacity,
- Text,
- View,
-} from 'react-native'
+import React, {Component} from 'react';
+import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
class App extends Component {
state = {
- count: 0
- }
+ count: 0,
+ };
onPress = () => {
this.setState({
- count: this.state.count + 1
- })
- }
+ count: this.state.count + 1,
+ });
+ };
- render() {
+ render() {
return (
-
- Click me
+
+ Click me
-
- You clicked { this.state.count } times
-
+ You clicked {this.state.count} times
- )
+ );
}
}
@@ -226,9 +262,9 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
- marginBottom: 10
- }
-})
+ marginBottom: 10,
+ },
+});
export default App;
```
diff --git a/docs/typescript.md b/docs/typescript.md
index b882d9a69ed..4781ff227df 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -5,92 +5,43 @@ title: Using TypeScript
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
-[TypeScript][ts] is a language which extends JavaScript by adding type definitions, much like [Flow][flow]. While React Native is built in Flow, it supports both TypeScript _and_ Flow by default.
+[TypeScript][ts] is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow.
## Getting Started with TypeScript
-If you're starting a new project, there are a few different ways to get started.
+New projects created by the [React Native CLI](/docs/environment-setup#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default.
-You can use the [TypeScript template][ts-template]:
-
-```shell
-npx react-native init MyApp --template react-native-template-typescript
-```
-
-:::note
-
-If the above command is failing, you may have an old version of `react-native` or `react-native-cli` installed globally on your system. To fix the issue try uninstalling the CLI:
-
-- `npm uninstall -g react-native-cli` or `yarn global remove react-native-cli`
-
-and then run the `npx` command again.
-Optionally, you can also use the command given below to get started with your template.
-
-- `npx react-native --ignore-existing init MyApp --template react-native-template-typescript`
-
-:::
-
-You can use [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project:
-
-
-
+TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project.
```shell
npx create-expo-app --template
```
-
-
-
-```shell
-yarn create expo-app --template
-```
-
-
-
-
-Or you could use [Ignite][ignite], which also has a TypeScript template:
-
-
-
-
-```shell
-npm install -g ignite-cli
-ignite new MyTSProject
-```
-
-
-
-
-```shell
-yarn global add ignite-cli
-ignite new MyTSProject
-```
-
-
-
-
## Adding TypeScript to an Existing Project
-1. Add TypeScript and the types for React Native and Jest to your project.
+1. Add TypeScript, types, and ESLint plugins to your project.
```shell
-npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @tsconfig/react-native
+npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
```
```shell
-yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @tsconfig/react-native
+yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
```
+:::note
+This command adds the latest version of every dependency. The versions may need to be changed to match the existing packages used by your project. You can use a tool like [React Native Upgrade Helper](https://react-native-community.github.io) to see the versions shipped by React Native.
+:::
+
2. Add a TypeScript config file. Create a `tsconfig.json` in the root of your project:
```json
@@ -99,24 +50,19 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
}
```
-3. Create a `jest.config.js` file to configure Jest to use TypeScript
+3. Rename a JavaScript file to be `*.tsx`
-```js
-module.exports = {
- preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
-};
-```
+> You should leave the `./index.js` entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
-4. Rename a JavaScript file to be `*.tsx`
+4. Run `yarn tsc` to type-check your new TypeScript files.
-> You should leave the `./index.js` entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
+## Using JavaScript Instead of TypeScript
-5. Run `yarn tsc` to type-check your new TypeScript files.
+React Native defaults new applications to TypeScript, but JavaScript may still be used. Files with a `.jsx` extension are treated as JavaScript instead of TypeScript, and will not be typechecked. JavaScript modules may still be imported by TypeScript modules, along with the reverse.
## How TypeScript and React Native works
-Out of the box, transforming your files to JavaScript works via the same [Babel infrastructure][babel] as a non-TypeScript React Native project. We recommend that you use the TypeScript compiler only for type checking. If you have existing TypeScript code being ported to React Native, there are [one or two caveats][babel-7-caveats] to using Babel instead of TypeScript.
+Out of the box, TypeScript sources are transformed by [Babel][babel] during bundling. We recommend that you use the TypeScript compiler only for type checking. This is the default behavior of `tsc` for newly created applications. If you have existing TypeScript code being ported to React Native, there are [one or two caveats][babel-7-caveats] to using Babel instead of TypeScript.
## What does React Native + TypeScript look like
@@ -124,7 +70,7 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
@@ -133,17 +79,17 @@ export type Props = {
const Hello: React.FC
= ({
name,
- baseEnthusiasmLevel = 0
+ baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- baseEnthusiasmLevel
+ baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
- enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
+ enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
@@ -177,13 +123,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
- margin: 16
- }
+ margin: 16,
+ },
});
export default Hello;
diff --git a/docs/usecolorscheme.md b/docs/usecolorscheme.md
index 54c0d983014..132627c5988 100644
--- a/docs/usecolorscheme.md
+++ b/docs/usecolorscheme.md
@@ -3,8 +3,8 @@ id: usecolorscheme
title: useColorScheme
---
-```jsx
-import { useColorScheme } from 'react-native';
+```tsx
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
@@ -23,7 +23,7 @@ The `useColorScheme` React hook provides and subscribes to color scheme updates
```SnackPlayer
import React from 'react';
-import { Text, StyleSheet, useColorScheme, View } from 'react-native';
+import {Text, StyleSheet, useColorScheme, View} from 'react-native';
const App = () => {
const colorScheme = useColorScheme();
@@ -37,8 +37,8 @@ const App = () => {
const styles = StyleSheet.create({
container: {
flex: 1,
- alignItems: "center",
- justifyContent: "center"
+ alignItems: 'center',
+ justifyContent: 'center',
},
});
diff --git a/docs/usewindowdimensions.md b/docs/usewindowdimensions.md
index 49517624e90..bb3e28db416 100644
--- a/docs/usewindowdimensions.md
+++ b/docs/usewindowdimensions.md
@@ -3,49 +3,57 @@ id: usewindowdimensions
title: useWindowDimensions
---
-```jsx
-import { useWindowDimensions } from 'react-native';
+```tsx
+import {useWindowDimensions} from 'react-native';
```
-`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
+`useWindowDimensions` automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:
-```jsx
-const { height, width } = useWindowDimensions();
+```tsx
+const {height, width} = useWindowDimensions();
```
## Example
```SnackPlayer name=useWindowDimensions&supportedPlatforms=ios,android
-import React from "react";
-import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
+import React from 'react';
+import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
const App = () => {
- const window = useWindowDimensions();
+ const {height, width, scale, fontScale} = useWindowDimensions();
return (
- {`Window Dimensions: height - ${window.height}, width - ${window.width}`}
+ Window Dimension Data
+ Height: {height}
+ Width: {width}
+ Font scale: {fontScale}
+ Pixel ratio: {scale}
);
-}
+};
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
- alignItems: "center"
- }
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ header: {
+ fontSize: 20,
+ marginBottom: 12,
+ },
});
export default App;
```
-- The [useDimensions](https://github.com/react-native-community/react-native-hooks#usedimensions) hook from the community [React Native hooks](https://github.com/react-native-community/react-native-hooks) library aims to make handling screen/window size changes easier to work with.
-- [React Native Responsive Dimensions](https://github.com/DaniAkash/react-native-responsive-dimensions) also comes with responsive hooks.
+- The [`useDimensions`](https://github.com/react-native-community/hooks#usedimensions) hook from the community [React Native Hooks](https://github.com/react-native-community/hooks) library aims to make handling screen/window size changes easier to work with.
+- [React Native Responsive Dimensions](https://github.com/react-native-toolkit/react-native-responsive-dimensions) also comes with responsive hooks.
## Properties
### `fontScale`
-```jsx
+```tsx
useWindowDimensions().fontScale;
```
@@ -55,7 +63,7 @@ The scale of the font currently used. Some operating systems allow users to scal
### `height`
-```jsx
+```tsx
useWindowDimensions().height;
```
@@ -65,19 +73,20 @@ The height in pixels of the window or screen your app occupies.
### `scale`
-```jsx
+```tsx
useWindowDimensions().scale;
```
-The pixel ratio of the device your app is running on.
+The pixel ratio of the device your app is running on. The values can be:
-> A value of `1` indicates PPI/DPI of 96 (76 on some platforms). `2` indicates a Retina or high DPI display.
+- `1` which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).
+- `2` or `3` which indicates a Retina or high DPI display.
---
### `width`
-```jsx
+```tsx
useWindowDimensions().width;
```
diff --git a/docs/using-a-listview.md b/docs/using-a-listview.md
index 87d9343b1b5..878344e305d 100644
--- a/docs/using-a-listview.md
+++ b/docs/using-a-listview.md
@@ -13,12 +13,12 @@ This example creates a basic `FlatList` of hardcoded data. Each item in the `dat
```SnackPlayer name=FlatList%20Basics
import React from 'react';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
+import {FlatList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
- flex: 1,
- paddingTop: 22
+ flex: 1,
+ paddingTop: 22,
},
item: {
padding: 10,
@@ -47,7 +47,7 @@ const FlatListBasics = () => {
/>
);
-}
+};
export default FlatListBasics;
```
@@ -56,12 +56,12 @@ If you want to render a set of data broken into logical sections, maybe with sec
```SnackPlayer name=SectionList%20Basics
import React from 'react';
-import { SectionList, StyleSheet, Text, View } from 'react-native';
+import {SectionList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
- flex: 1,
- paddingTop: 22
+ flex: 1,
+ paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
@@ -77,23 +77,36 @@ const styles = StyleSheet.create({
fontSize: 18,
height: 44,
},
-})
+});
const SectionListBasics = () => {
- return (
-
- {item} }
- renderSectionHeader={({section}) => {section.title} }
- keyExtractor={(item, index) => `basicListEntry-${item.title}`}
- />
-
- );
-}
+ return (
+
+ {item} }
+ renderSectionHeader={({section}) => (
+ {section.title}
+ )}
+ keyExtractor={item => `basicListEntry-${item}`}
+ />
+
+ );
+};
export default SectionListBasics;
```
diff --git a/docs/using-a-scrollview.md b/docs/using-a-scrollview.md
index cfacba2a59f..e4de6207a71 100644
--- a/docs/using-a-scrollview.md
+++ b/docs/using-a-scrollview.md
@@ -9,47 +9,47 @@ This example creates a vertical `ScrollView` with both images and text mixed tog
```SnackPlayer name=Using%20ScrollView
import React from 'react';
-import { Image, ScrollView, Text } from 'react-native';
+import {Image, ScrollView, Text} from 'react-native';
const logo = {
uri: 'https://reactnative.dev/img/tiny_logo.png',
width: 64,
- height: 64
+ height: 64,
};
const App = () => (
- Scroll me plz
+ Scroll me plz
If you like
+ If you like
Scrolling down
+ Scrolling down
What's the best
+ What's the best
Framework around?
+ Framework around?
React Native
+ React Native
);
diff --git a/docs/vibration.md b/docs/vibration.md
index c66b716ee21..50e94fff4f5 100644
--- a/docs/vibration.md
+++ b/docs/vibration.md
@@ -13,27 +13,34 @@ Vibrates the device.
```SnackPlayer name=Vibration&supportedPlatforms=ios,android
-import React from "react";
-import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
+import React from 'react';
+import {
+ Button,
+ Platform,
+ Text,
+ Vibration,
+ View,
+ SafeAreaView,
+ StyleSheet,
+} from 'react-native';
const Separator = () => {
- return
@@ -42,7 +49,7 @@ const App = () => {
Vibration.vibrate()} />
{
onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
/>
,
- Pattern: {PATTERN_DESC}
@@ -71,29 +78,29 @@ const App = () => {
/>
);
-}
+};
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
+ justifyContent: 'center',
paddingTop: 44,
- padding: 8
+ padding: 8,
},
header: {
fontSize: 18,
- fontWeight: "bold",
- textAlign: "center"
+ fontWeight: 'bold',
+ textAlign: 'center',
},
paragraph: {
margin: 24,
- textAlign: "center"
+ textAlign: 'center',
},
separator: {
marginVertical: 8,
- borderBottomColor: "#737373",
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ borderBottomColor: '#737373',
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ },
});
export default App;
@@ -103,12 +110,20 @@ export default App;
```SnackPlayer name=Vibration&supportedPlatforms=ios,android
-import React, { Component } from "react";
-import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
+import React, {Component} from 'react';
+import {
+ Button,
+ Platform,
+ Text,
+ Vibration,
+ View,
+ SafeAreaView,
+ StyleSheet,
+} from 'react-native';
const Separator = () => {
- return
@@ -132,7 +147,7 @@ class App extends Component {
Vibration.vibrate()} />
Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
/>
,
- Pattern: {PATTERN_DESC}
@@ -167,24 +182,24 @@ class App extends Component {
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
+ justifyContent: 'center',
paddingTop: 44,
- padding: 8
+ padding: 8,
},
header: {
fontSize: 18,
- fontWeight: "bold",
- textAlign: "center"
+ fontWeight: 'bold',
+ textAlign: 'center',
},
paragraph: {
margin: 24,
- textAlign: "center"
+ textAlign: 'center',
},
separator: {
marginVertical: 8,
- borderBottomColor: "#737373",
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ borderBottomColor: '#737373',
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ },
});
export default App;
@@ -205,8 +220,8 @@ export default App;
### `cancel()`
-```jsx
-Vibration.cancel();
+```tsx
+static cancel();
```
Call this to stop vibrating after having invoked `vibrate()` with repetition enabled.
@@ -215,8 +230,11 @@ Call this to stop vibrating after having invoked `vibrate()` with repetition ena
### `vibrate()`
-```jsx
-Vibration.vibrate(pattern, repeat);
+```tsx
+static vibrate(
+ pattern?: number | number[],
+ repeat?: boolean
+);
```
Triggers a vibration with a fixed duration.
diff --git a/docs/view-style-props.md b/docs/view-style-props.md
index 05576a7a749..820c3aacaa4 100644
--- a/docs/view-style-props.md
+++ b/docs/view-style-props.md
@@ -6,42 +6,42 @@ title: View Style Props
### Example
```SnackPlayer name=ViewStyleProps
-import React from "react";
-import { View, StyleSheet } from "react-native";
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
const ViewStyleProps = () => {
- return (
-
-
- );
-}
+ return (
+
+
+ );
+};
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "space-between",
- backgroundColor: "#fff",
+ justifyContent: 'space-between',
+ backgroundColor: '#fff',
padding: 20,
margin: 10,
},
top: {
flex: 0.3,
- backgroundColor: "grey",
+ backgroundColor: 'grey',
borderWidth: 5,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
middle: {
flex: 0.3,
- backgroundColor: "beige",
+ backgroundColor: 'beige',
borderWidth: 5,
},
bottom: {
flex: 0.3,
- backgroundColor: "pink",
+ backgroundColor: 'pink',
borderWidth: 5,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
@@ -274,3 +274,16 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
| Type |
| ------ |
| number |
+
+### `pointerEvents`
+
+Controls whether the `View` can be the target of touch events.
+
+- `'auto'`: The View can be the target of touch events.
+- `'none'`: The View is never the target of touch events.
+- `'box-none'`: The View is never the target of touch events but its subviews can be.
+- `'box-only'`: The view can be the target of touch events but its subviews cannot be.
+
+| Type |
+| --------------------------------------------- |
+| enum('auto', 'box-none', 'box-only', 'none' ) |
diff --git a/docs/view.md b/docs/view.md
index 977351cd910..fbf99b51365 100644
--- a/docs/view.md
+++ b/docs/view.md
@@ -15,20 +15,19 @@ This example creates a `View` that wraps two boxes with color and a text compone
```SnackPlayer name=View%20Function%20Component%20Example
-import React from "react";
-import { View, Text } from "react-native";
+import React from 'react';
+import {View, Text} from 'react-native';
const ViewBoxesWithColorAndText = () => {
return (
- Hello World!
);
@@ -41,21 +40,20 @@ export default ViewBoxesWithColorAndText;
```SnackPlayer name=View%20Class%20Component%20Example
-import React, { Component } from "react";
-import { View, Text } from "react-native";
+import React, {Component} from 'react';
+import {View, Text} from 'react-native';
class App extends Component {
render() {
return (
- Hello World!
);
@@ -249,6 +247,117 @@ When `true`, indicates that the view is an accessibility element. By default, al
---
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the accessibility elements contained within this accessibility element are hidden.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `aria-labelledby` Android
+
+Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:
+
+```tsx
+
+ Label for Input Field
+
+```
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `aria-live` Android
+
+Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal` iOS
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the [`accessibilityViewIsModal`](#accessibilityviewismodal-ios) prop.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type |
+| ------- |
+| boolean |
+
### `aria-valuemax`
Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
@@ -287,14 +396,6 @@ Represents the textual description of the component. Has precedence over the `te
| ------ |
| string |
-### `aria-modal` iOS
-
-Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the `accessibilityViewIsModal` prop.
-
-| Type | Default |
-| ---- | ------- |
-| bool | false |
-
---
### `collapsable` Android
@@ -474,9 +575,9 @@ Invoked on mount and on layout changes.
This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.
-| Type |
-| ----------------------------------------------------- |
-| ({ nativeEvent: [LayoutEvent](layoutevent) }) => void |
+| Type |
+| --------------------------------------------------- |
+| ({nativeEvent: [LayoutEvent](layoutevent)}) => void |
---
@@ -494,9 +595,9 @@ When `accessible` is `true`, the system will invoke this function when the user
Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-| Type |
-| ------------------------------------------------------ |
-| ({ nativeEvent: [PressEvent](pressevent) }) => boolean |
+| Type |
+| ---------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => boolean |
---
@@ -504,9 +605,9 @@ Does this view want to "claim" touch responsiveness? This is called for every to
If a parent `View` wants to prevent a child `View` from becoming responder on a move, it should have this handler which returns `true`.
-| Type |
-| ------------------------------------------------------ |
-| ({ nativeEvent: [PressEvent](pressevent) }) => boolean |
+| Type |
+| ---------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => boolean |
---
@@ -514,9 +615,9 @@ If a parent `View` wants to prevent a child `View` from becoming responder on a
The View is now responding for touch events. This is the time to highlight and show the user what is happening.
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -524,9 +625,9 @@ The View is now responding for touch events. This is the time to highlight and s
The user is moving their finger.
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -534,9 +635,9 @@ The user is moving their finger.
Another responder is already active and will not release it to that `View` asking to be the responder.
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -544,9 +645,9 @@ Another responder is already active and will not release it to that `View` askin
Fired at the end of the touch.
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -554,9 +655,9 @@ Fired at the end of the touch.
The responder has been taken from the `View`. Might be taken by other views after a call to `onResponderTerminationRequest`, or might be taken by the OS without asking (e.g., happens with control center/ notification center on iOS)
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -564,9 +665,9 @@ The responder has been taken from the `View`. Might be taken by other views afte
Some other `View` wants to become responder and is asking this `View` to release its responder. Returning `true` allows its release.
-| Type |
-| --------------------------------------------------- |
-| ({ nativeEvent: [PressEvent](pressevent) }) => void |
+| Type |
+| ------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => void |
---
@@ -574,9 +675,9 @@ Some other `View` wants to become responder and is asking this `View` to release
Does this view want to become responder on the start of a touch?
-| Type |
-| ------------------------------------------------------ |
-| ({ nativeEvent: [PressEvent](pressevent) }) => boolean |
+| Type |
+| ---------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => boolean |
---
@@ -584,9 +685,9 @@ Does this view want to become responder on the start of a touch?
If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, it should have this handler which returns `true`.
-| Type |
-| ------------------------------------------------------ |
-| ({ nativeEvent: [PressEvent](pressevent) }) => boolean |
+| Type |
+| ---------------------------------------------------- |
+| ({nativeEvent: [PressEvent](pressevent)}) => boolean |
---
@@ -618,8 +719,6 @@ Controls whether the `View` can be the target of touch events.
}
```
-> Since `pointerEvents` does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include `pointerEvents` on `style`. On some platforms, we would need to implement it as a `className` anyways. Using `style` or not is an implementation detail of the platform.
-
| Type |
| -------------------------------------------- |
| enum('box-none', 'none', 'box-only', 'auto') |
@@ -648,6 +747,16 @@ On Android, this is useful for animations and interactions that only modify opac
---
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](view#accessibilityrole) prop.
+
+| Type |
+| -------------------------- |
+| [Role](accessibility#role) |
+
+---
+
### `shouldRasterizeIOS` iOS
Whether this `View` should be rendered as a bitmap before compositing.
diff --git a/docs/viewtoken.md b/docs/viewtoken.md
index 5f19a4d1066..b07eb82390f 100644
--- a/docs/viewtoken.md
+++ b/docs/viewtoken.md
@@ -9,7 +9,7 @@ title: ViewToken Object Type
```js
{
- item: { key: "key-12" },
+ item: {key: "key-12"},
key: "key-12",
index: 11,
isViewable: true
diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md
index e99c1cb6827..cc070cae3e1 100644
--- a/docs/virtualizedlist.md
+++ b/docs/virtualizedlist.md
@@ -3,26 +3,107 @@ id: virtualizedlist
title: VirtualizedList
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
Base implementation for the more convenient [``](flatlist.md) and [``](sectionlist.md) components, which are also better documented. In general, this should only really be used if you need more flexibility than [`FlatList`](flatlist.md) provides, e.g. for use with immutable data instead of plain arrays.
Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.
## Example
-```SnackPlayer name=VirtualizedListExample
+
+
+
+```SnackPlayer name=VirtualizedListExample&ext=js
import React from 'react';
-import { SafeAreaView, View, VirtualizedList, StyleSheet, Text, StatusBar } from 'react-native';
+import {
+ SafeAreaView,
+ View,
+ VirtualizedList,
+ StyleSheet,
+ Text,
+ StatusBar,
+} from 'react-native';
+
+const getItem = (_data, index) => ({
+ id: Math.random().toString(12).substring(0),
+ title: `Item ${index + 1}`,
+});
+
+const getItemCount = _data => 50;
+
+const Item = ({title}) => (
+
+ {title}
+
+);
+
+const App = () => {
+ return (
+
+
+ );
+};
-const DATA = [];
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: StatusBar.currentHeight,
+ },
+ item: {
+ backgroundColor: '#f9c2ff',
+ height: 150,
+ justifyContent: 'center',
+ marginVertical: 8,
+ marginHorizontal: 16,
+ padding: 20,
+ },
+ title: {
+ fontSize: 32,
+ },
+});
-const getItem = (data, index) => ({
+export default App;
+```
+
+
+
+
+```SnackPlayer name=VirtualizedListExample&ext=tsx
+import React from 'react';
+import {
+ SafeAreaView,
+ View,
+ VirtualizedList,
+ StyleSheet,
+ Text,
+ StatusBar,
+} from 'react-native';
+
+type ItemData = {
+ id: string;
+ title: string;
+};
+
+const getItem = (_data: unknown, index: number): ItemData => ({
id: Math.random().toString(12).substring(0),
- title: `Item ${index+1}`
+ title: `Item ${index + 1}`,
});
-const getItemCount = (data) => 50;
+const getItemCount = (_data: unknown) => 50;
-const Item = ({ title }) => (
+type ItemProps = {
+ title: string;
+};
+
+const Item = ({title}: ItemProps) => (
{title}
@@ -32,16 +113,15 @@ const App = () => {
return (
);
-}
+};
const styles = StyleSheet.create({
container: {
@@ -64,6 +144,9 @@ const styles = StyleSheet.create({
export default App;
```
+
+
+
---
Some caveats:
@@ -85,9 +168,9 @@ Inherits [ScrollView Props](scrollview.md#props).
---
-### Required
**`data`**
+### `data`
-The default accessor functions assume this is an array of objects with shape `{key: string}` but you can override `getItem`, `getItemCount`, and `keyExtractor` to handle any type of index-based data.
+Opaque data type passed to `getItem` and `getItemCount` to retrieve items.
| Type |
| ---- |
@@ -97,8 +180,8 @@ The default accessor functions assume this is an array of objects with shape `{k
### Required
**`getItem`**
-```jsx
-(data: any, index: number) => object;
+```tsx
+(data: any, index: number) => any;
```
A generic accessor for extracting an item from any sort of data blob.
@@ -111,7 +194,7 @@ A generic accessor for extracting an item from any sort of data blob.
### Required
**`getItemCount`**
-```jsx
+```tsx
(data: any) => number;
```
@@ -125,7 +208,7 @@ Determines how many items are in the data blob.
### Required
**`renderItem`**
-```jsx
+```tsx
(info: any) => ?React.Element
```
@@ -249,11 +332,11 @@ A marker property for telling the list to re-render (since it implements `PureCo
### `getItemLayout`
-```jsx
+```tsx
(
- data: any,
- index: number,
- ) => {length: number, offset: number, index: number}
+ data: any,
+ index: number,
+) => {length: number, offset: number, index: number}
```
| Type |
@@ -314,8 +397,8 @@ A unique identifier for this list. If there are multiple VirtualizedLists at the
### `keyExtractor`
-```jsx
-(item: object, index: number) => string;
+```tsx
+(item: any, index: number) => string;
```
Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks `item.key`, then `item.id`, and then falls back to using the index, like React does.
@@ -338,8 +421,8 @@ The maximum number of items to render in each incremental render batch. The more
### `onEndReached`
-```jsx
-(info: {distanceFromEnd: number}) => void
+```tsx
+(info: {distanceFromEnd: number}) => void;
```
Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content.
@@ -362,8 +445,8 @@ How far from the end (in units of visible length of the list) the bottom edge of
### `onRefresh`
-```jsx
-() => void
+```tsx
+() => void;
```
If provided, a standard `RefreshControl` will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly.
@@ -376,12 +459,12 @@ If provided, a standard `RefreshControl` will be added for "Pull to Refresh" fun
### `onScrollToIndexFailed`
-```jsx
+```tsx
(info: {
- index: number,
- highestMeasuredFrameIndex: number,
- averageItemLength: number,
- }) => void
+ index: number,
+ highestMeasuredFrameIndex: number,
+ averageItemLength: number,
+}) => void;
```
Used to handle failures when scrolling to an index that has not been measured yet. Recommended action is to either compute your own offset and `scrollTo` it, or scroll as far as possible and then try again after more items have been rendered.
@@ -396,9 +479,9 @@ Used to handle failures when scrolling to an index that has not been measured ye
Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-| Type |
-| ------------------------------------------------------------------------------------------------------------------ |
-| (callback: { changed: array of [ViewToken](viewtoken)s, viewableItems: array of [ViewToken](viewtoken)s }) => void |
+| Type |
+| ---------------------------------------------------------------------------------------------------------------- |
+| (callback: {changed: array of [ViewToken](viewtoken)s, viewableItems: array of [ViewToken](viewtoken)s}) => void |
---
@@ -454,7 +537,7 @@ This may improve scroll performance for large lists.
### `renderScrollComponent`
-```jsx
+```tsx
(props: object) => element;
```
@@ -508,70 +591,45 @@ Determines the maximum number of items rendered outside of the visible area, in
### `flashScrollIndicators()`
-```jsx
+```tsx
flashScrollIndicators();
```
---
-### `getChildContext()`
-
-```jsx
-getChildContext () => Object;
-```
-
-The `Object` returned consist of:
-
-- 'virtualizedList' (Object). This object consist of the following
- - getScrollMetrics' (Function). Returns an object with following properties: `{ contentLength: number, dOffset: number, dt: number, offset: number, timestamp: number, velocity: number, visibleLength: number }`.
- - 'horizontal' (boolean) - Optional.
- - 'getOutermostParentListRef' (Function).
- - 'getNestedChildState' (Function) - Returns ChildListState .
- - 'registerAsNestedChild' (Function). This accept an object with following properties `{ cellKey: string, key: string, ref: VirtualizedList, parentDebugInfo: ListDebugInfo }`. It returns a ChildListState
- - 'unregisterAsNestedChild' (Function). This takes an object with following properties, `{ key: string, state: ChildListState }`
- - 'debugInfo' (ListDebugInfo).
-
----
-
### `getScrollableNode()`
-```jsx
-getScrollableNode () => ?number;
+```tsx
+getScrollableNode(): any;
```
---
### `getScrollRef()`
-```jsx
-getScrollRef () => | ?React.ElementRef
- | ?React.ElementRef;
+```tsx
+getScrollRef():
+ | React.ElementRef
+ | React.ElementRef
+ | null;
```
---
### `getScrollResponder()`
-```jsx
-getScrollResponder () => ?ScrollResponderType;
+```tsx
+getScrollResponder () => ScrollResponderMixin | null;
```
Provides a handle to the underlying scroll responder. Note that `this._scrollRef` might not be a `ScrollView`, so we need to check that it responds to `getScrollResponder` before calling it.
---
-### `hasMore()`
-
-```jsx
-hasMore () => boolean;
-```
-
----
-
### `scrollToEnd()`
-```jsx
-scrollToEnd(([options]: { animated: boolean }));
+```tsx
+scrollToEnd(params?: {animated?: boolean});
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
@@ -590,14 +648,19 @@ Valid `params` keys are:
### `scrollToIndex()`
-```jsx
-scrollToIndex((params: object));
+```tsx
+scrollToIndex(params: {
+ index: number;
+ animated?: boolean;
+ viewOffset?: number;
+ viewPosition?: number;
+});
```
Valid `params` consist of:
-- 'animated' (boolean). Optional.
- 'index' (number). Required.
+- 'animated' (boolean). Optional.
- 'viewOffset' (number). Optional.
- 'viewPosition' (number). Optional.
@@ -605,22 +668,31 @@ Valid `params` consist of:
### `scrollToItem()`
-```jsx
-scrollToItem((params: object));
+```tsx
+scrollToItem(params: {
+ item: ItemT;
+ animated?: boolean;
+ viewOffset?: number;
+ viewPosition?: number;
+);
```
Valid `params` consist of:
-- 'animated' (boolean). Optional.
- 'item' (Item). Required.
+- 'animated' (boolean). Optional.
+- 'viewOffset' (number). Optional.
- 'viewPosition' (number). Optional.
---
### `scrollToOffset()`
-```jsx
-scrollToOffset((params: object));
+```tsx
+scrollToOffset(arams: {
+ offset: number;
+ animated?: boolean;
+});
```
Scroll to a specific content pixel offset in the list.
@@ -628,19 +700,3 @@ Scroll to a specific content pixel offset in the list.
Param `offset` expects the offset to scroll to. In case of `horizontal` is true, the offset is the x-value, in any other case the offset is the y-value.
Param `animated` (`true` by default) defines whether the list should do an animation while scrolling.
-
----
-
-### `recordInteraction()`
-
-```jsx
-recordInteraction();
-```
-
----
-
-### `setNativeProps()`
-
-```jsx
-setNativeProps((props: Object));
-```
diff --git a/package.json b/package.json
index e1eec5c5a1a..e9c1bcb4b37 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"workspaces": [
"cnwebsite",
"plugins/*",
+ "scripts/*",
"sync-api-docs"
],
"scripts": {
diff --git a/plugins/remark-snackplayer/src/index.js b/plugins/remark-snackplayer/src/index.js
index 93ccb2a33ae..c7b85443815 100644
--- a/plugins/remark-snackplayer/src/index.js
+++ b/plugins/remark-snackplayer/src/index.js
@@ -32,8 +32,16 @@ const processNode = (node, parent) => {
const description = params.description
? decodeURIComponent(params.description)
: 'Example usage';
- const sampleCode = node.value;
- const encodedSampleCode = encodeURIComponent(sampleCode);
+ const ext = params.ext ? decodeURIComponent(params.ext) : 'tsx';
+ const filename = `App.${ext}`;
+ const files = encodeURIComponent(
+ JSON.stringify({
+ [filename]: {
+ type: 'CODE',
+ contents: node.value,
+ },
+ })
+ );
const dependencies = params.dependencies || '';
const platform = params.platform || 'web';
const supportedPlatforms = params.supportedPlatforms || 'ios,android,web';
@@ -49,7 +57,7 @@ const processNode = (node, parent) => {
class="snack-player"
data-snack-name="${name}"
data-snack-description="${description}"
- data-snack-code="${encodedSampleCode}"
+ data-snack-files="${files}"
data-snack-dependencies="${dependencies}"
data-snack-platform="${platform}"
data-snack-supported-platforms="${supportedPlatforms}"
diff --git a/scripts/lint-examples/.eslintignore b/scripts/lint-examples/.eslintignore
new file mode 100644
index 00000000000..3313571d92c
--- /dev/null
+++ b/scripts/lint-examples/.eslintignore
@@ -0,0 +1 @@
+!/out
diff --git a/scripts/lint-examples/.eslintrc.js b/scripts/lint-examples/.eslintrc.js
new file mode 100644
index 00000000000..44e72fcc32f
--- /dev/null
+++ b/scripts/lint-examples/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+ root: true,
+ extends: '@react-native-community',
+ rules: {
+ // Many existing inline styles in examples
+ 'react-native/no-inline-styles': 'off',
+ },
+};
diff --git a/scripts/lint-examples/.prettierrc.js b/scripts/lint-examples/.prettierrc.js
new file mode 100644
index 00000000000..2b540746a75
--- /dev/null
+++ b/scripts/lint-examples/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ arrowParens: 'avoid',
+ bracketSameLine: true,
+ bracketSpacing: false,
+ singleQuote: true,
+ trailingComma: 'all',
+};
diff --git a/scripts/lint-examples/README.md b/scripts/lint-examples/README.md
new file mode 100644
index 00000000000..0827dd7768a
--- /dev/null
+++ b/scripts/lint-examples/README.md
@@ -0,0 +1,7 @@
+# @react-native-website/lint-examples
+
+This script lints Snack player examples as if they were placed in a newly built react-native project. Changes to the examples made by linting will be patched back into the original document.
+
+### Arguments
+
+Command line arguments (e.g. `--fix`) are currently forwarded to ESLint.
diff --git a/scripts/lint-examples/babel.config.js b/scripts/lint-examples/babel.config.js
new file mode 100644
index 00000000000..f842b77fcfb
--- /dev/null
+++ b/scripts/lint-examples/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ['module:metro-react-native-babel-preset'],
+};
diff --git a/scripts/lint-examples/bin/eslint-examples-js.js b/scripts/lint-examples/bin/eslint-examples-js.js
new file mode 100755
index 00000000000..9419e83002f
--- /dev/null
+++ b/scripts/lint-examples/bin/eslint-examples-js.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const lintExamples = require('../src/lintExamples');
+
+lintExamples({
+ command: 'eslint',
+ args: ['--max-warnings=0', '.'],
+ extension: 'js',
+ writeBack: true,
+});
diff --git a/scripts/lint-examples/bin/eslint-examples-tsx.js b/scripts/lint-examples/bin/eslint-examples-tsx.js
new file mode 100755
index 00000000000..79aa4333f6c
--- /dev/null
+++ b/scripts/lint-examples/bin/eslint-examples-tsx.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const lintExamples = require('../src/lintExamples');
+
+lintExamples({
+ command: 'eslint',
+ args: ['--max-warnings=0', '.'],
+ extension: 'tsx',
+ writeBack: true,
+});
diff --git a/scripts/lint-examples/bin/tsc-examples.js b/scripts/lint-examples/bin/tsc-examples.js
new file mode 100755
index 00000000000..491106b4b82
--- /dev/null
+++ b/scripts/lint-examples/bin/tsc-examples.js
@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const lintExamples = require('../src/lintExamples');
+
+lintExamples({
+ command: 'tsc',
+ extension: 'tsx',
+ writeBack: false,
+});
diff --git a/scripts/lint-examples/package.json b/scripts/lint-examples/package.json
new file mode 100644
index 00000000000..c25dda61065
--- /dev/null
+++ b/scripts/lint-examples/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "@react-native-website/lint-examples",
+ "version": "0.0.0",
+ "private": true,
+ "bin": {
+ "eslint-examples-js": "./bin/eslint-examples-js.js",
+ "eslint-examples-tsx": "./bin/eslint-examples-tsx.js",
+ "tsc-examples": "./bin/tsc-examples.js"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.9",
+ "@babel/preset-env": "^7.14.0",
+ "@babel/runtime": "^7.12.5",
+ "@react-native-community/eslint-config": "^3.0.0",
+ "@tsconfig/react-native": "^2.0.2",
+ "@types/jest": "^29.2.3",
+ "@types/react": "^18.0.24",
+ "eslint": "^8.19.0",
+ "glob-promise": "^4.2.2",
+ "metro-react-native-babel-preset": "0.73.3",
+ "prettier": "^2.4.1",
+ "react": "18.2.0",
+ "react-native": "^0.71.0-rc.5",
+ "typescript": "4.8.4"
+ }
+}
diff --git a/scripts/lint-examples/src/lintExamples.js b/scripts/lint-examples/src/lintExamples.js
new file mode 100755
index 00000000000..108b6f483bc
--- /dev/null
+++ b/scripts/lint-examples/src/lintExamples.js
@@ -0,0 +1,221 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const {execSync} = require('child_process');
+const {promises: fs} = require('fs');
+const path = require('path');
+const glob = require('glob-promise');
+
+/**
+ * The root document to search for documents
+ */
+const documentsRoot = path.join(__dirname, '..', '..', '..', 'docs');
+
+/**
+ * The directory to output generated files to
+ */
+const outputRoot = path.join(__dirname, '..', 'out');
+
+/**
+ * Process arguments to be forwarded to the linter
+ */
+const processArgs = process.argv.slice(2);
+
+/**
+ * Valid extensions for snack examples
+ */
+const validExtensions = ['js', 'tsx'];
+
+/**
+ * Extracts snack examples based on extension to output files, then runs an
+ * arbitrary linter command over them, optionally writing back updates to the
+ * file made by the linter. Commands passed to node are passed to the
+ * underlying command.
+ *
+ * @param opts.command an npx command to run as the linter tool
+ * @param opts.args extra arguments to be passed to the linter
+ * @param opts.extension extension to treat the example as if it does not specify one
+ * @param opts.writeBack whether to update examples with mutations made by the linter
+ */
+async function lintExamples({command, args, extension, writeBack}) {
+ if (!validExtensions.includes(extension)) {
+ console.error(
+ `Invalid extension "${extension}" (should be one of ${JSON.stringify(
+ validExtensions,
+ )})`,
+ );
+ process.exit(1);
+ }
+
+ try {
+ const mappings = await extractExamples(extension ?? 'js');
+ process.exitCode = await runLinter(command, args ?? []);
+
+ if (writeBack) {
+ await updateDocuments(mappings);
+ }
+ } catch (ex) {
+ console.error(ex);
+ process.exit(1);
+ }
+}
+
+/**
+ * Extracts all Snack player code examples inline in markdown into a unique
+ * file per example. Returns a mapping from output files back to the original
+ * markdown.
+ *
+ * @param extension extension to treat the example as if it does not specify
+ */
+async function extractExamples(extension) {
+ const documents = await glob('**/*.md', {
+ cwd: documentsRoot,
+ absolute: true,
+ });
+ const mappings = [];
+
+ await fs.mkdir(outputRoot, {recursive: true});
+ await fs.rm(outputRoot, {recursive: true});
+
+ await Promise.all(
+ documents.map(async doc => {
+ mappings.push(...(await extractExamplesFromDocument(doc, extension)));
+ }),
+ );
+
+ return mappings;
+}
+
+/**
+ * Extracts snack player examples from a given markdown file. Returns a mapping
+ * from output files back to the original markdown.
+ *
+ * @param filename absolute filename of the documents root
+ * @param extension extension to treat the example as if it does not specify
+ */
+async function extractExamplesFromDocument(filename, extension) {
+ const fileContents = await fs.readFile(filename, {
+ encoding: 'utf-8',
+ });
+ const snackRegex = /(```SnackPlayer(.*)\r?\n)((((?!```).)*\r?\n)+)```/g;
+ const matches = [...fileContents.matchAll(snackRegex)];
+
+ let matchIndex = 0;
+ const mappings = await Promise.all(
+ matches.map(async match => {
+ const contentOffset = match.index + match[1].length;
+ const snackParams = new URLSearchParams(match[2].trim());
+ const exampleName = snackParams.get('name');
+ const exampleExt = snackParams.get('ext');
+ const content = match[3];
+
+ const baseFileName = path.relative(documentsRoot, filename);
+ const outFile = path.join(
+ outputRoot,
+ `${baseFileName}-${++matchIndex}${
+ exampleName ? '-' + exampleName : ''
+ }.${extension}`,
+ );
+
+ if (exampleExt) {
+ if (!validExtensions.includes(exampleExt)) {
+ console.error(
+ `Invalid extension "${exampleExt}" encountered while parsing ${filename} (should be one of ${JSON.stringify(
+ validExtensions,
+ )})`,
+ );
+ process.exit(1);
+ }
+
+ if (exampleExt !== extension) {
+ return [];
+ }
+ }
+
+ await fs.mkdir(path.dirname(outFile), {recursive: true});
+ await fs.writeFile(outFile, content);
+
+ return [
+ {
+ documentPath: filename,
+ examplePath: outFile,
+ offset: contentOffset,
+ length: content.length,
+ },
+ ];
+ }),
+ );
+
+ return mappings.flat();
+}
+
+/**
+ * Runs the given npx command over the set of extracted documents, returning
+ * the exit code
+ *
+ * @param command an npx command to run as the linter tool
+ * @param args extra arguments to be passed to the linter
+ */
+async function runLinter(command, args) {
+ const combinedArgs = [...processArgs, ...args];
+
+ try {
+ execSync(`npx ${command} ${combinedArgs.join(' ')}`, {
+ cwd: outputRoot,
+ stdio: 'inherit',
+ });
+
+ return 0;
+ } catch (ex) {
+ return ex.status;
+ }
+}
+
+/**
+ * Updates in-document examples to match the newly linted example files
+ *
+ * @param mappings file mappings generated by extractExamples()
+ */
+async function updateDocuments(mappings) {
+ const mappingsByDocument = {};
+ for (const mapping of mappings) {
+ if (mappingsByDocument[mapping.documentPath] === undefined) {
+ mappingsByDocument[mapping.documentPath] = [];
+ }
+ mappingsByDocument[mapping.documentPath].push(mapping);
+ }
+
+ const documents = Object.keys(mappingsByDocument);
+ await Promise.all(
+ documents.map(async doc => {
+ const documentMappings = mappingsByDocument[doc];
+ documentMappings.sort((m1, m2) => m2.offset - m1.offset);
+
+ const origDocumentContents = await fs.readFile(doc, {
+ encoding: 'utf-8',
+ });
+ let newDocumentContents = origDocumentContents;
+ for (const mapping of documentMappings) {
+ const exampleContents = await fs.readFile(mapping.examplePath, {
+ encoding: 'utf-8',
+ });
+ newDocumentContents =
+ newDocumentContents.substring(0, mapping.offset) +
+ exampleContents +
+ newDocumentContents.substring(mapping.offset + mapping.length);
+ }
+
+ if (newDocumentContents !== origDocumentContents) {
+ await fs.writeFile(doc, newDocumentContents);
+ }
+ }),
+ );
+}
+
+module.exports = lintExamples;
diff --git a/scripts/lint-examples/tsconfig.json b/scripts/lint-examples/tsconfig.json
new file mode 100644
index 00000000000..228da1271f9
--- /dev/null
+++ b/scripts/lint-examples/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "@tsconfig/react-native/tsconfig.json",
+ "include": ["./out"]
+}
diff --git a/website/architecture/bundled-hermes.md b/website/architecture/bundled-hermes.md
index d94758dea71..6c2cacbfcc0 100644
--- a/website/architecture/bundled-hermes.md
+++ b/website/architecture/bundled-hermes.md
@@ -40,7 +40,7 @@ On iOS, we've moved the `hermes-engine` you're using.
Prior to React Native 0.69, users would download a pod (here you can find the [podspec](https://github.com/CocoaPods/Specs/blob/master/Specs/5/d/0/hermes-engine/0.11.0/hermes-engine.podspec.json)).
On React Native 0.69, users would instead use a podspec that is defined inside the `sdks/hermes-engine/hermes-engine.podspec` file in the `react-native` NPM package.
-That podspec relies on a pre-built tarball of Hermes that we upload on GitHub Releases, as part of the React Native release process (i.e. [see the assets of this release](https://github.com/facebook/react-native/releases/tag/v0.69.0-rc.6)).
+That podspec relies on a pre-built tarball of Hermes that we upload to Maven and to the React Native GitHub Release, as part of the React Native release process (i.e. [see the assets of this release](https://github.com/facebook/react-native/releases/tag/v0.70.4)).
### Android Users
@@ -81,21 +81,20 @@ You can find instructions to optimize your build time and reduce the impact on y
Users building React Native App, with the New Architecture, on Windows machines need to follow those extra steps to let the build work correctly:
-* Make sure the [environment is configured properly](https://reactnative.dev/docs/environment-setup), with Android SDK & node.
-* Install [cmake](https://community.chocolatey.org/packages/cmake) with Chocolatey
-* Install either:
- * [Build Tools for Visual Studio 2022](https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022).
- * [Visual Studio 22 Community Edition](https://visualstudio.microsoft.com/vs/community/) - Picking only the C++ desktop development is sufficient.
-* Make sure the [Visual Studio Command Prompt](https://docs.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell?view=vs-2022) is configured correctly. This is required as the proper C++ compiler environment variable is configured in those command prompt.
-* Run the app with `npx react-native run-android` inside a Visual Studio Command Prompt.
+- Make sure the [environment is configured properly](https://reactnative.dev/docs/environment-setup), with Android SDK & node.
+- Install [cmake](https://community.chocolatey.org/packages/cmake) with Chocolatey
+- Install either:
+ - [Build Tools for Visual Studio 2022](https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022).
+ - [Visual Studio 22 Community Edition](https://visualstudio.microsoft.com/vs/community/) - Picking only the C++ desktop development is sufficient.
+- Make sure the [Visual Studio Command Prompt](https://docs.microsoft.com/en-us/visualstudio/ide/reference/command-prompt-powershell?view=vs-2022) is configured correctly. This is required as the proper C++ compiler environment variable is configured in those command prompt.
+- Run the app with `npx react-native run-android` inside a Visual Studio Command Prompt.
### Can users still use another engine?
Yes, users are free to enable/disable Hermes (with the `enableHermes` variable on Android, `hermes_enabled` on iOS).
The 'Bundled Hermes' change will impact only **how Hermes is built and bundled** for you.
-Please note that, at the time of writing, the default for `enableHermes`/`hermes_enabled` is `false`.
-We're looking into updating the template to have it default to `true` in the near future.
+Starting with React Native 0.70, the default for `enableHermes`/`hermes_enabled` is `true`.
## How this will impact contributor and extension developers
@@ -107,7 +106,7 @@ This mechanism relies on **downloading a tarball** with the Hermes source code f
When building React Native from `main`, we will be fetching a tarball of `main` of facebook/hermes and building it as part of the build process of React Native.
-When building React Native from a release branch (say `0.69-stable`), we will instead use a **tag** on the Hermes repo to **syncronize the code** between the two repos. The specific tag name used will then be stored inside the `sdks/.hermesversion` file inside React Native in the release branch (e.g. [this is the file](https://github.com/facebook/react-native/blob/0.69-stable/sdks/.hermesversion) on the 0.69 release branch).
+When building React Native from a release branch (say `0.69-stable`), we will instead use a **tag** on the Hermes repo to **synchronize the code** between the two repos. The specific tag name used will then be stored inside the `sdks/.hermesversion` file inside React Native in the release branch (e.g. [this is the file](https://github.com/facebook/react-native/blob/0.69-stable/sdks/.hermesversion) on the 0.69 release branch).
In a sense, you can think of this approach similarly to a **git submodule**.
@@ -144,10 +143,22 @@ This is needed as React Native is consuming `fbjni` using the non-prefab approac
The iOS implementation relies on a series of scripts that lives in the following locations:
-* [`/scripts/hermes`](https://github.com/facebook/react-native/tree/main/scripts/hermes). Those scripts contain logic to download the hermes tarball, unzip it, and configure the iOS build. They're invoked at `pod install` time if you have the `hermes_enabled` field set to `true`.
-* [`/sdks/hermes-engine`](https://github.com/facebook/react-native/tree/main/sdks/hermes-engine). Those scripts contain the build logic that is effectively building Hermes. They were copied and adapted from the `facebook/hermes` repo to properly work within React Native. Specifically, the scripts inside the `utils` folder are responsible of building Hermes for all the Mac platforms.
+- [`/scripts/hermes`](https://github.com/facebook/react-native/tree/main/scripts/hermes). Those scripts contain logic to download the Hermes tarball, unzip it, and configure the iOS build. They're invoked at `pod install` time if you have the `hermes_enabled` field set to `true`.
+- [`/sdks/hermes-engine`](https://github.com/facebook/react-native/tree/main/sdks/hermes-engine). Those scripts contain the build logic that is effectively building Hermes. They were copied and adapted from the `facebook/hermes` repo to properly work within React Native. Specifically, the scripts inside the `utils` folder are responsible of building Hermes for all the Mac platforms.
-To distribute a prebuilt for iOS, we rely on the `build_hermes_macos` Job on CircleCI. The job will produce as artifact a tarball which will be downloaded by the `hermes-engine` podspec (i.e. [those are the artifacts for an execution for React Native 0.69](https://app.circleci.com/pipelines/github/facebook/react-native/13679/workflows/5172f8e4-6b02-4ccb-ab97-7cb954911fae/jobs/258701/artifacts)).
+Hermes is built as part of the `build_hermes_macos` Job on CircleCI. The job will produce as artifact a tarball which will be downloaded by the `hermes-engine` podspec when using a published React Native release ([here is an example of the artifacts created for React Native 0.69 in `build_hermes_macos`](https://app.circleci.com/pipelines/github/facebook/react-native/13679/workflows/5172f8e4-6b02-4ccb-ab97-7cb954911fae/jobs/258701/artifacts)).
+
+##### Prebuilt Hermes
+
+If there are no prebuilt artifacts for the React Native version that is being used (i.e. you may be working with React Native from the `main` branch), then Hermes will need to be built from source. First, the Hermes compiler, `hermesc`, will be built for macOS during `pod install`, then Hermes itself will be built as part of the Xcode build pipeline using the `build-hermes-xcode.sh` script.
+
+##### Building Hermes from source
+
+Hermes is always built from source when using React Native from the `main` branch. If you are using a stable React Native version, you can force Hermes to be built from source by setting the `CI` envvar to `true` when using CocoaPods: `CI=true pod install`.
+
+##### Debug symbols
+
+The prebuilt artifacts for Hermes do not contain debug symbols (dSYMs) by default. We're planning on distributing these debug symbols for each release in the future. Until then, if you need the debug symbols for Hermes, you will need to build Hermes from source. A `hermes.framework.dSYM` will be created in the build directory alongside each of the Hermes frameworks.
### I'm afraid this change is impacting me
diff --git a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md
index cf45b6b2062..fd28f4e840c 100644
--- a/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md
+++ b/website/blog/2016-08-19-right-to-left-support-for-react-native-apps.md
@@ -181,12 +181,12 @@ Even after the initial RTL-compatible app release, you will likely need to itera
_onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL);
- this.setState({ isRTL: !this.state.isRTL });
+ this.setState({isRTL: !this.state.isRTL});
Alert.alert(
'Reload this page',
'Please reload this page to change the UI direction! ' +
'All examples in this app will be affected. ' +
- 'Check them out to see what they look like in RTL layout.'
+ 'Check them out to see what they look like in RTL layout.',
);
};
```
diff --git a/website/blog/2016-10-25-0.36-headless-js-the-keyboard-api-and-more.md b/website/blog/2016-10-25-0.36-headless-js-the-keyboard-api-and-more.md
index bffe2183280..3a6dddb00de 100644
--- a/website/blog/2016-10-25-0.36-headless-js-the-keyboard-api-and-more.md
+++ b/website/blog/2016-10-25-0.36-headless-js-the-keyboard-api-and-more.md
@@ -17,7 +17,7 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
To get started, define your async task in a dedicated file (e.g. `SomeTaskName.js`):
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// Perform your task here.
};
```
@@ -26,7 +26,7 @@ Next, register your task in on `AppRegistry`:
```jsx
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
@@ -37,7 +37,7 @@ Using Headless JS does require some native Java code to be written in order to a
Working with the on-screen keyboard is now easier with [`Keyboard`](/docs/keyboard). You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call `Keyboard.dismiss()`:
```js
-import { Keyboard } from 'react-native';
+import {Keyboard} from 'react-native';
// Hide that keyboard!
Keyboard.dismiss();
diff --git a/website/blog/2017-03-13-better-list-views.md b/website/blog/2017-03-13-better-list-views.md
index 0d69b3a5991..dad04b6b235 100644
--- a/website/blog/2017-03-13-better-list-views.md
+++ b/website/blog/2017-03-13-better-list-views.md
@@ -71,16 +71,16 @@ Lists are used in many contexts, so we packed the new components full of feature
```jsx
(
+ renderItem={({item}) => (
- this.setState((oldState) => ({
+ this.setState(oldState => ({
selected: {
// New instance breaks `===`
...oldState.selected, // copy old data
- [item.key]: !oldState.selected[item.key] // toggle
- }
+ [item.key]: !oldState.selected[item.key], // toggle
+ },
}))
}
selected={
diff --git a/website/blog/2017-03-13-idx-the-existential-function.md b/website/blog/2017-03-13-idx-the-existential-function.md
index 6137f638b51..9bb8bac1410 100644
--- a/website/blog/2017-03-13-idx-the-existential-function.md
+++ b/website/blog/2017-03-13-idx-the-existential-function.md
@@ -24,7 +24,7 @@ There is [an ECMAScript proposal to introduce the existential operator](https://
We came up with an existential _function_ we call `idx`.
```jsx
-idx(props, (_) => _.user.friends[0].friends);
+idx(props, _ => _.user.friends[0].friends);
```
The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The `idx` function takes exactly two arguments:
diff --git a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md
index a1ced1782a7..27d6544d027 100644
--- a/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md
+++ b/website/blog/2018-01-18-implementing-twitters-app-loading-animation-in-react-native.md
@@ -85,10 +85,10 @@ Alrighty. Now that we know what we are building and how the animation works, we
The main piece of this puzzle is [MaskedViewIOS](https://reactnative.dev/docs/0.63/maskedviewios), a core React Native component.
```jsx
-import { MaskedViewIOS } from 'react-native';
+import {MaskedViewIOS} from 'react-native';
Basic Mask}>
- ;
```
@@ -101,14 +101,14 @@ What we want to do is render our blue layer, and then on top render our masked a
fullScreenBlueLayer;
}
+
;
@@ -149,7 +149,7 @@ Our initial component state will be the following.
```jsx
state = {
- loadingProgress: new Animated.Value(0)
+ loadingProgress: new Animated.Value(0),
};
```
@@ -159,7 +159,7 @@ When we are ready to begin the animation, we tell Animated to animate this value
Animated.timing(this.state.loadingProgress, {
toValue: 100,
duration: 1000,
- useNativeDriver: true // This is important!
+ useNativeDriver: true, // This is important!
}).start();
```
@@ -184,9 +184,9 @@ const opacityClearToVisible = {
opacity: loadingProgress.interpolate({
inputRange: [0, 15, 30],
outputRange: [0, 0, 1],
- extrapolate: 'clamp'
+ extrapolate: 'clamp',
// clamp means when the input is 30-100, output should stay at 1
- })
+ }),
};
const imageScale = {
@@ -194,10 +194,10 @@ const imageScale = {
{
scale: loadingProgress.interpolate({
inputRange: [0, 10, 100],
- outputRange: [1, 0.8, 70]
- })
- }
- ]
+ outputRange: [1, 0.8, 70],
+ }),
+ },
+ ],
};
const appScale = {
@@ -205,10 +205,10 @@ const appScale = {
{
scale: loadingProgress.interpolate({
inputRange: [0, 100],
- outputRange: [1.1, 1]
- })
- }
- ]
+ outputRange: [1.1, 1],
+ }),
+ },
+ ],
};
```
@@ -226,7 +226,7 @@ return (
{fullScreenBlueLayer}
{fullScreenWhiteLayer}
+ style={[opacityClearToVisible, appScale, {flex: 1}]}>
{this.props.children}
@@ -255,10 +255,10 @@ To know when we can clean them up, we need to know when the animation is complet
Animated.timing(this.state.loadingProgress, {
toValue: 100,
duration: 1000,
- useNativeDriver: true
+ useNativeDriver: true,
}).start(() => {
this.setState({
- animationDone: true
+ animationDone: true,
});
});
```
diff --git a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md
index a9d0b783b70..4f24089d935 100644
--- a/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md
+++ b/website/blog/2018-03-22-building-input-accessory-view-for-react-native.md
@@ -84,11 +84,11 @@ Here's an example which builds a keyboard toolbar button to reset ``
```jsx
class TextInputAccessoryViewExample extends React.Component<
{},
- *
+ *,
> {
constructor(props) {
super(props);
- this.state = { text: 'Placeholder Text' };
+ this.state = {text: 'Placeholder Text'};
}
render() {
@@ -98,14 +98,14 @@ class TextInputAccessoryViewExample extends React.Component<
this.setState({ text })}
+ onChangeText={text => this.setState({text})}
value={this.state.text}
/>
-
+
- this.setState({ text: 'Placeholder Text' })
+ this.setState({text: 'Placeholder Text'})
}
title="Reset Text"
/>
diff --git a/website/blog/2018-05-07-using-typescript-with-react-native.md b/website/blog/2018-05-07-using-typescript-with-react-native.md
index d937db22613..ec571d6a107 100644
--- a/website/blog/2018-05-07-using-typescript-with-react-native.md
+++ b/website/blog/2018-05-07-using-typescript-with-react-native.md
@@ -75,7 +75,7 @@ module.exports = {
},
getSourceExts() {
return ['ts', 'tsx'];
- }
+ },
};
```
@@ -172,7 +172,7 @@ Create a `components` directory and add the following example.
```ts
// components/Hello.tsx
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export interface Props {
name: string;
@@ -189,22 +189,22 @@ export class Hello extends React.Component {
if ((props.enthusiasmLevel || 0) <= 0) {
throw new Error(
- 'You could be a little more enthusiastic. :D'
+ 'You could be a little more enthusiastic. :D',
);
}
this.state = {
- enthusiasmLevel: props.enthusiasmLevel || 1
+ enthusiasmLevel: props.enthusiasmLevel || 1,
};
}
onIncrement = () =>
this.setState({
- enthusiasmLevel: this.state.enthusiasmLevel + 1
+ enthusiasmLevel: this.state.enthusiasmLevel + 1,
});
onDecrement = () =>
this.setState({
- enthusiasmLevel: this.state.enthusiasmLevel - 1
+ enthusiasmLevel: this.state.enthusiasmLevel - 1,
});
getExclamationMarks = (numChars: number) =>
Array(numChars + 1).join('!');
@@ -246,23 +246,23 @@ export class Hello extends React.Component {
const styles = StyleSheet.create({
root: {
alignItems: 'center',
- alignSelf: 'center'
+ alignSelf: 'center',
},
buttons: {
flexDirection: 'row',
minHeight: 70,
alignItems: 'stretch',
alignSelf: 'center',
- borderWidth: 5
+ borderWidth: 5,
},
button: {
flex: 1,
- paddingVertical: 0
+ paddingVertical: 0,
},
greeting: {
color: '#999',
- fontWeight: 'bold'
- }
+ fontWeight: 'bold',
+ },
});
```
@@ -288,7 +288,7 @@ Now let's create a `__tests__` folder in the `components` directory and add a te
import React from 'react';
import renderer from 'react-test-renderer';
-import { Hello } from '../Hello';
+import {Hello} from '../Hello';
it('renders correctly with defaults', () => {
const button = renderer
diff --git a/website/blog/2018-08-27-wkwebview.md b/website/blog/2018-08-27-wkwebview.md
index 82f92d48e50..3b1da6ca68b 100644
--- a/website/blog/2018-08-27-wkwebview.md
+++ b/website/blog/2018-08-27-wkwebview.md
@@ -15,7 +15,7 @@ To opt into this new implementation, please use the [`useWebKit`](https://reactn
```js
{
console.log('pressed');
}}
- style={({ pressed }) => ({
- backgroundColor: pressed ? 'lightskyblue' : 'white'
+ style={({pressed}) => ({
+ backgroundColor: pressed ? 'lightskyblue' : 'white',
})}>
Press Me!
;
@@ -82,9 +82,9 @@ React Native now provides an out-of-the-box solution to use these system colors.
For example, on iOS, the [system provides a color called `labelColor`](https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors?language=objc). That can be used in React Native with `PlatformColor` like this:
```jsx
-import { Text, PlatformColor } from 'react-native';
+import {Text, PlatformColor} from 'react-native';
-
+
This is a label
;
```
@@ -97,11 +97,11 @@ import { Text, PlatformColor } from 'react-native';
Android, on the other hand, [provides colors like colorButtonNormal](https://developer.android.com/reference/android/R.attr#colorButtonNormal). You can use this color in React Native with:
```jsx
-import { View, Text, PlatformColor } from 'react-native';
+import {View, Text, PlatformColor} from 'react-native';
This is colored like a button!
;
@@ -117,14 +117,14 @@ You can learn more about `PlatformColor` from [the documentation](https://reactn
`DynamicColorIOS` is an iOS only API that lets you define which color to use in light and dark mode. Similar to `PlatformColor`, this can be used anywhere you can use colors. `DynamicColorIOS` uses iOSâs `colorWithDynamicProvider` under the hood.
```jsx
-import { Text, DynamicColorIOS } from 'react-native';
+import {Text, DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
- light: 'midnightblue'
+ light: 'midnightblue',
});
-
+
This color changes automatically based on the system theme!
;
```
diff --git a/website/blog/2021-03-12-version-0.64.md b/website/blog/2021-03-12-version-0.64.md
index 063e99e71eb..a2a34cf9112 100644
--- a/website/blog/2021-03-12-version-0.64.md
+++ b/website/blog/2021-03-12-version-0.64.md
@@ -37,9 +37,9 @@ Inline Requires is a Babel transform that takes module imports and converts them
**Before:**
```jsx
-import { MyFunction } from 'my-module';
+import {MyFunction} from 'my-module';
-const MyComponent = (props) => {
+const MyComponent = props => {
const result = MyFunction();
return {result} ;
@@ -49,7 +49,7 @@ const MyComponent = (props) => {
**After:**
```jsx
-const MyComponent = (props) => {
+const MyComponent = props => {
const result = require('my-module').MyFunction();
return {result} ;
diff --git a/website/blog/2022-11-22-react-native-core-contributor-summit-2022.md b/website/blog/2022-11-22-react-native-core-contributor-summit-2022.md
new file mode 100644
index 00000000000..93deb03a012
--- /dev/null
+++ b/website/blog/2022-11-22-react-native-core-contributor-summit-2022.md
@@ -0,0 +1,125 @@
+---
+title: React Native Core Contributor Summit 2022
+authors: [thymikee, cortinico]
+tags: [announcement]
+date: 2022-11-22
+---
+
+# React Native Core Contributor Summit 2022
+
+After years of pandemic and online-only events, we really felt it was time to bring the Core Contributors of React Native together!
+
+Thatâs why at the beginning of September, we gathered some of the active core contributors of React Native, library maintainers, and the Metaâs React Native and Metro teams to the **Core Contributor Summit 2022**. [Callstack](https://www.callstack.com/) hosted the Summit in their HQ in WrocĹaw, Poland, as a part of the [React Native EU](https://www.react-native.eu/) conference happening at the same time.
+
+Together with the React Native core team, we devised a series of **workshops** in which the attendees could participate. The topics were:
+
+- ââReact Native Codegen & TypeScript Support
+- ââReact Native New Architecture Library Migration
+- ââReact Native Monorepo
+- Metro Web and Ecosystem Alignment
+- Metro Simplified Release Workflow
+
+We were impressed by the amount of knowledge-sharing and collaboration over those two days. In this blog post, weâd like to give you a sneak peek of the results of this gathering.
+
+
+
+### React Native Codegen & TypeScript Support
+
+[React Nativeâs Codegen](/docs/the-new-architecture/pillars-codegen) is a fundamental part of the New Architecture of React Native. Supporting and improving it is among our top priorities for the future of React Native. For instance, earlier this year, we added support for generic code starting from TypeScript specs rather than Flow.
+
+In this session, we took the opportunity to onboard new contributors to Codegen, by explaining its core concept and describing how it works. We then focused on two major areas:
+
+#### 1. Supporting **new types** that are currently unsupported by Codegen. One of the highly requested ones was the [string union types in TypeScript](https://github.com/Titozzz/react-native/tree/codegen-string-union).
+
+A team of a few people moved into a meeting room to tackle this task. They encountered and overcame some difficulties along the way, like how to run unit tests for Codegen. They spent quite some time understanding the code execution flow before starting to deal with the code. After some hours of collaborative work, they ended up with the first prototype that was able to recognize string unions. This experience was extremely useful in discussing design patterns and the ideal architecture we may want in the future.
+
+#### 2. Improving **[auto-linking for iOS](https://github.com/facebook/react-native/pull/34580)**, which was missing a use case.
+
+Specifically, auto-linking could not work well in scenarios where libraries and the app were living together in a monorepo. Android already supported this use case but it was missing for iOS.
+
+Working with the contributors on Codegen helped us realize that it wasnât trivial to work in its codebase. For example, adding the support for one type required to copy-and-paste the same code in four different places: modules with specs written in Flow, modules with specs written in TypeScript, components with specs written in Flow, and components with specs written in TypeScript.
+
+This realization pushed us to create an [umbrella task](https://github.com/facebook/react-native/issues/34872) to reach out for help to the community in order to improve the status of the codebase toward a more maintainable one.
+
+The participation was outstanding: we managed to quickly assign the first **40 tasks in 5 days**. At the end of October, the community completed **47 tasks** and many others are ready and waiting to be merged.
+
+This initiative also contributed to the [Hacktoberfest](https://hacktoberfest.com/) for all the people who contributed to these improvements!
+
+### ââReact Native New Architecture Library Migration
+
+The hot topic in the React Native space is the New Architecture. Having **libraries** that support the New Architecture is a crucial point in the [migration for the whole ecosystem](/blog/2022/06/16/resources-migrating-your-react-native-library-to-the-new-architecture). Therefore, we want to support library maintainers in migrating to the New Architectures.
+
+Initially, this session started as a brainstorming, where the core contributors had the opportunity to ask the React Native team all the questions they had related to the New Architecture. This in-person feedback loop was crucial for both the core contributors to bring clarity and for the React Native team to collect feedback. Some of the shared feedback and concerns will end up being implemented in React Native 0.71.
+
+We then moved to practically migrating as many libraries to the new architecture as possible. During this session, we kicked off the migration process for several community packages, such as `react-native-document-picker`, `react-native-store-review`, and `react-native-orientation`.
+
+As a reminder, if youâre also migrating a library and need support in doing so, please reach out to our [New Architecture Working Group](https://github.com/reactwg/react-native-new-architecture) on GitHub.
+
+### ââReact Native Monorepo
+
+Releasing a new version of React Native is not trivial today. React Native is one of the most downloaded packages on NPM, and we want to make sure that our release process is smooth.
+
+Thatâs why we want to refactor the `react-native` repository and implement the **Monorepo RFC** ([#480](https://github.com/react-native-community/discussions-and-proposals/pull/480)).
+
+In this session, we initially brainstormed and collected opinions from every contributor, as itâs crucial that we evolve our repository to reduce the breaking changes for our downstream dependencies.
+
+We then started working on two fronts. First, we had to expand our Continuous Integration infrastructure to support our monorepo, adding [Verdaccio](https://verdaccio.org/) to our testing infrastructure. We then started renaming & adding scopes to several of our packages, resulting in 6 distinct contributions.
+
+You can track the status of this effort under this [umbrella issue](https://github.com/facebook/react-native/issues/34692) and we hope to share more on this effort in the near future.
+
+### Metro Web and Ecosystem Alignment
+
+[Metro](https://github.com/facebook/metro), our JavaScript Bundler, is a foundational and integrated part of the React Native development experience and we want to make sure it works with the latest standards in the JS ecosystem.
+
+The focus of this session was to discuss improving Metro's feature set to work better for web use cases and with the npm and bundler ecosystem. Two major areas of discussion:
+
+#### 1. Adopting the `"exports"` ([package entry points](https://nodejs.org/api/packages.html#package-entry-points)) specification
+
+From the [Node.js documentation](https://nodejs.org/api/packages.html#package-entry-points):
+
+
+
+:::info
+The ["exports"](https://nodejs.org/api/packages.html#exports) provides a modern alternative to ["main"](https://nodejs.org/api/packages.html#main) allowing multiple entry points to be defined, conditional entry resolution support between environments, and **preventing any other entry points besides those defined in ["exports"](https://nodejs.org/api/packages.html#exports)**. This encapsulation allows module authors to define the public interface for their package clearly.
+:::
+
+Adopting the `"exports"` specification has a lot of potential. In this session, we debated on how to handle [Platform Specific Code](/docs/platform-specific-code#platform-specific-extensions) with `"exports"`. Considering many factors, we came up with a fairly non-breaking rollout plan for `"exports"`, by adding a `"strict"` and `"non-strict"` mode to Metro resolver. We discussed how leveraging [builder-bob](https://github.com/callstack/react-native-builder-bob) would help library creators adopt the strict mode without friction.
+
+This discussion resulted in:
+
+1. An [RFC](https://github.com/react-native-community/discussions-and-proposals/pull/534) for Metro on how package exports would work with React Native.
+2. An [RFC](https://github.com/nodejs/node/pull/45367) for Node.js to include âreact-nativeâ as a Community Condition.
+
+#### 2. Web and bundler ecosystem
+
+The Metro team shared progress from their partnership with Expo and the intent to continue this working model for upcoming bundle splitting and tree-shaking support. We touched again on ES module support and considered potential future features such as Yarn PnP and output optimization on the web. We discussed how Metroâs core shares logic and data structures with Jest and opportunities for more reuse.
+
+Developers surfaced insightful use cases for bundle splitting and interoperability with third-party tooling. This led us to discuss potential extension points in Metro and improving current documentation.
+
+This discussion provided us with good grounding for the next day's session on simplifying the release workflow.
+
+### Metro Simplified Release Workflow
+
+As mentioned, releasing React Native is not trivial.
+
+Things get harder as we need to release React Native, the React Native CLI, and Metro. Those tools are connected to each other as React Native and the CLI both depend on Metro. This creates some friction when any of the packages releases a new version.
+
+Currently, we manage this through direct communication and synchronized releases, but there is space for improvement.
+
+In this session, we reconsidered the **dependencies** between React Native, Metro, and the CLI. We uncovered how some design decisions during the [âLean Coreâ effort](https://github.com/react-native-community/discussions-and-proposals/issues/6), when we extracted the CLI from React Native, made these two projects codependent with some functionalities duplicated among efforts. The decisions back then made sense and allowed the CLI team to iterate faster than ever.
+
+It was about time to revisit them and take the experience of both teams to figure out the way through. As a result, the Metro team will take over the [`@react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) development, temporarily moving it back to the core of React Native, and then most likely to the Metro monorepo.
+
+
+
+The biggest takeaway, apart from three hours of drawing dependencies between the packages on the whiteboard, was for the CLI and Metro team to exchange their issues, experiences, and plans, resulting in a better understanding of each other.
+
+We wouldnât be able to achieve this level of cooperation without actually meeting each other.
+
+---
+
+Weâre still impressed by how spending several hours together for a couple of days resulted in so much knowledge-sharing and cross-pollination of ideas. During this summit, we planted the seeds for initiatives that will help us improve and re-shape the React Native ecosystem.
+
+We want to say thank you again to [Callstack](https://www.callstack.com/) for hosting us and to all the participants for joining us at the Core Contributor Summit 2022.
+
+If youâre interested in joining the development of React Native, make sure you join our open initiatives and read the [contribution guide](https://reactnative.dev/contributing/overview) we have on our website. We hope to meet you in person as well in the future!
diff --git a/website/blog/2022-12-13-pointer-events-in-react-native.md b/website/blog/2022-12-13-pointer-events-in-react-native.md
new file mode 100644
index 00000000000..40561eaf36d
--- /dev/null
+++ b/website/blog/2022-12-13-pointer-events-in-react-native.md
@@ -0,0 +1,182 @@
+---
+title: Pointer Events in React Native
+authors: [lunaleaps, vincentriemer]
+tags: [announcement]
+date: 2022-12-13
+---
+
+# Pointer Events in React Native
+
+Today we are sharing an experimental cross-platform pointer API for React Native. Weâll go over motivations, how it works, and its benefits to React Native users. There are instructions on how to enable and weâre excited to hear your feedback!
+
+Itâs been over a year since we shared [our many platform vision](https://reactnative.dev/blog/2021/08/26/many-platform-vision) on the wins of building beyond mobile and how it sets a higher bar for all platforms. During this time, we've increased our investments in React Native for VR, Desktop, and Web. With differences in hardware and interactions on these platforms, it raised the question of how React Native should holistically handle input.
+
+
+
+### Going Beyond Touch
+
+Desktop and VR have historically relied on mouse and keyboard input where mobile is primarily touch. That narrative has evolved with touch-screen laptops and growing needs to support interactions via keyboard and pen on mobile. All of which the React Native touch event system is not equipped to handle.
+
+As a result, users of out-of-tree platforms fork React Native and/or create custom native components and modules to support critical features like hover detection or left-click. This divergence leads to prop redundancy with event handlers serving similar purposes but for different platforms. It adds complexity to the framework and makes code-sharing between platforms tedious. For these reasons, the team was motivated to provide a cross-platform pointer API.
+
+React Native aims to provide robust and expressive APIs to build for many platforms while maintaining characteristic platform experiences. Designing such an API is challenging yet thankfully there is prior art in the pointer space that React Native can leverage.
+
+### Looking to Web
+
+Web is a platform with similar challenges in scaling to many platforms while also considering future-proof design. The World Wide Web consortium (W3C) is tasked with setting standards and proposals to build a Web that is interoperable amongst different platforms and browsers.
+
+Most relevant for our needs, the W3C has defined behavior for an abstract form of input, called a pointer. The [Pointer Events](https://www.w3.org/TR/pointerevents3/) specification builds on mouse events and aims to provide a single set of events and interfaces for cross-device pointer input while still allowing for device-specific handling when necessary.
+
+Following the Pointer Events specification provides React Native users many benefits. Beyond addressing the problems mentioned earlier, it raises the capabilities of platforms that havenât historically had to consider multi-input type interactions. Think attaching a bluetooth mouse to your Android phone or the Apple pencil supporting hover on the iPad M2.
+
+Being spec-complaint also provides opportunity for knowledge sharing between Web and React Native. Education of Web expectations around Pointer Events can doubly serve React Native developers. However, we also recognize that React Native requirements are different than web and our approach to specifications is best effort with well documented deviations so expectations are clear. There is related work of aligning certain Web standards to [reduce API fragmentation](https://github.com/react-native-community/discussions-and-proposals/pull/496) in accessibility and performance APIs.
+
+## Porting Web Platform Tests
+
+While the Pointer Events specification provides interfaces and behavior descriptions of the API, we found it wasnât specific enough for us to confidently make changes and point to the specification as verification. However, web browsers use another mechanism to ensure compliance and interoperability â the [Web Platform Tests](https://web-platform-tests.org/)!
+
+The Web Platform Tests are written to work against the browserâs imperative DOM APIs â unsupported by React Native as it uses its own view primitives. This means that we arenât able to code-share the tests with browsers and instead have an analogous testing API for React Native that makes it easier to port those Web Platform Tests.
+
+We implemented a new manual testing framework which we are now using for verifying our implementations through RNTester. These tests are tentatively named the RNTester Platform Tests and are still fairly basic. Our implementation provides an API to construct test cases as components themselves which are rendered and where the results are reported solely through the UI.
+
+
+
+These tests will continue to be helpful as we further the completeness of our Pointer Events implementation. These tests will also scale to test Pointer Events implementations on platforms beyond Android and iOS. As the number of tests in our suite increase we will be looking to automate the running of these tests so that we are better equipped to catch regressions in our implementations.
+
+## How it works
+
+Much of our Pointer Events implementation builds off existing infrastructure for dispatching touch events. On Android and iOS we leverage the relevant MotionEvent and UITouch events. The general flow of event dispatching is illustrated below.
+
+
+
+Using Android as an example, the general approach to leveraging platform events are:
+
+1. Iterate through all pointers of the `MotionEvent` and do a depth-first search to determine the target React view of each pointer and its ancestral path.
+2. Map the category of `MotionEvent` to the relevant pointer events. There is a 1-to-many relationship between `MotionEvent` and `PointerEvent`. In the illustration of their relationship, dotted lines indicate fired events if the pointing device does not support hover.
+
+
+
+1. Build the `PointerEvent` interface with platform details from the `MotionEvent` and cached state of previous interactions. (Ex. [the `button` property](https://w3c.github.io/pointerevents/#the-button-property))
+2. Dispatch the pointer events from Android to React Nativeâs [core event queue](https://github.com/facebook/react-native/blob/main/ReactCommon/react/renderer/core/EventQueueProcessor.cpp#L20) and leverage JSI to call the [`dispatchEvent`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFabricEventEmitter.js#L83) method in `react-native-renderer` which iterates through the React tree for the bubble and capture phase of the event.
+
+## Implementation Progress
+
+When it comes to our current progress of implementing the Pointer Events specification weâve focused on a solid baseline implementation of the most common events that handle things like pressing, hovering, and moving.
+
+### Events
+
+| Implemented | Work in Progress | Yet to be Implemented |
+| -------------- | ---------------- | --------------------- |
+| onPointerOver | onPointerCancel | onClick |
+| onPointerEnter | | onContextMenu |
+| onPointerDown | | onGotPointerCapture |
+| onPointerMove | | onLostPointerCapture |
+| onPointerUp | | onPointerRawUpdate |
+| onPointerOut | | |
+| onPointerLeave | | |
+
+:::info
+
+onPointerCancel has been hooked up to the native platformâs "cancel" event but this does not necessarily correspond to when the web platform expects them to fire.
+
+:::
+
+### Event Properties
+
+For each of the events mentioned above weâve also implemented the majority of the properties expected in the PointerEvent object â though in React Native these are exposed through the `event.nativeEvent` property. You can find an enumeration of all the implemented properties in the [event objectâs Flowtype interface definition](https://github.com/facebook/react-native/blob/59ee57352738f030b41589a450209e51e44bbb06/Libraries/Types/CoreEventTypes.js#L175). One notable exception to being completely implemented is the `relatedTarget` property as exposing a native view reference in this ad-hoc manner isnât trivial.
+
+## Future Work and Exploration
+
+In addition to the events above there are also some other APIs related to Pointer Events. In the future, we plan to be implement these APIs as a part of this effort. These APIs include:
+
+- Pointer Capture API
+ - Includes the imperative API exposed on element references including `setPointerCapture()`, `releasePointerCapture()`, and `hasPointerCapture()`.
+- `touch-action` style property
+ - The web uses this CSS property to declaratively negotiate gestures between the browser and a websiteâs own event handling code. In React Native this could be used for negotiating the event handling between a Viewâs pointer event handlers and a parent ScrollView.
+- `click`, `contextmenu`, `auxclick`
+ - `click` is an abstract definition of interaction that may be triggered through accessibility paradigms or other characteristic platform interactions.
+
+Another benefit of the native Pointer Events implementation is that it will allow us to revisit and improve various forms of gesture handling currently limited only to touch events and handled in JavaScript by the Responder, Pressability, and PanResponder APIs.
+
+Furthermore, we are continuing to explore including an implementation of the `EventTarget` interface for React Native host components (i.e. `add`/`removeEventListener`) which we believe will make possible more user-land abstractions for handling pointer interactions.
+
+## Trying it Out
+
+Our Pointer Events implementation is still experimental but weâre interested in getting feedback from the community on what weâve shared. If you are interested in trying this API youâll need to enable a couple feature flags:
+
+### Enable Feature Flags
+
+:::note
+
+Pointer Events are only implemented for the [New Architecture (Fabric)](https://reactnative.dev/docs/the-new-architecture/use-app-template) and are only available for React Native 0.71+ which at the time of writing is a release candidate.
+
+:::
+
+In your entry JavaScript file (index.js in the default React Native app template) youâll need to enable the `shouldEmitW3CPointerEvents` flag for Pointer Events and `shouldPressibilityUseW3CPointerEventsForHover` to use Pointer Events in `Pressability`.
+
+```js
+import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
+
+// enable the JS-side of the w3c PointerEvent implementation
+ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
+
+// enable hover events in Pressibility to be backed by the PointerEvent implementation
+ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
+ () => true;
+```
+
+### iOS-specific
+
+In order to ensure that the pointer events are sent from the native iOS renderer youâll need to flip a native feature flag in your native appâs initialization code (typically `AppDelegate.mm`).
+
+```objc
+#import
+
+// ...
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+ RCTSetDispatchW3CPointerEvents(YES);
+
+ // ...
+}
+```
+
+Note that to ensure that the Pointer Event implementation can distinguish between mouse and touch pointers on iOS you need to add [`UIApplicationSupportsIndirectInputEvents`](https://developer.apple.com/documentation/bundleresources/information_property_list/uiapplicationsupportsindirectinputevents) to your Xcode projectâs `info.plist`.
+
+### Android-specific
+
+Similarly to iOS Android has a feature flag that youâll need to enable in your appâs initialization â typically your `onCreate` for your root React activity or surface.
+
+```java
+import com.facebook.react.config.ReactFeatureFlags;
+
+//... somewhere in initialization
+
+@Override
+public void onCreate() {
+ ReactFeatureFlags.dispatchPointerEvents = true;
+}
+```
+
+### JavaScript
+
+```js
+function onPointerOver(event) {
+ console.log(
+ 'Over blue box offset: ',
+ event.nativeEvent.offsetX,
+ event.nativeEvent.offsetY,
+ );
+}
+
+// ... in some component
+`
+2. After the commit:
+ 1. open the **Road to 0.X.0** discussion (e.g: [Road to 0.71.0](https://github.com/reactwg/react-native-releases/discussions/41)) or the **Should we release 0.X.Y** discussion (e.g.: [Should we release 0.70.7](https://github.com/reactwg/react-native-releases/discussions/48))
+ 2. edit the main message adding the link to your commit under the **Local commits to backport to main** section
+
+Once the issue in the `-stable` branch is handled, make sure to backport the fixes to main. When the PR backporting the fix is open against `main`, make sure to update the relevant release discussion by adding the link to the PR right below the local commit in the **Local commits to backport to main** section. This makes it easier to keep track that the local commit has been taken care of.
+
+Typically, the author of the original change should backport it. In that way, the commit's attribution is preserved. If the author is not available (for example, they are in PTO or in a different timezone and the backporting is urgent to unblock other work), anyone can take care of it.
+
+### The Git Tag Has Been Pushed to Remote but CI Failed to Release to NPM
+
+The release process is composed of various steps, of which two are key for the rollout:
+
+1. Create a version tag on the GitHub repository
+2. Publish all the artifacts on Maven and NPM
+
+Step 2 takes most of the CI time because it has to build all the artifacts and prefabs needed. It might happen that CI will fail during this part, not reaching the publish to NPM step.
+
+In case Step 1 completes successfully but Step 2 fails, the code in the stable branch is set to the new version, but it has failed to rollout. This means that we need to do some extra steps to be able to retry to publish this version.
+If you end up in this situation, follow these steps:
+
+1. Remove the tag that has been pushed (update the `X`, `Y` and `k` values appropriately):
+ ```sh
+ git tag -d v0.X.Y[-RC.k]
+ git push origin :v0.X.Y[-RC.k]
+ ```
+2. Revert the commit pushed by Step 1. The script we use for the release updates the version numbers all across the codebase in many files ([here's an example](https://github.com/facebook/react-native/commit/38465f2d184a2558681a6b6b45163694c885bd39)). The commit usually has this title `[0.X.Y-rc.k] Bump version numbers` for RCs or `[0.X.Y] Bump version numbers` for stable releases.
+ ```sh
+ git revert
+ git push origin 0.X-stable
+ ```
+3. Apply all the necessary fixes in the `-stable` branch of the codebase. The remedies for this could be of two types:
+ - you forgot to cherry-pick some commits. In this case, you follow the standard cherry-pick procedure for RCs and patches.
+ - you need to fix some bugs in the code. See the ["Add a local commit"](#adding-a-local-commit-in-a--stable-branch) section.
+4. Once you have pushed all the necessary commits in the branch, re-trigger the release process **with the same tag** via the usual script.
+
### Manually set npm tags
Say you accidentally forgot to mark a release as "latest" or "next"?
diff --git a/website/core/TabsConstants.js b/website/core/TabsConstants.js
index ff57f1cc05b..f7536a86b3a 100644
--- a/website/core/TabsConstants.js
+++ b/website/core/TabsConstants.js
@@ -33,10 +33,16 @@ const androidLanguages = [
const defaultAndroidLanguage = 'java';
const javaScriptSpecLanguages = [
+ {label: 'TypeScript', value: 'typescript'},
{label: 'Flow', value: 'flow'},
+];
+const defaultJavaScriptSpecLanguages = 'typescript';
+
+const snackLanguages = [
{label: 'TypeScript', value: 'typescript'},
+ {label: 'JavaScript', value: 'javascript'},
];
-const defaultJavaScriptSpecLanguages = 'flow';
+const defaultSnackLanguage = 'typescript';
const guides = [
{label: 'Expo Go Quickstart', value: 'quickstart'},
@@ -81,4 +87,6 @@ export default {
syntax,
androidLanguages,
javaScriptSpecLanguages,
+ snackLanguages,
+ defaultSnackLanguage,
};
diff --git a/website/package.json b/website/package.json
index 8ccef19afcf..98136bb7e73 100644
--- a/website/package.json
+++ b/website/package.json
@@ -19,14 +19,16 @@
"test": "yarn build",
"version:cut": "docusaurus docs:version",
"format:source": "prettier --write {{core,src}/**/*.js,*.js}",
- "format:markdown": "prettier --write ../docs/*.md && prettier --write {{versioned_docs,src}/**/*.md,blog/*.md}",
+ "format:markdown": "prettier --write ../docs/*.md && prettier --write {versioned_docs/**/*.md,blog/*.md}",
"format:style": "prettier --write src/**/*.{scss,css}",
+ "format:examples": "eslint-examples-js --fix && eslint-examples-tsx --fix",
"prettier": "yarn format:source && yarn format:markdown && yarn format:style",
- "lint": "eslint ../docs/** blog/** core/** src/**/*.{js,md} ./*.js",
+ "lint": "eslint ../docs/** blog/** core/** src/**/*.js ./*.js",
+ "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples",
"lint:versioned": "eslint versioned_docs/**",
"language:lint": "cd ../ && alex && case-police 'docs/*.md' -p brands,general,products,softwares",
"language:lint:versioned": "cd ../ && alex . && case-police '**/*.md' -p brands,general,products,softwares",
- "ci:lint": "yarn lint && yarn lint:versioned && yarn language:lint:versioned",
+ "ci:lint": "yarn lint && yarn lint:examples && yarn lint:versioned && yarn language:lint:versioned",
"pwa:generate": "npx pwa-asset-generator ./static/img/header_logo.svg ./static/img/pwa --padding '40px' --background 'rgb(32, 35, 42)' --icon-only --opaque true"
},
"browserslist": {
@@ -54,6 +56,7 @@
},
"devDependencies": {
"@docusaurus/types": "^2.0.1",
+ "@react-native-website/lint-examples": "0.0.0",
"alex": "^10.0.0",
"fs-extra": "^10.1.0",
"glob": "^8.0.3",
diff --git a/website/showcase.json b/website/showcase.json
index e095b558e98..6bb833fe9e8 100644
--- a/website/showcase.json
+++ b/website/showcase.json
@@ -27,6 +27,7 @@
"icon": "officemobile.png",
"linkAppStore": "https://apps.apple.com/gb/app/microsoft-office/id541164041",
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.microsoft.office.officehubrow",
+ "infoLink": "https://devblogs.microsoft.com/react-native/",
"pinned": true
},
{
@@ -34,6 +35,7 @@
"icon": "outlookmobile.png",
"linkAppStore": "https://apps.apple.com/us/app/microsoft-outlook/id951937596",
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.microsoft.office.outlook",
+ "infoLink": "https://devblogs.microsoft.com/react-native/",
"pinned": true
},
{
@@ -41,6 +43,7 @@
"icon": "teamsmobile.png",
"linkAppStore": "https://apps.apple.com/gb/app/microsoft-teams/id1113153706",
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.microsoft.teams",
+ "infoLink": "https://devblogs.microsoft.com/react-native/",
"pinned": true
},
{
@@ -48,6 +51,7 @@
"icon": "xboxgamepass.png",
"linkAppStore": "https://apps.apple.com/gb/app/xbox-game-pass/id1374542474",
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.gamepass",
+ "infoLink": "https://devblogs.microsoft.com/react-native/",
"pinned": true
},
{
@@ -55,6 +59,7 @@
"icon": "skype.webp",
"linkAppStore": "https://apps.apple.com/us/app/skype-for-iphone/id304878510",
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.skype.raider",
+ "infoLink": "https://devblogs.microsoft.com/react-native/",
"pinned": true
}
],
diff --git a/website/sidebars.json b/website/sidebars.json
index 59ab3f6d548..79c957ce3e4 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -93,11 +93,21 @@
"collapsed": false,
"items": [
"the-new-architecture/pillars",
- "the-new-architecture/pillars-turbomodules",
+ "the-new-architecture/pillars-turbomodules",
"the-new-architecture/pillars-fabric-components",
"the-new-architecture/pillars-codegen"
]
},
+ {
+ "type": "category",
+ "label": "C++",
+ "collapsible": false,
+ "collapsed": false,
+ "items": [
+ "the-new-architecture/cxx-cxxturbomodules",
+ "the-new-architecture/cxx-custom-types"
+ ]
+ },
{
"type": "category",
"label": "Backward Compatibility",
@@ -137,7 +147,8 @@
"items": [
"headless-js-android",
"signed-apk-android",
- "communication-android"
+ "communication-android",
+ "react-native-gradle-plugin"
]
},
{
diff --git a/website/snackPlayerInitializer.js b/website/snackPlayerInitializer.js
index 859d4c43e0e..3e623d59ec2 100644
--- a/website/snackPlayerInitializer.js
+++ b/website/snackPlayerInitializer.js
@@ -73,15 +73,11 @@ export default (() => {
setupThemeSynchronization();
return {
- onRouteUpdate({location}) {
- // console.log('onRouteUpdate', {location});
+ onRouteDidUpdate({location}) {
+ // console.log('onRouteDidUpdate', {location});
- // TODO temporary, because onRouteUpdate fires before the new route renders...
- // see https://github.com/facebook/docusaurus/issues/3399#issuecomment-704401189
- setTimeout(() => {
- initSnackPlayers();
- setupTabPanelsMutationObservers();
- }, 0);
+ initSnackPlayers();
+ setupTabPanelsMutationObservers();
},
};
})();
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index 8b4620bc8b4..5bcb3ae09e6 100644
--- a/website/src/css/customTheme.scss
+++ b/website/src/css/customTheme.scss
@@ -135,6 +135,10 @@ main[class^="docMainContainer"] > .container {
padding-top: 2rem !important;
}
+div[class^="generatedIndexPage"] {
+ max-width: 1080px !important;
+}
+
@media (max-width: 1416px) {
.main-wrapper {
max-width: 100%;
@@ -803,11 +807,23 @@ aside[class^="theme-doc-sidebar-container"] {
}
}
- .menu__list-item-collapsible:hover {
- background: none !important;
+ .menu__list-item-collapsible {
+ .menu__caret {
+ padding: 0 6px;
- .menu__link--sublist-caret:hover {
- background: var(--ifm-menu-color-background-hover) !important;
+ &:before {
+ display: block;
+ background-size: 1.66rem 1.66rem;
+ margin-top: -1px;
+ }
+ }
+
+ &:hover {
+ background: none !important;
+
+ .menu__link--sublist-caret:hover {
+ background: var(--ifm-menu-color-background-hover) !important;
+ }
}
}
@@ -894,7 +910,7 @@ aside[class^="theme-doc-sidebar-container"] {
border-left-width: 0;
}
- a[href].menu__link.menu__link--active {
+ a[href].menu__link.menu__link--active:not(.menu__link--sublist) {
background: var(--ifm-code-background);
padding-left: 8px !important;
border-left-width: 4px;
@@ -1031,6 +1047,19 @@ button[class*="tocCollapsibleButton"] {
background: var(--ifm-footer-background-color);
}
+.card {
+ padding: 1.5rem !important;
+ border: 1px solid var(--ifm-color-emphasis-300) !important;
+ box-shadow: none !important;
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
+ background-color: var(--ifm-background-color);
+
+ &:hover {
+ border-color: var(--ifm-color-emphasis-400) !important;
+ background-color: var(--ifm-menu-color-background-hover);
+ }
+}
+
/* Doc Item footer metadata */
.theme-doc-footer {
diff --git a/website/static/blog/assets/core-contributor-summit-2022.jpg b/website/static/blog/assets/core-contributor-summit-2022.jpg
new file mode 100644
index 00000000000..769ffea4f60
Binary files /dev/null and b/website/static/blog/assets/core-contributor-summit-2022.jpg differ
diff --git a/website/static/blog/assets/pointer-events-code-flow.png b/website/static/blog/assets/pointer-events-code-flow.png
new file mode 100644
index 00000000000..f12602dd475
Binary files /dev/null and b/website/static/blog/assets/pointer-events-code-flow.png differ
diff --git a/website/static/blog/assets/pointer-events-motionevent-relationship.png b/website/static/blog/assets/pointer-events-motionevent-relationship.png
new file mode 100644
index 00000000000..309cd607da3
Binary files /dev/null and b/website/static/blog/assets/pointer-events-motionevent-relationship.png differ
diff --git a/website/static/blog/assets/pointer-events-wpt-demo.gif b/website/static/blog/assets/pointer-events-wpt-demo.gif
new file mode 100644
index 00000000000..0f4e887a07f
Binary files /dev/null and b/website/static/blog/assets/pointer-events-wpt-demo.gif differ
diff --git a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-java.md
index 8e794281c57..c84c29d9d13 100644
--- a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-objc.md
index f42c7bec4d2..590bfc3c5b2 100644
--- a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-objc.md
@@ -178,16 +178,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -209,18 +204,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-swift.md
index a5964858da2..2c59effe06e 100644
--- a/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.60/_integration-with-exisiting-apps-swift.md
@@ -172,16 +172,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -203,18 +198,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.60/accessibility.md b/website/versioned_docs/version-0.60/accessibility.md
index 922bf900fc9..66de1067452 100644
--- a/website/versioned_docs/version-0.60/accessibility.md
+++ b/website/versioned_docs/version-0.60/accessibility.md
@@ -171,12 +171,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -218,11 +218,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -247,16 +247,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.60/accessibilityinfo.md b/website/versioned_docs/version-0.60/accessibilityinfo.md
index 5b97545678e..8b4fd5c8853 100644
--- a/website/versioned_docs/version-0.60/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.60/accessibilityinfo.md
@@ -11,49 +11,49 @@ Here's a small example illustrating how to use `AccessibilityInfo`:
class AccessibilityStatusExample extends React.Component {
state = {
reduceMotionEnabled: false,
- screenReaderEnabled: false
+ screenReaderEnabled: false,
};
componentDidMount() {
AccessibilityInfo.addEventListener(
'reduceMotionChanged',
- this._handleReduceMotionToggled
+ this._handleReduceMotionToggled,
);
AccessibilityInfo.addEventListener(
'screenReaderChanged',
- this._handleScreenReaderToggled
+ this._handleScreenReaderToggled,
);
AccessibilityInfo.isReduceMotionEnabled().then(
- (reduceMotionEnabled) => {
- this.setState({ reduceMotionEnabled });
- }
+ reduceMotionEnabled => {
+ this.setState({reduceMotionEnabled});
+ },
);
AccessibilityInfo.isScreenReaderEnabled().then(
- (screenReaderEnabled) => {
- this.setState({ screenReaderEnabled });
- }
+ screenReaderEnabled => {
+ this.setState({screenReaderEnabled});
+ },
);
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'reduceMotionChanged',
- this._handleReduceMotionToggled
+ this._handleReduceMotionToggled,
);
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
- this._handleScreenReaderToggled
+ this._handleScreenReaderToggled,
);
}
- _handleReduceMotionToggled = (reduceMotionEnabled) => {
- this.setState({ reduceMotionEnabled });
+ _handleReduceMotionToggled = reduceMotionEnabled => {
+ this.setState({reduceMotionEnabled});
};
- _handleScreenReaderToggled = (screenReaderEnabled) => {
- this.setState({ screenReaderEnabled });
+ _handleScreenReaderToggled = screenReaderEnabled => {
+ this.setState({screenReaderEnabled});
};
render() {
diff --git a/website/versioned_docs/version-0.60/actionsheetios.md b/website/versioned_docs/version-0.60/actionsheetios.md
index 6c6171825dc..9d55bd16baa 100644
--- a/website/versioned_docs/version-0.60/actionsheetios.md
+++ b/website/versioned_docs/version-0.60/actionsheetios.md
@@ -32,13 +32,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.60/alert.md b/website/versioned_docs/version-0.60/alert.md
index 6aed063465e..f731ece5a71 100644
--- a/website/versioned_docs/version-0.60/alert.md
+++ b/website/versioned_docs/version-0.60/alert.md
@@ -52,16 +52,16 @@ Alert.alert(
[
{
text: 'Ask me later',
- onPress: () => console.log('Ask me later pressed')
+ onPress: () => console.log('Ask me later pressed'),
},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
- { text: 'OK', onPress: () => console.log('OK Pressed') }
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
],
- { cancelable: false }
+ {cancelable: false},
);
```
diff --git a/website/versioned_docs/version-0.60/alertios.md b/website/versioned_docs/version-0.60/alertios.md
index 7b658aed4ec..c15902662b4 100644
--- a/website/versioned_docs/version-0.60/alertios.md
+++ b/website/versioned_docs/version-0.60/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.60/animated.md b/website/versioned_docs/version-0.60/animated.md
index 7d035af43cc..12a1ba07180 100644
--- a/website/versioned_docs/version-0.60/animated.md
+++ b/website/versioned_docs/version-0.60/animated.md
@@ -12,8 +12,8 @@ Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
{
- toValue: 1 // Animate to final value of 1
- }
+ toValue: 1, // Animate to final value of 1
+ },
).start(); // Start the animation
```
diff --git a/website/versioned_docs/version-0.60/animatedvaluexy.md b/website/versioned_docs/version-0.60/animatedvaluexy.md
index 0c0bba0a3dc..f89a4403120 100644
--- a/website/versioned_docs/version-0.60/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.60/animatedvaluexy.md
@@ -14,7 +14,7 @@ class DraggableView extends React.Component {
constructor(props) {
super(props);
this.state = {
- pan: new Animated.ValueXY() // inits to zero
+ pan: new Animated.ValueXY(), // inits to zero
};
this.state.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
@@ -22,15 +22,15 @@ class DraggableView extends React.Component {
null,
{
dx: this.state.pan.x, // x,y are Animated.Value
- dy: this.state.pan.y
- }
+ dy: this.state.pan.y,
+ },
]),
onPanResponderRelease: () => {
Animated.spring(
this.state.pan, // Auto-multiplexed
- { toValue: { x: 0, y: 0 } } // Back to zero
+ {toValue: {x: 0, y: 0}}, // Back to zero
).start();
- }
+ },
});
}
render() {
diff --git a/website/versioned_docs/version-0.60/animations.md b/website/versioned_docs/version-0.60/animations.md
index 0778c5a79b5..3052877e943 100644
--- a/website/versioned_docs/version-0.60/animations.md
+++ b/website/versioned_docs/version-0.60/animations.md
@@ -76,7 +76,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -93,19 +93,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -124,7 +124,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -137,7 +137,7 @@ A mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -160,7 +160,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -186,7 +186,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -197,12 +197,12 @@ value.interpolate({
Animated values can also track other values. Set the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -256,7 +256,7 @@ To use the native driver for normal animations add `useNativeDriver: true` to th
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -271,11 +271,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -297,10 +297,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
{this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.60/communication-ios.md b/website/versioned_docs/version-0.60/communication-ios.md
index ebd170512ee..287514f3208 100644
--- a/website/versioned_docs/version-0.60/communication-ios.md
+++ b/website/versioned_docs/version-0.60/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.60/custom-webview-android.md b/website/versioned_docs/version-0.60/custom-webview-android.md
index 0bbe9dae76d..44da28c6c6f 100644
--- a/website/versioned_docs/version-0.60/custom-webview-android.md
+++ b/website/versioned_docs/version-0.60/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
+
{
LayoutAnimation.configureNext(
- LayoutAnimation.Presets.spring
+ LayoutAnimation.Presets.spring,
);
- this.setState({ expanded: !this.state.expanded });
+ this.setState({expanded: !this.state.expanded});
}}>
Press me to{' '}
@@ -115,8 +115,8 @@ LayoutAnimation.configureNext(
LayoutAnimation.create(
500,
LayoutAnimation.Types.spring,
- LayoutAnimation.Properties.scaleXY
- )
+ LayoutAnimation.Properties.scaleXY,
+ ),
);
```
diff --git a/website/versioned_docs/version-0.60/linking.md b/website/versioned_docs/version-0.60/linking.md
index 21758cc23a2..a99c84e833e 100644
--- a/website/versioned_docs/version-0.60/linking.md
+++ b/website/versioned_docs/version-0.60/linking.md
@@ -97,8 +97,8 @@ _handleOpenURL(event) {
To start the corresponding activity for a link (web URL, email, contact etc.), call:
```jsx
-Linking.openURL(url).catch((err) =>
- console.error('An error occurred', err)
+Linking.openURL(url).catch(err =>
+ console.error('An error occurred', err),
);
```
@@ -106,14 +106,14 @@ If you want to check if any installed app can handle a given URL beforehand you
```jsx
Linking.canOpenURL(url)
- .then((supported) => {
+ .then(supported => {
if (!supported) {
console.log("Can't handle url: " + url);
} else {
return Linking.openURL(url);
}
})
- .catch((err) => console.error('An error occurred', err));
+ .catch(err => console.error('An error occurred', err));
```
---
diff --git a/website/versioned_docs/version-0.60/listview.md b/website/versioned_docs/version-0.60/listview.md
index eef187e6932..e483add4494 100644
--- a/website/versioned_docs/version-0.60/listview.md
+++ b/website/versioned_docs/version-0.60/listview.md
@@ -14,10 +14,10 @@ class MyComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({
- rowHasChanged: (r1, r2) => r1 !== r2
+ rowHasChanged: (r1, r2) => r1 !== r2,
});
this.state = {
- dataSource: ds.cloneWithRows(['row 1', 'row 2'])
+ dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
@@ -25,7 +25,7 @@ class MyComponent extends Component {
return (
{rowData} }
+ renderRow={rowData => {rowData} }
/>
);
}
@@ -249,7 +249,7 @@ See `ScrollView#scrollTo`.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.
diff --git a/website/versioned_docs/version-0.60/listviewdatasource.md b/website/versioned_docs/version-0.60/listviewdatasource.md
index 4e6d96f08c1..7e9265d23b5 100644
--- a/website/versioned_docs/version-0.60/listviewdatasource.md
+++ b/website/versioned_docs/version-0.60/listviewdatasource.md
@@ -92,7 +92,7 @@ Note: This function does NOT clone the data in this data source. It only passes
cloneWithRowsAndSections(
dataBlob,
sectionIdentities,
- rowIdentities
+ rowIdentities,
);
```
diff --git a/website/versioned_docs/version-0.60/maskedviewios.md b/website/versioned_docs/version-0.60/maskedviewios.md
index c7291e0097f..b7b2e8ad624 100644
--- a/website/versioned_docs/version-0.60/maskedviewios.md
+++ b/website/versioned_docs/version-0.60/maskedviewios.md
@@ -11,14 +11,14 @@ Renders the child view with a mask specified in the `maskElement` prop.
```jsx
import React from 'react';
-import { MaskedViewIOS, Text, View } from 'react-native';
+import {MaskedViewIOS, Text, View} from 'react-native';
class MyMaskedView extends React.Component {
render() {
return (
// Determines shape of the mask
Basic Mask
@@ -43,21 +43,21 @@ class MyMaskedView extends React.Component {
style={{
flex: 1,
height: '100%',
- backgroundColor: '#324376'
+ backgroundColor: '#324376',
}}
/>
diff --git a/website/versioned_docs/version-0.60/modal.md b/website/versioned_docs/version-0.60/modal.md
index 01555a4b4cb..b5f8d29c004 100644
--- a/website/versioned_docs/version-0.60/modal.md
+++ b/website/versioned_docs/version-0.60/modal.md
@@ -8,27 +8,27 @@ The Modal component is a basic way to present content above an enclosing view.
> Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
```jsx
-import React, { Component } from 'react';
+import React, {Component} from 'react';
import {
Modal,
Text,
TouchableHighlight,
View,
- Alert
+ Alert,
} from 'react-native';
class ModalExample extends Component {
state = {
- modalVisible: false
+ modalVisible: false,
};
setModalVisible(visible) {
- this.setState({ modalVisible: visible });
+ this.setState({modalVisible: visible});
}
render() {
return (
-
+
{
Alert.alert('Modal has been closed.');
}}>
-
+
Hello World!
diff --git a/website/versioned_docs/version-0.60/native-components-android.md b/website/versioned_docs/version-0.60/native-components-android.md
index b5367530875..a97f61c5ff9 100644
--- a/website/versioned_docs/version-0.60/native-components-android.md
+++ b/website/versioned_docs/version-0.60/native-components-android.md
@@ -101,7 +101,7 @@ The very final step is to create the JavaScript module that defines the interfac
```jsx
// ImageView.js
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
diff --git a/website/versioned_docs/version-0.60/native-components-ios.md b/website/versioned_docs/version-0.60/native-components-ios.md
index b5bfebfa51a..0d37a72a423 100644
--- a/website/versioned_docs/version-0.60/native-components-ios.md
+++ b/website/versioned_docs/version-0.60/native-components-ios.md
@@ -92,7 +92,7 @@ Now to actually disable zooming, we set the property in JS:
```jsx
// MyApp.js
-
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
diff --git a/website/versioned_docs/version-0.60/netinfo.md b/website/versioned_docs/version-0.60/netinfo.md
index f1f955b14a8..2cc848fedf6 100644
--- a/website/versioned_docs/version-0.60/netinfo.md
+++ b/website/versioned_docs/version-0.60/netinfo.md
@@ -8,12 +8,12 @@ title: 'đ§ NetInfo'
NetInfo exposes info about online/offline status
```jsx
-NetInfo.getConnectionInfo().then((connectionInfo) => {
+NetInfo.getConnectionInfo().then(connectionInfo => {
console.log(
'Initial, type: ' +
connectionInfo.type +
', effectiveType: ' +
- connectionInfo.effectiveType
+ connectionInfo.effectiveType,
);
});
function handleFirstConnectivityChange(connectionInfo) {
@@ -21,16 +21,16 @@ function handleFirstConnectivityChange(connectionInfo) {
'First change, type: ' +
connectionInfo.type +
', effectiveType: ' +
- connectionInfo.effectiveType
+ connectionInfo.effectiveType,
);
NetInfo.removeEventListener(
'connectionChange',
- handleFirstConnectivityChange
+ handleFirstConnectivityChange,
);
}
NetInfo.addEventListener(
'connectionChange',
- handleFirstConnectivityChange
+ handleFirstConnectivityChange,
);
```
diff --git a/website/versioned_docs/version-0.60/network.md b/website/versioned_docs/version-0.60/network.md
index 59c75ca445a..d469359cf38 100644
--- a/website/versioned_docs/version-0.60/network.md
+++ b/website/versioned_docs/version-0.60/network.md
@@ -24,12 +24,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -44,11 +44,11 @@ Networking is an inherently asynchronous operation. Fetch methods will return a
```jsx
function getMoviesFromApiAsync() {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((responseJson) => {
+ .then(response => response.json())
+ .then(responseJson => {
return responseJson.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
}
@@ -60,7 +60,7 @@ You can also use the proposed ES2017 `async`/`await` syntax in a React Native ap
async function getMoviesFromApi() {
try {
let response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
let responseJson = await response.json();
return responseJson.movies;
@@ -134,7 +134,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -164,17 +164,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.60/panresponder.md b/website/versioned_docs/version-0.60/panresponder.md
index c5fc0cbe2f8..92cf5163fce 100644
--- a/website/versioned_docs/version-0.60/panresponder.md
+++ b/website/versioned_docs/version-0.60/panresponder.md
@@ -78,7 +78,7 @@ class ExampleComponent extends Component {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
+ },
});
}
diff --git a/website/versioned_docs/version-0.60/permissionsandroid.md b/website/versioned_docs/version-0.60/permissionsandroid.md
index ffa2c74d173..79c5cb88260 100644
--- a/website/versioned_docs/version-0.60/permissionsandroid.md
+++ b/website/versioned_docs/version-0.60/permissionsandroid.md
@@ -19,7 +19,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil
### Example
```jsx
-import { PermissionsAndroid } from 'react-native';
+import {PermissionsAndroid} from 'react-native';
async function requestCameraPermission() {
try {
@@ -32,8 +32,8 @@ async function requestCameraPermission() {
'so you can take awesome pictures.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
- buttonPositive: 'OK'
- }
+ buttonPositive: 'OK',
+ },
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('You can use the camera');
diff --git a/website/versioned_docs/version-0.60/picker.md b/website/versioned_docs/version-0.60/picker.md
index 1b1bb4e92cc..2a182de5104 100644
--- a/website/versioned_docs/version-0.60/picker.md
+++ b/website/versioned_docs/version-0.60/picker.md
@@ -8,9 +8,9 @@ Renders the native picker component on Android and iOS. Example:
```jsx
- this.setState({ language: itemValue })
+ this.setState({language: itemValue})
}>
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blacklist: moduleMap } }
+ transform: {inlineRequires: {blacklist: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.60/scrollview.md b/website/versioned_docs/version-0.60/scrollview.md
index f90935d7566..1db3e362251 100644
--- a/website/versioned_docs/version-0.60/scrollview.md
+++ b/website/versioned_docs/version-0.60/scrollview.md
@@ -699,7 +699,7 @@ Note: The weird function signature is due to the fact that, for historical reaso
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.60/share.md b/website/versioned_docs/version-0.60/share.md
index 97c36b29318..45e78c8d8bb 100644
--- a/website/versioned_docs/version-0.60/share.md
+++ b/website/versioned_docs/version-0.60/share.md
@@ -65,15 +65,15 @@ _iOS Only_. The dialog has been dismissed.
## Basic Example
```jsx
-import React, { Component } from 'react';
-import { Share, Button } from 'react-native';
+import React, {Component} from 'react';
+import {Share, Button} from 'react-native';
class ShareExample extends Component {
onShare = async () => {
try {
const result = await Share.share({
message:
- 'React Native | A framework for building native apps using React'
+ 'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
diff --git a/website/versioned_docs/version-0.60/state.md b/website/versioned_docs/version-0.60/state.md
index b8791d8e6f2..c4c5614aaa6 100644
--- a/website/versioned_docs/version-0.60/state.md
+++ b/website/versioned_docs/version-0.60/state.md
@@ -10,46 +10,39 @@ In general, you should initialize `state` in the constructor, and then call `set
For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
```SnackPlayer name=State
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
-class Blink extends Component {
+const Blink = (props) => {
+ const [isShowingText, setIsShowingText] = useState(true);
- componentDidMount(){
- // Toggle the state every second
- setInterval(() => (
- this.setState(previousState => (
- { isShowingText: !previousState.isShowingText }
- ))
- ), 1000);
- }
-
- //state object
- state = { isShowingText: true };
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- render() {
- if (!this.state.isShowingText) {
- return null;
- }
+ return () => clearInterval(toggle);
+ });
- return (
- {this.props.text}
- );
+ if (!isShowingText) {
+ return null;
}
-}
-
-export default class BlinkApp extends Component {
- render() {
- return (
-
-
- );
- }
-}
+
+ return {props.text} ;
+};
+
+const BlinkApp = () => {
+ return (
+
+
+ );
+};
+
+export default BlinkApp;
```
In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
diff --git a/website/versioned_docs/version-0.60/stylesheet.md b/website/versioned_docs/version-0.60/stylesheet.md
index d8d1088222a..f9aa892ad7c 100644
--- a/website/versioned_docs/version-0.60/stylesheet.md
+++ b/website/versioned_docs/version-0.60/stylesheet.md
@@ -12,15 +12,15 @@ const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
- borderColor: '#d6d7da'
+ borderColor: '#d6d7da',
},
title: {
fontSize: 19,
- fontWeight: 'bold'
+ fontWeight: 'bold',
},
activeTitle: {
- color: 'red'
- }
+ color: 'red',
+ },
});
```
@@ -31,7 +31,7 @@ Use a StyleSheet:
@@ -87,11 +87,11 @@ var styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
- color: 'white'
+ color: 'white',
},
selectedListItem: {
- color: 'green'
- }
+ color: 'green',
+ },
});
StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
@@ -105,11 +105,11 @@ var styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
- color: 'white'
+ color: 'white',
},
selectedListItem: {
- color: 'green'
- }
+ color: 'green',
+ },
});
StyleSheet.flatten(styles.listItem);
@@ -139,8 +139,8 @@ This is defined as the width of a thin line on the platform. It can be used as t
var styles = StyleSheet.create({
separator: {
borderBottomColor: '#bbb',
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ },
});
```
@@ -157,8 +157,8 @@ A very common pattern is to create overlays with position absolute and zero posi
```jsx
const styles = StyleSheet.create({
wrapper: {
- ...StyleSheet.absoluteFill
- }
+ ...StyleSheet.absoluteFill,
+ },
});
```
@@ -173,8 +173,8 @@ const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
- backgroundColor: 'transparent'
- }
+ backgroundColor: 'transparent',
+ },
});
```
diff --git a/website/versioned_docs/version-0.60/testing-overview.md b/website/versioned_docs/version-0.60/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.60/testing-overview.md
+++ b/website/versioned_docs/version-0.60/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -171,9 +169,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
diff --git a/website/versioned_docs/version-0.60/timepickerandroid.md b/website/versioned_docs/version-0.60/timepickerandroid.md
index b93267fa5ef..dbbf753810d 100644
--- a/website/versioned_docs/version-0.60/timepickerandroid.md
+++ b/website/versioned_docs/version-0.60/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.60/toastandroid.md b/website/versioned_docs/version-0.60/toastandroid.md
index 49624c7a0bd..eea6e7d823e 100644
--- a/website/versioned_docs/version-0.60/toastandroid.md
+++ b/website/versioned_docs/version-0.60/toastandroid.md
@@ -15,23 +15,23 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th
Basic usage:
```jsx
-import { ToastAndroid } from 'react-native';
+import {ToastAndroid} from 'react-native';
ToastAndroid.show(
'A pikachu appeared nearby !',
- ToastAndroid.SHORT
+ ToastAndroid.SHORT,
);
ToastAndroid.showWithGravity(
'All Your Base Are Belong To Us',
ToastAndroid.SHORT,
- ToastAndroid.CENTER
+ ToastAndroid.CENTER,
);
ToastAndroid.showWithGravityAndOffset(
'A wild toast appeared!',
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
- 50
+ 50,
);
```
@@ -40,18 +40,18 @@ ToastAndroid.showWithGravityAndOffset(
The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
```jsx
-import React, { Component } from 'react';
-import { View, Button, ToastAndroid } from 'react-native';
+import React, {Component} from 'react';
+import {View, Button, ToastAndroid} from 'react-native';
// a component that calls the imperative ToastAndroid API
-const Toast = (props) => {
+const Toast = props => {
if (props.visible) {
ToastAndroid.showWithGravityAndOffset(
props.message,
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
- 50
+ 50,
);
return null;
}
@@ -62,24 +62,24 @@ class App extends Component {
constructor(props) {
super(props);
this.state = {
- visible: false
+ visible: false,
};
}
handleButtonPress = () => {
this.setState(
{
- visible: true
+ visible: true,
},
() => {
this.hideToast();
- }
+ },
);
};
hideToast = () => {
this.setState({
- visible: false
+ visible: false,
});
};
diff --git a/website/versioned_docs/version-0.60/touchablewithoutfeedback.md b/website/versioned_docs/version-0.60/touchablewithoutfeedback.md
index 67c0a60a54f..914f8291d1b 100644
--- a/website/versioned_docs/version-0.60/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.60/touchablewithoutfeedback.md
@@ -12,7 +12,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.60/typescript.md b/website/versioned_docs/version-0.60/typescript.md
index 8b918096c6e..3606ed54915 100644
--- a/website/versioned_docs/version-0.60/typescript.md
+++ b/website/versioned_docs/version-0.60/typescript.md
@@ -68,7 +68,14 @@ npm install --save-dev typescript @types/jest @types/react @types/react-native @
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
diff --git a/website/versioned_docs/version-0.60/usewindowdimensions.md b/website/versioned_docs/version-0.60/usewindowdimensions.md
index 62879cb4690..1b3768df476 100644
--- a/website/versioned_docs/version-0.60/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.60/usewindowdimensions.md
@@ -4,7 +4,7 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
diff --git a/website/versioned_docs/version-0.60/view.md b/website/versioned_docs/version-0.60/view.md
index 18d624e5e6b..c9bcd7684c0 100644
--- a/website/versioned_docs/version-0.60/view.md
+++ b/website/versioned_docs/version-0.60/view.md
@@ -17,10 +17,10 @@ class ViewColoredBoxesWithText extends Component {
style={{
flexDirection: 'row',
height: 100,
- padding: 20
+ padding: 20,
}}>
- Hello World!
);
diff --git a/website/versioned_docs/version-0.60/virtualizedlist.md b/website/versioned_docs/version-0.60/virtualizedlist.md
index f1a3795acc1..df8ded9e5ce 100644
--- a/website/versioned_docs/version-0.60/virtualizedlist.md
+++ b/website/versioned_docs/version-0.60/virtualizedlist.md
@@ -449,7 +449,7 @@ Set this when offset is needed for the loading indicator to show correctly.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.60/webview.md b/website/versioned_docs/version-0.60/webview.md
index 2c12ba78977..f0886d6e45f 100644
--- a/website/versioned_docs/version-0.60/webview.md
+++ b/website/versioned_docs/version-0.60/webview.md
@@ -8,17 +8,17 @@ title: 'đ§ WebView'
`WebView` renders web content in a native view.
```jsx
-import React, { Component } from 'react';
-import { WebView } from 'react-native';
+import React, {Component} from 'react';
+import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
Hello world' }}
+ source={{html: 'Hello world '}}
/>
);
}
diff --git a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-java.md
index 8e794281c57..c84c29d9d13 100644
--- a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-objc.md
index f42c7bec4d2..590bfc3c5b2 100644
--- a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-objc.md
@@ -178,16 +178,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -209,18 +204,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-swift.md
index a5964858da2..2c59effe06e 100644
--- a/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.61/_integration-with-exisiting-apps-swift.md
@@ -172,16 +172,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -203,18 +198,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.61/accessibility.md b/website/versioned_docs/version-0.61/accessibility.md
index 922bf900fc9..66de1067452 100644
--- a/website/versioned_docs/version-0.61/accessibility.md
+++ b/website/versioned_docs/version-0.61/accessibility.md
@@ -171,12 +171,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -218,11 +218,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -247,16 +247,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.61/accessibilityinfo.md b/website/versioned_docs/version-0.61/accessibilityinfo.md
index 5b97545678e..8b4fd5c8853 100644
--- a/website/versioned_docs/version-0.61/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.61/accessibilityinfo.md
@@ -11,49 +11,49 @@ Here's a small example illustrating how to use `AccessibilityInfo`:
class AccessibilityStatusExample extends React.Component {
state = {
reduceMotionEnabled: false,
- screenReaderEnabled: false
+ screenReaderEnabled: false,
};
componentDidMount() {
AccessibilityInfo.addEventListener(
'reduceMotionChanged',
- this._handleReduceMotionToggled
+ this._handleReduceMotionToggled,
);
AccessibilityInfo.addEventListener(
'screenReaderChanged',
- this._handleScreenReaderToggled
+ this._handleScreenReaderToggled,
);
AccessibilityInfo.isReduceMotionEnabled().then(
- (reduceMotionEnabled) => {
- this.setState({ reduceMotionEnabled });
- }
+ reduceMotionEnabled => {
+ this.setState({reduceMotionEnabled});
+ },
);
AccessibilityInfo.isScreenReaderEnabled().then(
- (screenReaderEnabled) => {
- this.setState({ screenReaderEnabled });
- }
+ screenReaderEnabled => {
+ this.setState({screenReaderEnabled});
+ },
);
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'reduceMotionChanged',
- this._handleReduceMotionToggled
+ this._handleReduceMotionToggled,
);
AccessibilityInfo.removeEventListener(
'screenReaderChanged',
- this._handleScreenReaderToggled
+ this._handleScreenReaderToggled,
);
}
- _handleReduceMotionToggled = (reduceMotionEnabled) => {
- this.setState({ reduceMotionEnabled });
+ _handleReduceMotionToggled = reduceMotionEnabled => {
+ this.setState({reduceMotionEnabled});
};
- _handleScreenReaderToggled = (screenReaderEnabled) => {
- this.setState({ screenReaderEnabled });
+ _handleScreenReaderToggled = screenReaderEnabled => {
+ this.setState({screenReaderEnabled});
};
render() {
diff --git a/website/versioned_docs/version-0.61/actionsheetios.md b/website/versioned_docs/version-0.61/actionsheetios.md
index 6c6171825dc..9d55bd16baa 100644
--- a/website/versioned_docs/version-0.61/actionsheetios.md
+++ b/website/versioned_docs/version-0.61/actionsheetios.md
@@ -32,13 +32,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.61/alert.md b/website/versioned_docs/version-0.61/alert.md
index 6aed063465e..f731ece5a71 100644
--- a/website/versioned_docs/version-0.61/alert.md
+++ b/website/versioned_docs/version-0.61/alert.md
@@ -52,16 +52,16 @@ Alert.alert(
[
{
text: 'Ask me later',
- onPress: () => console.log('Ask me later pressed')
+ onPress: () => console.log('Ask me later pressed'),
},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
- { text: 'OK', onPress: () => console.log('OK Pressed') }
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
],
- { cancelable: false }
+ {cancelable: false},
);
```
diff --git a/website/versioned_docs/version-0.61/alertios.md b/website/versioned_docs/version-0.61/alertios.md
index ff519d5b095..633925b0293 100644
--- a/website/versioned_docs/version-0.61/alertios.md
+++ b/website/versioned_docs/version-0.61/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.61/animated.md b/website/versioned_docs/version-0.61/animated.md
index 7d035af43cc..12a1ba07180 100644
--- a/website/versioned_docs/version-0.61/animated.md
+++ b/website/versioned_docs/version-0.61/animated.md
@@ -12,8 +12,8 @@ Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
{
- toValue: 1 // Animate to final value of 1
- }
+ toValue: 1, // Animate to final value of 1
+ },
).start(); // Start the animation
```
diff --git a/website/versioned_docs/version-0.61/animatedvaluexy.md b/website/versioned_docs/version-0.61/animatedvaluexy.md
index 0c0bba0a3dc..f89a4403120 100644
--- a/website/versioned_docs/version-0.61/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.61/animatedvaluexy.md
@@ -14,7 +14,7 @@ class DraggableView extends React.Component {
constructor(props) {
super(props);
this.state = {
- pan: new Animated.ValueXY() // inits to zero
+ pan: new Animated.ValueXY(), // inits to zero
};
this.state.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
@@ -22,15 +22,15 @@ class DraggableView extends React.Component {
null,
{
dx: this.state.pan.x, // x,y are Animated.Value
- dy: this.state.pan.y
- }
+ dy: this.state.pan.y,
+ },
]),
onPanResponderRelease: () => {
Animated.spring(
this.state.pan, // Auto-multiplexed
- { toValue: { x: 0, y: 0 } } // Back to zero
+ {toValue: {x: 0, y: 0}}, // Back to zero
).start();
- }
+ },
});
}
render() {
diff --git a/website/versioned_docs/version-0.61/animations.md b/website/versioned_docs/version-0.61/animations.md
index 0778c5a79b5..3052877e943 100644
--- a/website/versioned_docs/version-0.61/animations.md
+++ b/website/versioned_docs/version-0.61/animations.md
@@ -76,7 +76,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -93,19 +93,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -124,7 +124,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -137,7 +137,7 @@ A mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -160,7 +160,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -186,7 +186,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -197,12 +197,12 @@ value.interpolate({
Animated values can also track other values. Set the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -256,7 +256,7 @@ To use the native driver for normal animations add `useNativeDriver: true` to th
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -271,11 +271,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -297,10 +297,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
{this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.61/communication-ios.md b/website/versioned_docs/version-0.61/communication-ios.md
index ebd170512ee..287514f3208 100644
--- a/website/versioned_docs/version-0.61/communication-ios.md
+++ b/website/versioned_docs/version-0.61/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.61/custom-webview-android.md b/website/versioned_docs/version-0.61/custom-webview-android.md
index 0bbe9dae76d..44da28c6c6f 100644
--- a/website/versioned_docs/version-0.61/custom-webview-android.md
+++ b/website/versioned_docs/version-0.61/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
+
{
LayoutAnimation.configureNext(
- LayoutAnimation.Presets.spring
+ LayoutAnimation.Presets.spring,
);
- this.setState({ expanded: !this.state.expanded });
+ this.setState({expanded: !this.state.expanded});
}}>
Press me to{' '}
@@ -115,8 +115,8 @@ LayoutAnimation.configureNext(
LayoutAnimation.create(
500,
LayoutAnimation.Types.spring,
- LayoutAnimation.Properties.scaleXY
- )
+ LayoutAnimation.Properties.scaleXY,
+ ),
);
```
diff --git a/website/versioned_docs/version-0.61/linking.md b/website/versioned_docs/version-0.61/linking.md
index 21758cc23a2..a99c84e833e 100644
--- a/website/versioned_docs/version-0.61/linking.md
+++ b/website/versioned_docs/version-0.61/linking.md
@@ -97,8 +97,8 @@ _handleOpenURL(event) {
To start the corresponding activity for a link (web URL, email, contact etc.), call:
```jsx
-Linking.openURL(url).catch((err) =>
- console.error('An error occurred', err)
+Linking.openURL(url).catch(err =>
+ console.error('An error occurred', err),
);
```
@@ -106,14 +106,14 @@ If you want to check if any installed app can handle a given URL beforehand you
```jsx
Linking.canOpenURL(url)
- .then((supported) => {
+ .then(supported => {
if (!supported) {
console.log("Can't handle url: " + url);
} else {
return Linking.openURL(url);
}
})
- .catch((err) => console.error('An error occurred', err));
+ .catch(err => console.error('An error occurred', err));
```
---
diff --git a/website/versioned_docs/version-0.61/listview.md b/website/versioned_docs/version-0.61/listview.md
index 31a9ec8c341..5f8fa225c5e 100644
--- a/website/versioned_docs/version-0.61/listview.md
+++ b/website/versioned_docs/version-0.61/listview.md
@@ -14,10 +14,10 @@ class MyComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({
- rowHasChanged: (r1, r2) => r1 !== r2
+ rowHasChanged: (r1, r2) => r1 !== r2,
});
this.state = {
- dataSource: ds.cloneWithRows(['row 1', 'row 2'])
+ dataSource: ds.cloneWithRows(['row 1', 'row 2']),
};
}
@@ -25,7 +25,7 @@ class MyComponent extends Component {
return (
{rowData} }
+ renderRow={rowData => {rowData} }
/>
);
}
@@ -249,7 +249,7 @@ See `ScrollView#scrollTo`.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.
diff --git a/website/versioned_docs/version-0.61/listviewdatasource.md b/website/versioned_docs/version-0.61/listviewdatasource.md
index 4e6d96f08c1..7e9265d23b5 100644
--- a/website/versioned_docs/version-0.61/listviewdatasource.md
+++ b/website/versioned_docs/version-0.61/listviewdatasource.md
@@ -92,7 +92,7 @@ Note: This function does NOT clone the data in this data source. It only passes
cloneWithRowsAndSections(
dataBlob,
sectionIdentities,
- rowIdentities
+ rowIdentities,
);
```
diff --git a/website/versioned_docs/version-0.61/maskedviewios.md b/website/versioned_docs/version-0.61/maskedviewios.md
index c7291e0097f..b7b2e8ad624 100644
--- a/website/versioned_docs/version-0.61/maskedviewios.md
+++ b/website/versioned_docs/version-0.61/maskedviewios.md
@@ -11,14 +11,14 @@ Renders the child view with a mask specified in the `maskElement` prop.
```jsx
import React from 'react';
-import { MaskedViewIOS, Text, View } from 'react-native';
+import {MaskedViewIOS, Text, View} from 'react-native';
class MyMaskedView extends React.Component {
render() {
return (
// Determines shape of the mask
Basic Mask
@@ -43,21 +43,21 @@ class MyMaskedView extends React.Component {
style={{
flex: 1,
height: '100%',
- backgroundColor: '#324376'
+ backgroundColor: '#324376',
}}
/>
diff --git a/website/versioned_docs/version-0.61/modal.md b/website/versioned_docs/version-0.61/modal.md
index 01555a4b4cb..b5f8d29c004 100644
--- a/website/versioned_docs/version-0.61/modal.md
+++ b/website/versioned_docs/version-0.61/modal.md
@@ -8,27 +8,27 @@ The Modal component is a basic way to present content above an enclosing view.
> Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
```jsx
-import React, { Component } from 'react';
+import React, {Component} from 'react';
import {
Modal,
Text,
TouchableHighlight,
View,
- Alert
+ Alert,
} from 'react-native';
class ModalExample extends Component {
state = {
- modalVisible: false
+ modalVisible: false,
};
setModalVisible(visible) {
- this.setState({ modalVisible: visible });
+ this.setState({modalVisible: visible});
}
render() {
return (
-
+
{
Alert.alert('Modal has been closed.');
}}>
-
+
Hello World!
diff --git a/website/versioned_docs/version-0.61/native-components-android.md b/website/versioned_docs/version-0.61/native-components-android.md
index b5367530875..a97f61c5ff9 100644
--- a/website/versioned_docs/version-0.61/native-components-android.md
+++ b/website/versioned_docs/version-0.61/native-components-android.md
@@ -101,7 +101,7 @@ The very final step is to create the JavaScript module that defines the interfac
```jsx
// ImageView.js
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
diff --git a/website/versioned_docs/version-0.61/native-components-ios.md b/website/versioned_docs/version-0.61/native-components-ios.md
index fb625cb0cf3..db6e61257df 100644
--- a/website/versioned_docs/version-0.61/native-components-ios.md
+++ b/website/versioned_docs/version-0.61/native-components-ios.md
@@ -92,7 +92,7 @@ Now to actually disable zooming, we set the property in JS:
```jsx
// MyApp.js
-
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
diff --git a/website/versioned_docs/version-0.61/netinfo.md b/website/versioned_docs/version-0.61/netinfo.md
index f387ce82bed..be5ef770073 100644
--- a/website/versioned_docs/version-0.61/netinfo.md
+++ b/website/versioned_docs/version-0.61/netinfo.md
@@ -8,12 +8,12 @@ title: 'đ§ NetInfo'
NetInfo exposes info about online/offline status
```jsx
-NetInfo.getConnectionInfo().then((connectionInfo) => {
+NetInfo.getConnectionInfo().then(connectionInfo => {
console.log(
'Initial, type: ' +
connectionInfo.type +
', effectiveType: ' +
- connectionInfo.effectiveType
+ connectionInfo.effectiveType,
);
});
function handleFirstConnectivityChange(connectionInfo) {
@@ -21,16 +21,16 @@ function handleFirstConnectivityChange(connectionInfo) {
'First change, type: ' +
connectionInfo.type +
', effectiveType: ' +
- connectionInfo.effectiveType
+ connectionInfo.effectiveType,
);
NetInfo.removeEventListener(
'connectionChange',
- handleFirstConnectivityChange
+ handleFirstConnectivityChange,
);
}
NetInfo.addEventListener(
'connectionChange',
- handleFirstConnectivityChange
+ handleFirstConnectivityChange,
);
```
diff --git a/website/versioned_docs/version-0.61/network.md b/website/versioned_docs/version-0.61/network.md
index 59c75ca445a..d469359cf38 100644
--- a/website/versioned_docs/version-0.61/network.md
+++ b/website/versioned_docs/version-0.61/network.md
@@ -24,12 +24,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -44,11 +44,11 @@ Networking is an inherently asynchronous operation. Fetch methods will return a
```jsx
function getMoviesFromApiAsync() {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((responseJson) => {
+ .then(response => response.json())
+ .then(responseJson => {
return responseJson.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
}
@@ -60,7 +60,7 @@ You can also use the proposed ES2017 `async`/`await` syntax in a React Native ap
async function getMoviesFromApi() {
try {
let response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
let responseJson = await response.json();
return responseJson.movies;
@@ -134,7 +134,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -164,17 +164,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.61/panresponder.md b/website/versioned_docs/version-0.61/panresponder.md
index c5fc0cbe2f8..92cf5163fce 100644
--- a/website/versioned_docs/version-0.61/panresponder.md
+++ b/website/versioned_docs/version-0.61/panresponder.md
@@ -78,7 +78,7 @@ class ExampleComponent extends Component {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
+ },
});
}
diff --git a/website/versioned_docs/version-0.61/permissionsandroid.md b/website/versioned_docs/version-0.61/permissionsandroid.md
index ffa2c74d173..79c5cb88260 100644
--- a/website/versioned_docs/version-0.61/permissionsandroid.md
+++ b/website/versioned_docs/version-0.61/permissionsandroid.md
@@ -19,7 +19,7 @@ If a user has previously turned off a permission that you prompt for, the OS wil
### Example
```jsx
-import { PermissionsAndroid } from 'react-native';
+import {PermissionsAndroid} from 'react-native';
async function requestCameraPermission() {
try {
@@ -32,8 +32,8 @@ async function requestCameraPermission() {
'so you can take awesome pictures.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
- buttonPositive: 'OK'
- }
+ buttonPositive: 'OK',
+ },
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('You can use the camera');
diff --git a/website/versioned_docs/version-0.61/picker.md b/website/versioned_docs/version-0.61/picker.md
index 1b1bb4e92cc..2a182de5104 100644
--- a/website/versioned_docs/version-0.61/picker.md
+++ b/website/versioned_docs/version-0.61/picker.md
@@ -8,9 +8,9 @@ Renders the native picker component on Android and iOS. Example:
```jsx
- this.setState({ language: itemValue })
+ this.setState({language: itemValue})
}>
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blacklist: moduleMap } }
+ transform: {inlineRequires: {blacklist: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.61/scrollview.md b/website/versioned_docs/version-0.61/scrollview.md
index f90935d7566..1db3e362251 100644
--- a/website/versioned_docs/version-0.61/scrollview.md
+++ b/website/versioned_docs/version-0.61/scrollview.md
@@ -699,7 +699,7 @@ Note: The weird function signature is due to the fact that, for historical reaso
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.61/share.md b/website/versioned_docs/version-0.61/share.md
index 97c36b29318..45e78c8d8bb 100644
--- a/website/versioned_docs/version-0.61/share.md
+++ b/website/versioned_docs/version-0.61/share.md
@@ -65,15 +65,15 @@ _iOS Only_. The dialog has been dismissed.
## Basic Example
```jsx
-import React, { Component } from 'react';
-import { Share, Button } from 'react-native';
+import React, {Component} from 'react';
+import {Share, Button} from 'react-native';
class ShareExample extends Component {
onShare = async () => {
try {
const result = await Share.share({
message:
- 'React Native | A framework for building native apps using React'
+ 'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
diff --git a/website/versioned_docs/version-0.61/state.md b/website/versioned_docs/version-0.61/state.md
index b8791d8e6f2..c4c5614aaa6 100644
--- a/website/versioned_docs/version-0.61/state.md
+++ b/website/versioned_docs/version-0.61/state.md
@@ -10,46 +10,39 @@ In general, you should initialize `state` in the constructor, and then call `set
For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
```SnackPlayer name=State
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
-class Blink extends Component {
+const Blink = (props) => {
+ const [isShowingText, setIsShowingText] = useState(true);
- componentDidMount(){
- // Toggle the state every second
- setInterval(() => (
- this.setState(previousState => (
- { isShowingText: !previousState.isShowingText }
- ))
- ), 1000);
- }
-
- //state object
- state = { isShowingText: true };
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- render() {
- if (!this.state.isShowingText) {
- return null;
- }
+ return () => clearInterval(toggle);
+ });
- return (
- {this.props.text}
- );
+ if (!isShowingText) {
+ return null;
}
-}
-
-export default class BlinkApp extends Component {
- render() {
- return (
-
-
- );
- }
-}
+
+ return {props.text} ;
+};
+
+const BlinkApp = () => {
+ return (
+
+
+ );
+};
+
+export default BlinkApp;
```
In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
diff --git a/website/versioned_docs/version-0.61/stylesheet.md b/website/versioned_docs/version-0.61/stylesheet.md
index d8d1088222a..f9aa892ad7c 100644
--- a/website/versioned_docs/version-0.61/stylesheet.md
+++ b/website/versioned_docs/version-0.61/stylesheet.md
@@ -12,15 +12,15 @@ const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
- borderColor: '#d6d7da'
+ borderColor: '#d6d7da',
},
title: {
fontSize: 19,
- fontWeight: 'bold'
+ fontWeight: 'bold',
},
activeTitle: {
- color: 'red'
- }
+ color: 'red',
+ },
});
```
@@ -31,7 +31,7 @@ Use a StyleSheet:
@@ -87,11 +87,11 @@ var styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
- color: 'white'
+ color: 'white',
},
selectedListItem: {
- color: 'green'
- }
+ color: 'green',
+ },
});
StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
@@ -105,11 +105,11 @@ var styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
- color: 'white'
+ color: 'white',
},
selectedListItem: {
- color: 'green'
- }
+ color: 'green',
+ },
});
StyleSheet.flatten(styles.listItem);
@@ -139,8 +139,8 @@ This is defined as the width of a thin line on the platform. It can be used as t
var styles = StyleSheet.create({
separator: {
borderBottomColor: '#bbb',
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ },
});
```
@@ -157,8 +157,8 @@ A very common pattern is to create overlays with position absolute and zero posi
```jsx
const styles = StyleSheet.create({
wrapper: {
- ...StyleSheet.absoluteFill
- }
+ ...StyleSheet.absoluteFill,
+ },
});
```
@@ -173,8 +173,8 @@ const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
- backgroundColor: 'transparent'
- }
+ backgroundColor: 'transparent',
+ },
});
```
diff --git a/website/versioned_docs/version-0.61/testing-overview.md b/website/versioned_docs/version-0.61/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.61/testing-overview.md
+++ b/website/versioned_docs/version-0.61/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -171,9 +169,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
diff --git a/website/versioned_docs/version-0.61/timepickerandroid.md b/website/versioned_docs/version-0.61/timepickerandroid.md
index d23407fa490..91b3e1e8d2a 100644
--- a/website/versioned_docs/version-0.61/timepickerandroid.md
+++ b/website/versioned_docs/version-0.61/timepickerandroid.md
@@ -13,15 +13,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.61/toastandroid.md b/website/versioned_docs/version-0.61/toastandroid.md
index 49624c7a0bd..eea6e7d823e 100644
--- a/website/versioned_docs/version-0.61/toastandroid.md
+++ b/website/versioned_docs/version-0.61/toastandroid.md
@@ -15,23 +15,23 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th
Basic usage:
```jsx
-import { ToastAndroid } from 'react-native';
+import {ToastAndroid} from 'react-native';
ToastAndroid.show(
'A pikachu appeared nearby !',
- ToastAndroid.SHORT
+ ToastAndroid.SHORT,
);
ToastAndroid.showWithGravity(
'All Your Base Are Belong To Us',
ToastAndroid.SHORT,
- ToastAndroid.CENTER
+ ToastAndroid.CENTER,
);
ToastAndroid.showWithGravityAndOffset(
'A wild toast appeared!',
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
- 50
+ 50,
);
```
@@ -40,18 +40,18 @@ ToastAndroid.showWithGravityAndOffset(
The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
```jsx
-import React, { Component } from 'react';
-import { View, Button, ToastAndroid } from 'react-native';
+import React, {Component} from 'react';
+import {View, Button, ToastAndroid} from 'react-native';
// a component that calls the imperative ToastAndroid API
-const Toast = (props) => {
+const Toast = props => {
if (props.visible) {
ToastAndroid.showWithGravityAndOffset(
props.message,
ToastAndroid.LONG,
ToastAndroid.BOTTOM,
25,
- 50
+ 50,
);
return null;
}
@@ -62,24 +62,24 @@ class App extends Component {
constructor(props) {
super(props);
this.state = {
- visible: false
+ visible: false,
};
}
handleButtonPress = () => {
this.setState(
{
- visible: true
+ visible: true,
},
() => {
this.hideToast();
- }
+ },
);
};
hideToast = () => {
this.setState({
- visible: false
+ visible: false,
});
};
diff --git a/website/versioned_docs/version-0.61/touchablewithoutfeedback.md b/website/versioned_docs/version-0.61/touchablewithoutfeedback.md
index 67c0a60a54f..914f8291d1b 100644
--- a/website/versioned_docs/version-0.61/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.61/touchablewithoutfeedback.md
@@ -12,7 +12,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.61/typescript.md b/website/versioned_docs/version-0.61/typescript.md
index be0cb75c8fd..469f5f2a229 100644
--- a/website/versioned_docs/version-0.61/typescript.md
+++ b/website/versioned_docs/version-0.61/typescript.md
@@ -68,7 +68,14 @@ npm install --save-dev typescript @types/jest @types/react @types/react-native @
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
diff --git a/website/versioned_docs/version-0.61/usewindowdimensions.md b/website/versioned_docs/version-0.61/usewindowdimensions.md
index 944e18a524a..9096ed9036f 100644
--- a/website/versioned_docs/version-0.61/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.61/usewindowdimensions.md
@@ -4,7 +4,7 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
diff --git a/website/versioned_docs/version-0.61/view.md b/website/versioned_docs/version-0.61/view.md
index 18d624e5e6b..c9bcd7684c0 100644
--- a/website/versioned_docs/version-0.61/view.md
+++ b/website/versioned_docs/version-0.61/view.md
@@ -17,10 +17,10 @@ class ViewColoredBoxesWithText extends Component {
style={{
flexDirection: 'row',
height: 100,
- padding: 20
+ padding: 20,
}}>
- Hello World!
);
diff --git a/website/versioned_docs/version-0.61/virtualizedlist.md b/website/versioned_docs/version-0.61/virtualizedlist.md
index f1a3795acc1..df8ded9e5ce 100644
--- a/website/versioned_docs/version-0.61/virtualizedlist.md
+++ b/website/versioned_docs/version-0.61/virtualizedlist.md
@@ -449,7 +449,7 @@ Set this when offset is needed for the loading indicator to show correctly.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.61/webview.md b/website/versioned_docs/version-0.61/webview.md
index 2c12ba78977..f0886d6e45f 100644
--- a/website/versioned_docs/version-0.61/webview.md
+++ b/website/versioned_docs/version-0.61/webview.md
@@ -8,17 +8,17 @@ title: 'đ§ WebView'
`WebView` renders web content in a native view.
```jsx
-import React, { Component } from 'react';
-import { WebView } from 'react-native';
+import React, {Component} from 'react';
+import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
Hello world' }}
+ source={{html: 'Hello world '}}
/>
);
}
diff --git a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-java.md
index 32f08877423..662e1982d03 100644
--- a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-objc.md
index bc58ec92a7c..f8b0f161ef0 100644
--- a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-objc.md
@@ -178,16 +178,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -209,18 +204,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-swift.md
index 3262f14dca5..73446996658 100644
--- a/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.62/_integration-with-exisiting-apps-swift.md
@@ -172,16 +172,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -203,18 +198,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.62/accessibility.md b/website/versioned_docs/version-0.62/accessibility.md
index 58bfbf1efba..9e1380daf0f 100644
--- a/website/versioned_docs/version-0.62/accessibility.md
+++ b/website/versioned_docs/version-0.62/accessibility.md
@@ -184,12 +184,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -231,11 +231,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -260,16 +260,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.62/actionsheetios.md b/website/versioned_docs/version-0.62/actionsheetios.md
index f17522c13cb..dcdfb7e854c 100644
--- a/website/versioned_docs/version-0.62/actionsheetios.md
+++ b/website/versioned_docs/version-0.62/actionsheetios.md
@@ -81,13 +81,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.62/alert.md b/website/versioned_docs/version-0.62/alert.md
index 30cd095ba9b..c36a1088c29 100644
--- a/website/versioned_docs/version-0.62/alert.md
+++ b/website/versioned_docs/version-0.62/alert.md
@@ -167,16 +167,16 @@ Alert.alert(
[
{
text: 'Ask me later',
- onPress: () => console.log('Ask me later pressed')
+ onPress: () => console.log('Ask me later pressed'),
},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
- { text: 'OK', onPress: () => console.log('OK Pressed') }
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
],
- { cancelable: false }
+ {cancelable: false},
);
```
diff --git a/website/versioned_docs/version-0.62/alertios.md b/website/versioned_docs/version-0.62/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.62/alertios.md
+++ b/website/versioned_docs/version-0.62/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.62/animated.md b/website/versioned_docs/version-0.62/animated.md
index 90d914bd682..9298bee71b0 100644
--- a/website/versioned_docs/version-0.62/animated.md
+++ b/website/versioned_docs/version-0.62/animated.md
@@ -203,7 +203,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -539,7 +539,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.62/animatedvaluexy.md b/website/versioned_docs/version-0.62/animatedvaluexy.md
index fd80cde633a..328e70638fa 100644
--- a/website/versioned_docs/version-0.62/animatedvaluexy.md
+++ b/website/versioned_docs/version-0.62/animatedvaluexy.md
@@ -14,7 +14,7 @@ class DraggableView extends React.Component {
constructor(props) {
super(props);
this.state = {
- pan: new Animated.ValueXY() // inits to zero
+ pan: new Animated.ValueXY(), // inits to zero
};
this.state.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
@@ -22,15 +22,15 @@ class DraggableView extends React.Component {
null,
{
dx: this.state.pan.x, // x,y are Animated.Value
- dy: this.state.pan.y
- }
+ dy: this.state.pan.y,
+ },
]),
onPanResponderRelease: () => {
Animated.spring(
this.state.pan, // Auto-multiplexed
- { toValue: { x: 0, y: 0 } } // Back to zero
+ {toValue: {x: 0, y: 0}}, // Back to zero
).start();
- }
+ },
});
}
render() {
diff --git a/website/versioned_docs/version-0.62/animations.md b/website/versioned_docs/version-0.62/animations.md
index 8822d8c54c6..348e55dee8c 100644
--- a/website/versioned_docs/version-0.62/animations.md
+++ b/website/versioned_docs/version-0.62/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -681,7 +681,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -696,11 +696,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -722,10 +722,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.62/asyncstorage.md b/website/versioned_docs/version-0.62/asyncstorage.md
index c94bfe7e7e4..cc810364862 100644
--- a/website/versioned_docs/version-0.62/asyncstorage.md
+++ b/website/versioned_docs/version-0.62/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.62/building-for-tv.md b/website/versioned_docs/version-0.62/building-for-tv.md
index df411f6c6a0..e12cb837ff0 100644
--- a/website/versioned_docs/version-0.62/building-for-tv.md
+++ b/website/versioned_docs/version-0.62/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.62/communication-android.md b/website/versioned_docs/version-0.62/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.62/communication-android.md
+++ b/website/versioned_docs/version-0.62/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.62/communication-ios.md b/website/versioned_docs/version-0.62/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.62/communication-ios.md
+++ b/website/versioned_docs/version-0.62/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.62/custom-webview-android.md b/website/versioned_docs/version-0.62/custom-webview-android.md
index 0bbe9dae76d..44da28c6c6f 100644
--- a/website/versioned_docs/version-0.62/custom-webview-android.md
+++ b/website/versioned_docs/version-0.62/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
{rowData} }
+ renderRow={rowData => {rowData} }
/>
);
}
@@ -249,7 +249,7 @@ See `ScrollView#scrollTo`.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.
diff --git a/website/versioned_docs/version-0.62/listviewdatasource.md b/website/versioned_docs/version-0.62/listviewdatasource.md
index 4e6d96f08c1..7e9265d23b5 100644
--- a/website/versioned_docs/version-0.62/listviewdatasource.md
+++ b/website/versioned_docs/version-0.62/listviewdatasource.md
@@ -92,7 +92,7 @@ Note: This function does NOT clone the data in this data source. It only passes
cloneWithRowsAndSections(
dataBlob,
sectionIdentities,
- rowIdentities
+ rowIdentities,
);
```
diff --git a/website/versioned_docs/version-0.62/maskedviewios.md b/website/versioned_docs/version-0.62/maskedviewios.md
index c7291e0097f..b7b2e8ad624 100644
--- a/website/versioned_docs/version-0.62/maskedviewios.md
+++ b/website/versioned_docs/version-0.62/maskedviewios.md
@@ -11,14 +11,14 @@ Renders the child view with a mask specified in the `maskElement` prop.
```jsx
import React from 'react';
-import { MaskedViewIOS, Text, View } from 'react-native';
+import {MaskedViewIOS, Text, View} from 'react-native';
class MyMaskedView extends React.Component {
render() {
return (
// Determines shape of the mask
Basic Mask
@@ -43,21 +43,21 @@ class MyMaskedView extends React.Component {
style={{
flex: 1,
height: '100%',
- backgroundColor: '#324376'
+ backgroundColor: '#324376',
}}
/>
diff --git a/website/versioned_docs/version-0.62/native-components-android.md b/website/versioned_docs/version-0.62/native-components-android.md
index 616927bf8f0..136e4f60b49 100644
--- a/website/versioned_docs/version-0.62/native-components-android.md
+++ b/website/versioned_docs/version-0.62/native-components-android.md
@@ -108,7 +108,7 @@ The very final step is to create the JavaScript module that defines the interfac
```jsx
// ImageView.js
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
diff --git a/website/versioned_docs/version-0.62/native-components-ios.md b/website/versioned_docs/version-0.62/native-components-ios.md
index de6071629f8..f2a92acb06e 100644
--- a/website/versioned_docs/version-0.62/native-components-ios.md
+++ b/website/versioned_docs/version-0.62/native-components-ios.md
@@ -92,7 +92,7 @@ Now to actually disable zooming, we set the property in JS:
```jsx
// MyApp.js
-
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
diff --git a/website/versioned_docs/version-0.62/network.md b/website/versioned_docs/version-0.62/network.md
index 8a5c832719c..c10e7f04de5 100644
--- a/website/versioned_docs/version-0.62/network.md
+++ b/website/versioned_docs/version-0.62/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch methods will return a
```jsx
function getMoviesFromApi() {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
}
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
async function getMoviesFromApiAsync() {
try {
let response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
let json = await response.json();
return json.movies;
@@ -169,7 +169,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -199,17 +199,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.62/panresponder.md b/website/versioned_docs/version-0.62/panresponder.md
index 2dd72add301..1ced82d609d 100644
--- a/website/versioned_docs/version-0.62/panresponder.md
+++ b/website/versioned_docs/version-0.62/panresponder.md
@@ -79,8 +79,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blacklist: moduleMap } }
+ transform: {inlineRequires: {blacklist: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.62/scrollview.md b/website/versioned_docs/version-0.62/scrollview.md
index f34b271e12d..1ec564c6b32 100644
--- a/website/versioned_docs/version-0.62/scrollview.md
+++ b/website/versioned_docs/version-0.62/scrollview.md
@@ -723,7 +723,7 @@ Note: The weird function signature is due to the fact that, for historical reaso
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.62/state.md b/website/versioned_docs/version-0.62/state.md
index 6f5c4e8647b..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.62/state.md
+++ b/website/versioned_docs/version-0.62/state.md
@@ -16,31 +16,33 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
-export default function BlinkApp() {
+const BlinkApp = () => {
return (
-
-
+
);
-}
+};
+
+export default BlinkApp;
```
In a real application, you probably won't be setting state with a timer. You might set state when you have new data from the server, or from user input. You can also use a state container like [Redux](https://redux.js.org/) or [MobX](https://mobx.js.org/) to control your data flow. In that case you would use Redux or MobX to modify your state rather than calling `setState` directly.
diff --git a/website/versioned_docs/version-0.62/testing-overview.md b/website/versioned_docs/version-0.62/testing-overview.md
index 918da124a89..93fed7a6ce9 100644
--- a/website/versioned_docs/version-0.62/testing-overview.md
+++ b/website/versioned_docs/version-0.62/testing-overview.md
@@ -152,13 +152,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -185,13 +185,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -226,9 +224,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
diff --git a/website/versioned_docs/version-0.62/timepickerandroid.md b/website/versioned_docs/version-0.62/timepickerandroid.md
index dd82974a085..b4aedcce893 100644
--- a/website/versioned_docs/version-0.62/timepickerandroid.md
+++ b/website/versioned_docs/version-0.62/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.62/touchablehighlight.md b/website/versioned_docs/version-0.62/touchablehighlight.md
index d492ad2b3d1..4be2b4ff692 100644
--- a/website/versioned_docs/version-0.62/touchablehighlight.md
+++ b/website/versioned_docs/version-0.62/touchablehighlight.md
@@ -14,7 +14,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.62/touchablewithoutfeedback.md b/website/versioned_docs/version-0.62/touchablewithoutfeedback.md
index 40e3cc50810..f25908d3a0b 100644
--- a/website/versioned_docs/version-0.62/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.62/touchablewithoutfeedback.md
@@ -12,7 +12,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.62/transforms.md b/website/versioned_docs/version-0.62/transforms.md
index 1993b7272f4..15dceff34b1 100644
--- a/website/versioned_docs/version-0.62/transforms.md
+++ b/website/versioned_docs/version-0.62/transforms.md
@@ -271,13 +271,13 @@ const styles = StyleSheet.create({
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.62/typescript.md b/website/versioned_docs/version-0.62/typescript.md
index ff18fff096e..d15719f3a0e 100644
--- a/website/versioned_docs/version-0.62/typescript.md
+++ b/website/versioned_docs/version-0.62/typescript.md
@@ -69,7 +69,14 @@ npm install --save-dev typescript @types/jest @types/react @types/react-native @
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -90,16 +97,16 @@ You can provide an interface for a React Component's [Props]](props) and [State]
```tsx
// components/Hello.tsx
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
-const Hello: React.FC = (props) => {
+const Hello: React.FC = props => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- props.enthusiasmLevel
+ props.enthusiasmLevel,
);
const onIncrement = () =>
@@ -143,23 +150,23 @@ const Hello: React.FC = (props) => {
const styles = StyleSheet.create({
root: {
alignItems: 'center',
- alignSelf: 'center'
+ alignSelf: 'center',
},
buttons: {
flexDirection: 'row',
minHeight: 70,
alignItems: 'stretch',
alignSelf: 'center',
- borderWidth: 5
+ borderWidth: 5,
},
button: {
flex: 1,
- paddingVertical: 0
+ paddingVertical: 0,
},
greeting: {
color: '#999',
- fontWeight: 'bold'
- }
+ fontWeight: 'bold',
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.62/usecolorscheme.md b/website/versioned_docs/version-0.62/usecolorscheme.md
index a149097440a..6419780d809 100644
--- a/website/versioned_docs/version-0.62/usecolorscheme.md
+++ b/website/versioned_docs/version-0.62/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
@@ -16,7 +16,7 @@ Supported color schemes:
- null: The user has not indicated a preferred color theme.
```jsx
-import { Text, useColorScheme } from 'react-native';
+import {Text, useColorScheme} from 'react-native';
const MyComponent = () => {
const colorScheme = useColorScheme();
diff --git a/website/versioned_docs/version-0.62/usewindowdimensions.md b/website/versioned_docs/version-0.62/usewindowdimensions.md
index 6abad717ffe..2ee8fe0a3cc 100644
--- a/website/versioned_docs/version-0.62/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.62/usewindowdimensions.md
@@ -4,7 +4,7 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
diff --git a/website/versioned_docs/version-0.62/virtualizedlist.md b/website/versioned_docs/version-0.62/virtualizedlist.md
index 009bbffc668..6b71909718a 100644
--- a/website/versioned_docs/version-0.62/virtualizedlist.md
+++ b/website/versioned_docs/version-0.62/virtualizedlist.md
@@ -517,7 +517,7 @@ Set this when offset is needed for the loading indicator to show correctly.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.62/webview.md b/website/versioned_docs/version-0.62/webview.md
index 2c12ba78977..f0886d6e45f 100644
--- a/website/versioned_docs/version-0.62/webview.md
+++ b/website/versioned_docs/version-0.62/webview.md
@@ -8,17 +8,17 @@ title: 'đ§ WebView'
`WebView` renders web content in a native view.
```jsx
-import React, { Component } from 'react';
-import { WebView } from 'react-native';
+import React, {Component} from 'react';
+import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
Hello world' }}
+ source={{html: 'Hello world '}}
/>
);
}
diff --git a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-java.md
index 32f08877423..662e1982d03 100644
--- a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-objc.md
index bc58ec92a7c..f8b0f161ef0 100644
--- a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-objc.md
@@ -178,16 +178,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -209,18 +204,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-swift.md
index 3262f14dca5..73446996658 100644
--- a/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.63/_integration-with-exisiting-apps-swift.md
@@ -172,16 +172,11 @@ In your `index.js`, create your component. In our sample here, we will add a ` (
+ var contents = this.props['scores'].map(score => (
{score.name}:{score.value}
{'\n'}
@@ -203,18 +198,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.63/accessibility.md b/website/versioned_docs/version-0.63/accessibility.md
index 7d2e133bbe3..118e1c3d6b8 100644
--- a/website/versioned_docs/version-0.63/accessibility.md
+++ b/website/versioned_docs/version-0.63/accessibility.md
@@ -173,12 +173,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -232,11 +232,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -261,16 +261,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.63/actionsheetios.md b/website/versioned_docs/version-0.63/actionsheetios.md
index 275781de70c..4a05c48d885 100644
--- a/website/versioned_docs/version-0.63/actionsheetios.md
+++ b/website/versioned_docs/version-0.63/actionsheetios.md
@@ -85,13 +85,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.63/alert.md b/website/versioned_docs/version-0.63/alert.md
index b5daaaaf445..aa56429fb27 100644
--- a/website/versioned_docs/version-0.63/alert.md
+++ b/website/versioned_docs/version-0.63/alert.md
@@ -171,16 +171,16 @@ Alert.alert(
[
{
text: 'Ask me later',
- onPress: () => console.log('Ask me later pressed')
+ onPress: () => console.log('Ask me later pressed'),
},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
- { text: 'OK', onPress: () => console.log('OK Pressed') }
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
],
- { cancelable: false }
+ {cancelable: false},
);
```
diff --git a/website/versioned_docs/version-0.63/alertios.md b/website/versioned_docs/version-0.63/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.63/alertios.md
+++ b/website/versioned_docs/version-0.63/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.63/animated.md b/website/versioned_docs/version-0.63/animated.md
index 62c38456292..34445fe5d8c 100644
--- a/website/versioned_docs/version-0.63/animated.md
+++ b/website/versioned_docs/version-0.63/animated.md
@@ -203,7 +203,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -539,7 +539,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.63/animations.md b/website/versioned_docs/version-0.63/animations.md
index 9cb93e9ee8c..7328fada4e9 100644
--- a/website/versioned_docs/version-0.63/animations.md
+++ b/website/versioned_docs/version-0.63/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -671,7 +671,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -686,11 +686,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -712,10 +712,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.63/asyncstorage.md b/website/versioned_docs/version-0.63/asyncstorage.md
index 398c961e759..487c2f21ad2 100644
--- a/website/versioned_docs/version-0.63/asyncstorage.md
+++ b/website/versioned_docs/version-0.63/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.63/building-for-tv.md b/website/versioned_docs/version-0.63/building-for-tv.md
index b55ac6d77c3..b51e44fd6a2 100644
--- a/website/versioned_docs/version-0.63/building-for-tv.md
+++ b/website/versioned_docs/version-0.63/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -141,13 +141,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.63/communication-android.md b/website/versioned_docs/version-0.63/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.63/communication-android.md
+++ b/website/versioned_docs/version-0.63/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.63/communication-ios.md b/website/versioned_docs/version-0.63/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.63/communication-ios.md
+++ b/website/versioned_docs/version-0.63/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.63/custom-webview-android.md b/website/versioned_docs/version-0.63/custom-webview-android.md
index 0bbe9dae76d..44da28c6c6f 100644
--- a/website/versioned_docs/version-0.63/custom-webview-android.md
+++ b/website/versioned_docs/version-0.63/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
(
+ (({highlighted}) => (
this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
-
+
{item.title}
@@ -571,7 +568,7 @@ List of `ViewabilityConfig`/`onViewableItemsChanged` pairs. A specific `onViewab
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.63/geolocation.md b/website/versioned_docs/version-0.63/geolocation.md
index edb60ba930b..99fb546eb39 100644
--- a/website/versioned_docs/version-0.63/geolocation.md
+++ b/website/versioned_docs/version-0.63/geolocation.md
@@ -98,7 +98,7 @@ Request suitable Location permission based on the key configured on pList. If NS
geolocation.getCurrentPosition(
geo_success,
[geo_error],
- [geo_options]
+ [geo_options],
);
```
diff --git a/website/versioned_docs/version-0.63/headless-js-android.md b/website/versioned_docs/version-0.63/headless-js-android.md
index 69f73a0fd77..8e9318d723e 100644
--- a/website/versioned_docs/version-0.63/headless-js-android.md
+++ b/website/versioned_docs/version-0.63/headless-js-android.md
@@ -10,16 +10,16 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
A task is an async function that you register on `AppRegistry`, similar to registering React applications:
```jsx
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
Then, in `SomeTaskName.js`:
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// do stuff
};
```
diff --git a/website/versioned_docs/version-0.63/hermes.md b/website/versioned_docs/version-0.63/hermes.md
index a04d85db811..2f23d80412f 100644
--- a/website/versioned_docs/version-0.63/hermes.md
+++ b/website/versioned_docs/version-0.63/hermes.md
@@ -9,10 +9,6 @@ title: Using Hermes
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
-First, ensure you're using at least version 0.60.4 of React Native.
-
-If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. Make especially sure that all changes to `android/app/build.gradle` have been applied, as detailed by the [React Native upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.59.0). After upgrading the app, make sure everything works before trying to switch to Hermes.
-
> ## Note for RN compatibility.
>
> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
@@ -21,6 +17,8 @@ If you have an existing app based on an earlier version of React Native, you wil
>
> Hermes requires [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=48145)
+## Enabling Hermes
+
Edit your `android/app/build.gradle` file and make the change illustrated below:
```diff
diff --git a/website/versioned_docs/version-0.63/images.md b/website/versioned_docs/version-0.63/images.md
index 89f54f035bb..93eec75f652 100644
--- a/website/versioned_docs/version-0.63/images.md
+++ b/website/versioned_docs/version-0.63/images.md
@@ -81,8 +81,8 @@ For images included via Xcode asset catalogs or in the Android drawable folder,
```jsx
{rowData} }
+ renderRow={rowData => {rowData} }
/>
);
}
@@ -249,7 +249,7 @@ See `ScrollView#scrollTo`.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.
diff --git a/website/versioned_docs/version-0.63/listviewdatasource.md b/website/versioned_docs/version-0.63/listviewdatasource.md
index 4e6d96f08c1..7e9265d23b5 100644
--- a/website/versioned_docs/version-0.63/listviewdatasource.md
+++ b/website/versioned_docs/version-0.63/listviewdatasource.md
@@ -92,7 +92,7 @@ Note: This function does NOT clone the data in this data source. It only passes
cloneWithRowsAndSections(
dataBlob,
sectionIdentities,
- rowIdentities
+ rowIdentities,
);
```
diff --git a/website/versioned_docs/version-0.63/maskedviewios.md b/website/versioned_docs/version-0.63/maskedviewios.md
index 23dc0464830..9bf48efba9f 100644
--- a/website/versioned_docs/version-0.63/maskedviewios.md
+++ b/website/versioned_docs/version-0.63/maskedviewios.md
@@ -11,14 +11,14 @@ Renders the child view with a mask specified in the `maskElement` prop.
```jsx
import React from 'react';
-import { MaskedViewIOS, Text, View } from 'react-native';
+import {MaskedViewIOS, Text, View} from 'react-native';
class MyMaskedView extends React.Component {
render() {
return (
// Determines shape of the mask
Basic Mask
@@ -43,21 +43,21 @@ class MyMaskedView extends React.Component {
style={{
flex: 1,
height: '100%',
- backgroundColor: '#324376'
+ backgroundColor: '#324376',
}}
/>
diff --git a/website/versioned_docs/version-0.63/native-components-android.md b/website/versioned_docs/version-0.63/native-components-android.md
index 48233860134..3b318795e2b 100644
--- a/website/versioned_docs/version-0.63/native-components-android.md
+++ b/website/versioned_docs/version-0.63/native-components-android.md
@@ -104,7 +104,7 @@ The very final step is to create the JavaScript module that defines the interfac
```jsx
// ImageView.js
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
diff --git a/website/versioned_docs/version-0.63/native-components-ios.md b/website/versioned_docs/version-0.63/native-components-ios.md
index b116d9d51c4..ee0aa37d7ce 100644
--- a/website/versioned_docs/version-0.63/native-components-ios.md
+++ b/website/versioned_docs/version-0.63/native-components-ios.md
@@ -92,7 +92,7 @@ Now to actually disable zooming, we set the property in JS:
```jsx
// MyApp.js
- getConstants() {
The constant can then be accessed by invoking `getConstants` on the native module in JS:
```jsx
-const { DEFAULT_EVENT_NAME } = CalendarModule.getConstants();
+const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);
```
@@ -379,9 +379,9 @@ const onPress = () => {
CalendarModule.createCalendarEvent(
'Party',
'My House',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -410,7 +410,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -430,12 +430,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -469,7 +469,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'My House'
+ 'My House',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.63/native-modules-ios.md b/website/versioned_docs/version-0.63/native-modules-ios.md
index 7620e37f06d..c4dcfcc5104 100644
--- a/website/versioned_docs/version-0.63/native-modules-ios.md
+++ b/website/versioned_docs/version-0.63/native-modules-ios.md
@@ -74,7 +74,7 @@ RCT_EXPORT_MODULE(CalendarModuleFoo);
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModuleFoo } = ReactNative.NativeModules;
+const {CalendarModuleFoo} = ReactNative.NativeModules;
```
If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.
@@ -89,7 +89,7 @@ RCT_EXPORT_MODULE();
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModule } = ReactNative.NativeModules;
+const {CalendarModule} = ReactNative.NativeModules;
```
### Export a Native Method to JavaScript
@@ -137,7 +137,7 @@ Find a place in your application where you would like to add a call to the nativ
```jsx
import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import {NativeModules, Button} from 'react-native';
const NewModuleButton = () => {
const onPress = () => {
@@ -159,13 +159,13 @@ export default NewModuleButton;
In order to access your native module from JavaScript you need to first import `NativeNodules` from React Native:
```jsx
-import { NativeModules } from 'react-native';
+import {NativeModules} from 'react-native';
```
You can then access the `CalendarModule` native module off of `NativeModules`.
```jsx
-const { CalendarModule } = NativeModules;
+const {CalendarModule} = NativeModules;
```
Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:
@@ -213,8 +213,8 @@ To save consumers of your native module from needing to do that each time they w
* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
-import { NativeModules } from 'react-native';
-const { CalendarModule } = NativeModules;
+import {NativeModules} from 'react-native';
+const {CalendarModule} = NativeModules;
export default CalendarModule;
```
@@ -330,9 +330,9 @@ const onSubmit = () => {
CalendarModule.createCalendarEvent(
'Party',
'04-12-2020',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -361,7 +361,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -392,12 +392,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -433,7 +433,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'my house'
+ 'my house',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.63/navigation.md b/website/versioned_docs/version-0.63/navigation.md
index 4adea147cdc..861ebc467b5 100644
--- a/website/versioned_docs/version-0.63/navigation.md
+++ b/website/versioned_docs/version-0.63/navigation.md
@@ -56,7 +56,7 @@ Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do t
```jsx
import 'react-native-gesture-handler';
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
@@ -77,8 +77,8 @@ Now you can create an app with a home screen and a profile screen:
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator();
@@ -89,7 +89,7 @@ const MyStack = () => {
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
-const ProfileScreen = ({ navigation, route }) => {
+const ProfileScreen = ({navigation, route}) => {
return This is {route.params.name}'s profile ;
};
```
diff --git a/website/versioned_docs/version-0.63/network.md b/website/versioned_docs/version-0.63/network.md
index 7711af5edf7..72fe4313669 100644
--- a/website/versioned_docs/version-0.63/network.md
+++ b/website/versioned_docs/version-0.63/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch methods will return a
```jsx
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
};
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
const getMoviesFromApiAsync = async () => {
try {
let response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
let json = await response.json();
return json.movies;
@@ -169,7 +169,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -199,17 +199,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.63/panresponder.md b/website/versioned_docs/version-0.63/panresponder.md
index 0a1843b29fe..d3a86651b3b 100644
--- a/website/versioned_docs/version-0.63/panresponder.md
+++ b/website/versioned_docs/version-0.63/panresponder.md
@@ -68,8 +68,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blacklist: moduleMap } }
+ transform: {inlineRequires: {blacklist: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.63/scrollview.md b/website/versioned_docs/version-0.63/scrollview.md
index df6382d9b30..920225c1a34 100644
--- a/website/versioned_docs/version-0.63/scrollview.md
+++ b/website/versioned_docs/version-0.63/scrollview.md
@@ -736,7 +736,7 @@ Note: The weird function signature is due to the fact that, for historical reaso
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.63/state.md b/website/versioned_docs/version-0.63/state.md
index 85dd5086f07..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.63/state.md
+++ b/website/versioned_docs/version-0.63/state.md
@@ -16,31 +16,31 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
const BlinkApp = () => {
return (
-
-
+
);
-}
+};
export default BlinkApp;
```
diff --git a/website/versioned_docs/version-0.63/testing-overview.md b/website/versioned_docs/version-0.63/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.63/testing-overview.md
+++ b/website/versioned_docs/version-0.63/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -228,9 +226,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
diff --git a/website/versioned_docs/version-0.63/timepickerandroid.md b/website/versioned_docs/version-0.63/timepickerandroid.md
index 26708b109de..1a6dfc2ef8d 100644
--- a/website/versioned_docs/version-0.63/timepickerandroid.md
+++ b/website/versioned_docs/version-0.63/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.63/touchablehighlight.md b/website/versioned_docs/version-0.63/touchablehighlight.md
index 0b5a0540719..7cab63f6220 100644
--- a/website/versioned_docs/version-0.63/touchablehighlight.md
+++ b/website/versioned_docs/version-0.63/touchablehighlight.md
@@ -16,7 +16,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.63/touchablewithoutfeedback.md b/website/versioned_docs/version-0.63/touchablewithoutfeedback.md
index 7df5754dc56..2a21208031f 100644
--- a/website/versioned_docs/version-0.63/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.63/touchablewithoutfeedback.md
@@ -14,7 +14,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.63/transforms.md b/website/versioned_docs/version-0.63/transforms.md
index 35b0e882f61..42bb8f02ac1 100644
--- a/website/versioned_docs/version-0.63/transforms.md
+++ b/website/versioned_docs/version-0.63/transforms.md
@@ -275,13 +275,13 @@ export default App;
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.63/tutorial.md b/website/versioned_docs/version-0.63/tutorial.md
index 07d48d9bc81..f01da0df0cf 100644
--- a/website/versioned_docs/version-0.63/tutorial.md
+++ b/website/versioned_docs/version-0.63/tutorial.md
@@ -144,8 +144,8 @@ const App = () => {
```jsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +166,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
diff --git a/website/versioned_docs/version-0.63/typescript.md b/website/versioned_docs/version-0.63/typescript.md
index 6ba0b94b773..4c794d8820a 100644
--- a/website/versioned_docs/version-0.63/typescript.md
+++ b/website/versioned_docs/version-0.63/typescript.md
@@ -116,7 +116,14 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -136,16 +143,16 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
-const Hello: React.FC = (props) => {
+const Hello: React.FC = props => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- props.enthusiasmLevel
+ props.enthusiasmLevel,
);
const onIncrement = () =>
@@ -186,23 +193,23 @@ const Hello: React.FC = (props) => {
const styles = StyleSheet.create({
root: {
alignItems: 'center',
- alignSelf: 'center'
+ alignSelf: 'center',
},
buttons: {
flexDirection: 'row',
minHeight: 70,
alignItems: 'stretch',
alignSelf: 'center',
- borderWidth: 5
+ borderWidth: 5,
},
button: {
flex: 1,
- paddingVertical: 0
+ paddingVertical: 0,
},
greeting: {
color: '#999',
- fontWeight: 'bold'
- }
+ fontWeight: 'bold',
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.63/usecolorscheme.md b/website/versioned_docs/version-0.63/usecolorscheme.md
index a149097440a..6419780d809 100644
--- a/website/versioned_docs/version-0.63/usecolorscheme.md
+++ b/website/versioned_docs/version-0.63/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
@@ -16,7 +16,7 @@ Supported color schemes:
- null: The user has not indicated a preferred color theme.
```jsx
-import { Text, useColorScheme } from 'react-native';
+import {Text, useColorScheme} from 'react-native';
const MyComponent = () => {
const colorScheme = useColorScheme();
diff --git a/website/versioned_docs/version-0.63/usewindowdimensions.md b/website/versioned_docs/version-0.63/usewindowdimensions.md
index 62879cb4690..1b3768df476 100644
--- a/website/versioned_docs/version-0.63/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.63/usewindowdimensions.md
@@ -4,7 +4,7 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
diff --git a/website/versioned_docs/version-0.63/virtualizedlist.md b/website/versioned_docs/version-0.63/virtualizedlist.md
index 1f7ba1ffe39..f6d61f20911 100644
--- a/website/versioned_docs/version-0.63/virtualizedlist.md
+++ b/website/versioned_docs/version-0.63/virtualizedlist.md
@@ -510,7 +510,7 @@ Set this when offset is needed for the loading indicator to show correctly.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.63/webview.md b/website/versioned_docs/version-0.63/webview.md
index 050e0f002d5..4261b069f1c 100644
--- a/website/versioned_docs/version-0.63/webview.md
+++ b/website/versioned_docs/version-0.63/webview.md
@@ -8,17 +8,17 @@ title: 'đ§ WebView'
`WebView` renders web content in a native view.
```jsx
-import React, { Component } from 'react';
-import { WebView } from 'react-native';
+import React, {Component} from 'react';
+import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
Hello world' }}
+ source={{html: 'Hello world '}}
/>
);
}
diff --git a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-java.md
index f090f7083be..6f9ec198e9b 100644
--- a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
return (
@@ -173,18 +168,18 @@ const HelloWorld = () => {
var styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
- margin: 10
- }
+ margin: 10,
+ },
});
AppRegistry.registerComponent(
'MyReactNativeApp',
- () => HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-objc.md
index 93ab208a870..1f0ae63c2c1 100644
--- a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-objc.md
@@ -206,15 +206,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -235,18 +230,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-swift.md
index 2923b8c47da..469ee85542c 100644
--- a/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.64/_integration-with-exisiting-apps-swift.md
@@ -172,15 +172,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -201,18 +196,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.64/accessibility.md b/website/versioned_docs/version-0.64/accessibility.md
index 7d2e133bbe3..118e1c3d6b8 100644
--- a/website/versioned_docs/version-0.64/accessibility.md
+++ b/website/versioned_docs/version-0.64/accessibility.md
@@ -173,12 +173,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -232,11 +232,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -261,16 +261,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.64/actionsheetios.md b/website/versioned_docs/version-0.64/actionsheetios.md
index a8499cad7d9..17de636eb9e 100644
--- a/website/versioned_docs/version-0.64/actionsheetios.md
+++ b/website/versioned_docs/version-0.64/actionsheetios.md
@@ -86,13 +86,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.64/alertios.md b/website/versioned_docs/version-0.64/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.64/alertios.md
+++ b/website/versioned_docs/version-0.64/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.64/animated.md b/website/versioned_docs/version-0.64/animated.md
index 0e278ac247c..e805df991eb 100644
--- a/website/versioned_docs/version-0.64/animated.md
+++ b/website/versioned_docs/version-0.64/animated.md
@@ -201,7 +201,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -537,7 +537,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.64/animations.md b/website/versioned_docs/version-0.64/animations.md
index b6b489f9931..39014363a8b 100644
--- a/website/versioned_docs/version-0.64/animations.md
+++ b/website/versioned_docs/version-0.64/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -671,7 +671,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -686,11 +686,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -712,10 +712,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.64/asyncstorage.md b/website/versioned_docs/version-0.64/asyncstorage.md
index 04e507f8b57..7076624fe7b 100644
--- a/website/versioned_docs/version-0.64/asyncstorage.md
+++ b/website/versioned_docs/version-0.64/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.64/building-for-tv.md b/website/versioned_docs/version-0.64/building-for-tv.md
index f5e52bf1400..1a66d4a7c04 100644
--- a/website/versioned_docs/version-0.64/building-for-tv.md
+++ b/website/versioned_docs/version-0.64/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.64/communication-android.md b/website/versioned_docs/version-0.64/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.64/communication-android.md
+++ b/website/versioned_docs/version-0.64/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.64/communication-ios.md b/website/versioned_docs/version-0.64/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.64/communication-ios.md
+++ b/website/versioned_docs/version-0.64/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.64/custom-webview-android.md b/website/versioned_docs/version-0.64/custom-webview-android.md
index e361cf1ca47..1db4679c3ca 100644
--- a/website/versioned_docs/version-0.64/custom-webview-android.md
+++ b/website/versioned_docs/version-0.64/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
-
+
Press me!
diff --git a/website/versioned_docs/version-0.64/dynamiccolorios.md b/website/versioned_docs/version-0.64/dynamiccolorios.md
index 2e3b51aca1f..38ea15ecfbc 100644
--- a/website/versioned_docs/version-0.64/dynamiccolorios.md
+++ b/website/versioned_docs/version-0.64/dynamiccolorios.md
@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
The `DynamicColorIOS` function is a platform color type specific to iOS.
```jsx
-DynamicColorIOS({ light: color, dark: color });
+DynamicColorIOS({light: color, dark: color});
```
`DynamicColorIOS` takes a single argument as an object with two keys: `dark` and `light`. These correspond to the colors you want to use for "light mode" and "dark mode" on iOS.
@@ -36,10 +36,10 @@ At runtime, the system will choose which of the two colors to display depending
## Example
```jsx
-import { DynamicColorIOS } from 'react-native';
+import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
- light: 'midnightblue'
+ light: 'midnightblue',
});
```
diff --git a/website/versioned_docs/version-0.64/flatlist.md b/website/versioned_docs/version-0.64/flatlist.md
index 051a9924e01..c0070b7e336 100644
--- a/website/versioned_docs/version-0.64/flatlist.md
+++ b/website/versioned_docs/version-0.64/flatlist.md
@@ -181,7 +181,7 @@ Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another
### Required
**`renderItem`**
```jsx
-renderItem({ item, index, separators });
+renderItem({item, index, separators});
```
Takes an item from `data` and renders it into the list.
@@ -207,23 +207,20 @@ Example usage:
(
+ (({highlighted}) => (
this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
-
+
{item.title}
@@ -610,7 +607,7 @@ Tells the list an interaction has occurred, which should trigger viewability cal
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.64/headless-js-android.md b/website/versioned_docs/version-0.64/headless-js-android.md
index 8199ec28ec5..d36678b0462 100644
--- a/website/versioned_docs/version-0.64/headless-js-android.md
+++ b/website/versioned_docs/version-0.64/headless-js-android.md
@@ -10,16 +10,16 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
A task is an async function that you register on `AppRegistry`, similar to registering React applications:
```jsx
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
Then, in `SomeTaskName.js`:
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// do stuff
};
```
diff --git a/website/versioned_docs/version-0.64/hermes.md b/website/versioned_docs/version-0.64/hermes.md
index 15967c5a0c2..a7bb6781594 100644
--- a/website/versioned_docs/version-0.64/hermes.md
+++ b/website/versioned_docs/version-0.64/hermes.md
@@ -9,10 +9,6 @@ title: Using Hermes
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
-First, ensure you're using at least version 0.60.4 of React Native.
-
-If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. Make especially sure that all changes to `android/app/build.gradle` have been applied, as detailed by the [React Native upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.59.0). After upgrading the app, make sure everything works before trying to switch to Hermes.
-
> ## Note for RN compatibility.
>
> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
@@ -60,7 +56,7 @@ $ npx react-native run-android
### iOS
-Since React Native 0.64, Hermes also runs on iOS. To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below:
+To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below:
```diff
use_react_native!(
diff --git a/website/versioned_docs/version-0.64/images.md b/website/versioned_docs/version-0.64/images.md
index 89f54f035bb..93eec75f652 100644
--- a/website/versioned_docs/version-0.64/images.md
+++ b/website/versioned_docs/version-0.64/images.md
@@ -81,8 +81,8 @@ For images included via Xcode asset catalogs or in the Android drawable folder,
```jsx
{
- this.setState({ isHungry: false });
+ this.setState({isHungry: false});
}}
// ..
/>
diff --git a/website/versioned_docs/version-0.64/javascript-environment.md b/website/versioned_docs/version-0.64/javascript-environment.md
index 80fe954890a..a787a8b3240 100644
--- a/website/versioned_docs/version-0.64/javascript-environment.md
+++ b/website/versioned_docs/version-0.64/javascript-environment.md
@@ -5,12 +5,13 @@ title: JavaScript Environment
## JavaScript Runtime
-When using React Native, you're going to be running your JavaScript code in two environments:
+When using React Native, you're going to be running your JavaScript code in up to three environments:
- In most cases, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- If enabled, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
## JavaScript Syntax Transformers
diff --git a/website/versioned_docs/version-0.64/native-components-android.md b/website/versioned_docs/version-0.64/native-components-android.md
index b98b1a74896..4897672702a 100644
--- a/website/versioned_docs/version-0.64/native-components-android.md
+++ b/website/versioned_docs/version-0.64/native-components-android.md
@@ -108,7 +108,7 @@ The very final step is to create the JavaScript module that defines the interfac
```jsx
// ImageView.js
-import { requireNativeComponent } from 'react-native';
+import {requireNativeComponent} from 'react-native';
/**
* Composes `View`.
diff --git a/website/versioned_docs/version-0.64/native-components-ios.md b/website/versioned_docs/version-0.64/native-components-ios.md
index b116d9d51c4..ee0aa37d7ce 100644
--- a/website/versioned_docs/version-0.64/native-components-ios.md
+++ b/website/versioned_docs/version-0.64/native-components-ios.md
@@ -92,7 +92,7 @@ Now to actually disable zooming, we set the property in JS:
```jsx
// MyApp.js
- getConstants() {
The constant can then be accessed by invoking `getConstants` on the native module in JS:
```jsx
-const { DEFAULT_EVENT_NAME } = CalendarModule.getConstants();
+const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);
```
@@ -379,9 +379,9 @@ const onPress = () => {
CalendarModule.createCalendarEvent(
'Party',
'My House',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -410,7 +410,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -430,12 +430,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -469,7 +469,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'My House'
+ 'My House',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.64/native-modules-ios.md b/website/versioned_docs/version-0.64/native-modules-ios.md
index 7c27279a103..04806f1f6b3 100644
--- a/website/versioned_docs/version-0.64/native-modules-ios.md
+++ b/website/versioned_docs/version-0.64/native-modules-ios.md
@@ -74,7 +74,7 @@ RCT_EXPORT_MODULE(CalendarModuleFoo);
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModuleFoo } = ReactNative.NativeModules;
+const {CalendarModuleFoo} = ReactNative.NativeModules;
```
If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.
@@ -89,7 +89,7 @@ RCT_EXPORT_MODULE();
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModule } = ReactNative.NativeModules;
+const {CalendarModule} = ReactNative.NativeModules;
```
### Export a Native Method to JavaScript
@@ -137,7 +137,7 @@ Find a place in your application where you would like to add a call to the nativ
```jsx
import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import {NativeModules, Button} from 'react-native';
const NewModuleButton = () => {
const onPress = () => {
@@ -159,13 +159,13 @@ export default NewModuleButton;
In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:
```jsx
-import { NativeModules } from 'react-native';
+import {NativeModules} from 'react-native';
```
You can then access the `CalendarModule` native module off of `NativeModules`.
```jsx
-const { CalendarModule } = NativeModules;
+const {CalendarModule} = NativeModules;
```
Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:
@@ -213,8 +213,8 @@ To save consumers of your native module from needing to do that each time they w
* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
-import { NativeModules } from 'react-native';
-const { CalendarModule } = NativeModules;
+import {NativeModules} from 'react-native';
+const {CalendarModule} = NativeModules;
export default CalendarModule;
```
@@ -330,9 +330,9 @@ const onSubmit = () => {
CalendarModule.createCalendarEvent(
'Party',
'04-12-2020',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -361,7 +361,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -392,12 +392,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -433,7 +433,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'my house'
+ 'my house',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.64/navigation.md b/website/versioned_docs/version-0.64/navigation.md
index fc711d4a669..1532359a8ab 100644
--- a/website/versioned_docs/version-0.64/navigation.md
+++ b/website/versioned_docs/version-0.64/navigation.md
@@ -56,7 +56,7 @@ Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do t
```jsx
import 'react-native-gesture-handler';
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
@@ -77,8 +77,8 @@ Now you can create an app with a home screen and a profile screen:
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator();
@@ -89,7 +89,7 @@ const MyStack = () => {
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
-const ProfileScreen = ({ navigation, route }) => {
+const ProfileScreen = ({navigation, route}) => {
return This is {route.params.name}'s profile ;
};
```
diff --git a/website/versioned_docs/version-0.64/network.md b/website/versioned_docs/version-0.64/network.md
index cf554f8e43e..3cfea56dda7 100644
--- a/website/versioned_docs/version-0.64/network.md
+++ b/website/versioned_docs/version-0.64/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch methods will return a
```jsx
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
};
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
const getMoviesFromApiAsync = async () => {
try {
const response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
const json = await response.json();
return json.movies;
@@ -183,7 +183,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -213,17 +213,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.64/panresponder.md b/website/versioned_docs/version-0.64/panresponder.md
index 220a5de64fe..e075ef77a98 100644
--- a/website/versioned_docs/version-0.64/panresponder.md
+++ b/website/versioned_docs/version-0.64/panresponder.md
@@ -68,8 +68,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blockList: moduleMap } }
+ transform: {inlineRequires: {blockList: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.64/scrollview.md b/website/versioned_docs/version-0.64/scrollview.md
index 4530c9a451c..687a0bb4737 100644
--- a/website/versioned_docs/version-0.64/scrollview.md
+++ b/website/versioned_docs/version-0.64/scrollview.md
@@ -732,7 +732,7 @@ Scrolls to a given x, y offset, either immediately, with a smooth animation.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.64/state.md b/website/versioned_docs/version-0.64/state.md
index 85dd5086f07..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.64/state.md
+++ b/website/versioned_docs/version-0.64/state.md
@@ -16,31 +16,31 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
const BlinkApp = () => {
return (
-
-
+
);
-}
+};
export default BlinkApp;
```
diff --git a/website/versioned_docs/version-0.64/testing-overview.md b/website/versioned_docs/version-0.64/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.64/testing-overview.md
+++ b/website/versioned_docs/version-0.64/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -234,9 +232,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
@@ -647,7 +645,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
{
lines: [
TextLayout,
- TextLayout
+ TextLayout,
// ...
];
target: 1127;
diff --git a/website/versioned_docs/version-0.64/timepickerandroid.md b/website/versioned_docs/version-0.64/timepickerandroid.md
index b5a74224b92..c39d3da6ac1 100644
--- a/website/versioned_docs/version-0.64/timepickerandroid.md
+++ b/website/versioned_docs/version-0.64/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.64/touchablehighlight.md b/website/versioned_docs/version-0.64/touchablehighlight.md
index a3bd7bf3116..644e0fdb5e9 100644
--- a/website/versioned_docs/version-0.64/touchablehighlight.md
+++ b/website/versioned_docs/version-0.64/touchablehighlight.md
@@ -16,7 +16,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.64/touchablewithoutfeedback.md b/website/versioned_docs/version-0.64/touchablewithoutfeedback.md
index 9be24a5f81e..a121db0f217 100644
--- a/website/versioned_docs/version-0.64/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.64/touchablewithoutfeedback.md
@@ -14,7 +14,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.64/transforms.md b/website/versioned_docs/version-0.64/transforms.md
index 35b0e882f61..42bb8f02ac1 100644
--- a/website/versioned_docs/version-0.64/transforms.md
+++ b/website/versioned_docs/version-0.64/transforms.md
@@ -275,13 +275,13 @@ export default App;
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.64/tutorial.md b/website/versioned_docs/version-0.64/tutorial.md
index 2b4ced41784..1c864b710fb 100644
--- a/website/versioned_docs/version-0.64/tutorial.md
+++ b/website/versioned_docs/version-0.64/tutorial.md
@@ -144,8 +144,8 @@ const App = () => {
```jsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +166,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
diff --git a/website/versioned_docs/version-0.64/typescript.md b/website/versioned_docs/version-0.64/typescript.md
index b7c18356364..2561347a94c 100644
--- a/website/versioned_docs/version-0.64/typescript.md
+++ b/website/versioned_docs/version-0.64/typescript.md
@@ -116,7 +116,14 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -136,7 +143,7 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
@@ -145,17 +152,17 @@ export type Props = {
const Hello: React.FC = ({
name,
- baseEnthusiasmLevel = 0
+ baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- baseEnthusiasmLevel
+ baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
- enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
+ enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
@@ -189,13 +196,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
- margin: 16
- }
+ margin: 16,
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.64/usecolorscheme.md b/website/versioned_docs/version-0.64/usecolorscheme.md
index 54c0d983014..02173f0324b 100644
--- a/website/versioned_docs/version-0.64/usecolorscheme.md
+++ b/website/versioned_docs/version-0.64/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
diff --git a/website/versioned_docs/version-0.64/usewindowdimensions.md b/website/versioned_docs/version-0.64/usewindowdimensions.md
index de1b15debf8..c9ad84ef40f 100644
--- a/website/versioned_docs/version-0.64/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.64/usewindowdimensions.md
@@ -4,7 +4,7 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
diff --git a/website/versioned_docs/version-0.64/virtualizedlist.md b/website/versioned_docs/version-0.64/virtualizedlist.md
index de6d587d5d2..a8deaadb1ac 100644
--- a/website/versioned_docs/version-0.64/virtualizedlist.md
+++ b/website/versioned_docs/version-0.64/virtualizedlist.md
@@ -571,7 +571,7 @@ hasMore () => boolean;
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-java.md
index f090f7083be..6f9ec198e9b 100644
--- a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
return (
@@ -173,18 +168,18 @@ const HelloWorld = () => {
var styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
- margin: 10
- }
+ margin: 10,
+ },
});
AppRegistry.registerComponent(
'MyReactNativeApp',
- () => HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-objc.md
index 739cd48c5a7..220245e9761 100644
--- a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-objc.md
@@ -206,15 +206,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -235,18 +230,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-swift.md
index efe5f1daaea..cb3a21aa1a6 100644
--- a/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.65/_integration-with-exisiting-apps-swift.md
@@ -172,15 +172,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -201,18 +196,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.65/accessibility.md b/website/versioned_docs/version-0.65/accessibility.md
index db3ca1247e1..d16c46b84d4 100644
--- a/website/versioned_docs/version-0.65/accessibility.md
+++ b/website/versioned_docs/version-0.65/accessibility.md
@@ -173,12 +173,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -232,11 +232,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -261,16 +261,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.65/actionsheetios.md b/website/versioned_docs/version-0.65/actionsheetios.md
index a8499cad7d9..17de636eb9e 100644
--- a/website/versioned_docs/version-0.65/actionsheetios.md
+++ b/website/versioned_docs/version-0.65/actionsheetios.md
@@ -86,13 +86,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.65/alertios.md b/website/versioned_docs/version-0.65/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.65/alertios.md
+++ b/website/versioned_docs/version-0.65/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.65/animated.md b/website/versioned_docs/version-0.65/animated.md
index 0e278ac247c..e805df991eb 100644
--- a/website/versioned_docs/version-0.65/animated.md
+++ b/website/versioned_docs/version-0.65/animated.md
@@ -201,7 +201,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -537,7 +537,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.65/animations.md b/website/versioned_docs/version-0.65/animations.md
index b6b489f9931..39014363a8b 100644
--- a/website/versioned_docs/version-0.65/animations.md
+++ b/website/versioned_docs/version-0.65/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -671,7 +671,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -686,11 +686,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -712,10 +712,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.65/asyncstorage.md b/website/versioned_docs/version-0.65/asyncstorage.md
index 04e507f8b57..7076624fe7b 100644
--- a/website/versioned_docs/version-0.65/asyncstorage.md
+++ b/website/versioned_docs/version-0.65/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.65/building-for-tv.md b/website/versioned_docs/version-0.65/building-for-tv.md
index f5e52bf1400..1a66d4a7c04 100644
--- a/website/versioned_docs/version-0.65/building-for-tv.md
+++ b/website/versioned_docs/version-0.65/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.65/communication-android.md b/website/versioned_docs/version-0.65/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.65/communication-android.md
+++ b/website/versioned_docs/version-0.65/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.65/communication-ios.md b/website/versioned_docs/version-0.65/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.65/communication-ios.md
+++ b/website/versioned_docs/version-0.65/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.65/custom-webview-android.md b/website/versioned_docs/version-0.65/custom-webview-android.md
index e361cf1ca47..1db4679c3ca 100644
--- a/website/versioned_docs/version-0.65/custom-webview-android.md
+++ b/website/versioned_docs/version-0.65/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
-
+
Press me!
diff --git a/website/versioned_docs/version-0.65/dynamiccolorios.md b/website/versioned_docs/version-0.65/dynamiccolorios.md
index 946cb865359..2cc219ea8c6 100644
--- a/website/versioned_docs/version-0.65/dynamiccolorios.md
+++ b/website/versioned_docs/version-0.65/dynamiccolorios.md
@@ -12,7 +12,7 @@ DynamicColorIOS({
light: color,
dark: color,
highContrastLight: color, // (optional) will fallback to "light" if not provided
- highContrastDark: color // (optional) will fallback to "dark" if not provided
+ highContrastDark: color, // (optional) will fallback to "dark" if not provided
});
```
@@ -39,17 +39,17 @@ At runtime, the system will choose which of the colors to display depending on t
## Example
```jsx
-import { DynamicColorIOS } from 'react-native';
+import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
- light: 'midnightblue'
+ light: 'midnightblue',
});
const customContrastDynamicTextColor = DynamicColorIOS({
dark: 'darkgray',
light: 'lightgray',
highContrastDark: 'black',
- highContrastLight: 'white'
+ highContrastLight: 'white',
});
```
diff --git a/website/versioned_docs/version-0.65/flatlist.md b/website/versioned_docs/version-0.65/flatlist.md
index 0398e1181c3..04b61618ca4 100644
--- a/website/versioned_docs/version-0.65/flatlist.md
+++ b/website/versioned_docs/version-0.65/flatlist.md
@@ -181,7 +181,7 @@ Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another
### Required
**`renderItem`**
```jsx
-renderItem({ item, index, separators });
+renderItem({item, index, separators});
```
Takes an item from `data` and renders it into the list.
@@ -207,23 +207,20 @@ Example usage:
(
+ (({highlighted}) => (
this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
-
+
{item.title}
diff --git a/website/versioned_docs/version-0.65/headless-js-android.md b/website/versioned_docs/version-0.65/headless-js-android.md
index 8199ec28ec5..d36678b0462 100644
--- a/website/versioned_docs/version-0.65/headless-js-android.md
+++ b/website/versioned_docs/version-0.65/headless-js-android.md
@@ -10,16 +10,16 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
A task is an async function that you register on `AppRegistry`, similar to registering React applications:
```jsx
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
Then, in `SomeTaskName.js`:
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// do stuff
};
```
diff --git a/website/versioned_docs/version-0.65/hermes.md b/website/versioned_docs/version-0.65/hermes.md
index 7daa0e7a471..124a688eaca 100644
--- a/website/versioned_docs/version-0.65/hermes.md
+++ b/website/versioned_docs/version-0.65/hermes.md
@@ -9,10 +9,6 @@ title: Using Hermes
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
-First, ensure you're using at least version 0.60.4 of React Native.
-
-If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes.
-
> ## Note for RN compatibility.
>
> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
@@ -60,7 +56,7 @@ $ npx react-native run-android
### iOS
-Since React Native 0.64, Hermes also runs on iOS. To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below:
+To enable Hermes for iOS, edit your `ios/Podfile` file and make the change illustrated below:
```diff
use_react_native!(
diff --git a/website/versioned_docs/version-0.65/images.md b/website/versioned_docs/version-0.65/images.md
index ce2fe9c92f1..06530260e00 100644
--- a/website/versioned_docs/version-0.65/images.md
+++ b/website/versioned_docs/version-0.65/images.md
@@ -81,8 +81,8 @@ For images included via Xcode asset catalogs or in the Android drawable folder,
```jsx
{
- this.setState({ isHungry: false });
+ this.setState({isHungry: false});
}}
// ..
/>
diff --git a/website/versioned_docs/version-0.65/javascript-environment.md b/website/versioned_docs/version-0.65/javascript-environment.md
index 293903c6587..2117ada8893 100644
--- a/website/versioned_docs/version-0.65/javascript-environment.md
+++ b/website/versioned_docs/version-0.65/javascript-environment.md
@@ -7,12 +7,13 @@ import TableRow from '@site/core/TableRowWithCodeBlock';
## JavaScript Runtime
-When using React Native, you're going to be running your JavaScript code in two environments:
+When using React Native, you're going to be running your JavaScript code in up to three environments:
- In most cases, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- If enabled, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
## JavaScript Syntax Transformers
@@ -65,7 +66,7 @@ A full list of React Native's enabled transformations can be found in [metro-rea
ECMAScript 2022 (ES13) Stage 1 Proposal Miscellaneous getConstants() {
The constant can then be accessed by invoking `getConstants` on the native module in JS:
```jsx
-const { DEFAULT_EVENT_NAME } = CalendarModule.getConstants();
+const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);
```
@@ -379,9 +379,9 @@ const onPress = () => {
CalendarModule.createCalendarEvent(
'Party',
'My House',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -410,7 +410,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -430,12 +430,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -469,7 +469,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'My House'
+ 'My House',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.65/native-modules-ios.md b/website/versioned_docs/version-0.65/native-modules-ios.md
index ae27042c3eb..c067d396b3f 100644
--- a/website/versioned_docs/version-0.65/native-modules-ios.md
+++ b/website/versioned_docs/version-0.65/native-modules-ios.md
@@ -74,7 +74,7 @@ RCT_EXPORT_MODULE(CalendarModuleFoo);
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModuleFoo } = ReactNative.NativeModules;
+const {CalendarModuleFoo} = ReactNative.NativeModules;
```
If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.
@@ -89,7 +89,7 @@ RCT_EXPORT_MODULE();
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModule } = ReactNative.NativeModules;
+const {CalendarModule} = ReactNative.NativeModules;
```
### Export a Native Method to JavaScript
@@ -137,7 +137,7 @@ Find a place in your application where you would like to add a call to the nativ
```jsx
import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import {NativeModules, Button} from 'react-native';
const NewModuleButton = () => {
const onPress = () => {
@@ -159,13 +159,13 @@ export default NewModuleButton;
In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:
```jsx
-import { NativeModules } from 'react-native';
+import {NativeModules} from 'react-native';
```
You can then access the `CalendarModule` native module off of `NativeModules`.
```jsx
-const { CalendarModule } = NativeModules;
+const {CalendarModule} = NativeModules;
```
Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:
@@ -213,8 +213,8 @@ To save consumers of your native module from needing to do that each time they w
* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
-import { NativeModules } from 'react-native';
-const { CalendarModule } = NativeModules;
+import {NativeModules} from 'react-native';
+const {CalendarModule} = NativeModules;
export default CalendarModule;
```
@@ -330,9 +330,9 @@ const onSubmit = () => {
CalendarModule.createCalendarEvent(
'Party',
'04-12-2020',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -361,7 +361,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -392,12 +392,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -433,7 +433,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'my house'
+ 'my house',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.65/navigation.md b/website/versioned_docs/version-0.65/navigation.md
index e8aad6d3d75..c48e37aa9c3 100644
--- a/website/versioned_docs/version-0.65/navigation.md
+++ b/website/versioned_docs/version-0.65/navigation.md
@@ -49,7 +49,7 @@ Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do t
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
@@ -70,8 +70,8 @@ Now you can create an app with a home screen and a profile screen:
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
@@ -82,7 +82,7 @@ const MyStack = () => {
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
-const ProfileScreen = ({ navigation, route }) => {
+const ProfileScreen = ({navigation, route}) => {
return This is {route.params.name}'s profile ;
};
```
diff --git a/website/versioned_docs/version-0.65/network.md b/website/versioned_docs/version-0.65/network.md
index 49d8a76a594..0769752baab 100644
--- a/website/versioned_docs/version-0.65/network.md
+++ b/website/versioned_docs/version-0.65/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch method will return a [
```jsx
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
};
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
const getMoviesFromApiAsync = async () => {
try {
const response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
const json = await response.json();
return json.movies;
@@ -183,7 +183,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -213,17 +213,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.65/panresponder.md b/website/versioned_docs/version-0.65/panresponder.md
index 220a5de64fe..e075ef77a98 100644
--- a/website/versioned_docs/version-0.65/panresponder.md
+++ b/website/versioned_docs/version-0.65/panresponder.md
@@ -68,8 +68,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blockList: moduleMap } }
+ transform: {inlineRequires: {blockList: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.65/roottag.md b/website/versioned_docs/version-0.65/roottag.md
index cd3e47e3c7b..c486b6f93c1 100644
--- a/website/versioned_docs/version-0.65/roottag.md
+++ b/website/versioned_docs/version-0.65/roottag.md
@@ -26,14 +26,14 @@ In versions 0.65 and below, RootTag is accessed via a [legacy context](https://g
How to access `RootTag` via the `RootTagContext`.
```js
-import { RootTagContext } from 'react-native';
+import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';
function ScreenA() {
const rootTag = useContext(RootTagContext);
- const updateTitle = (title) => {
+ const updateTitle = title => {
NativeNavigation.setTitle(rootTag, title);
};
diff --git a/website/versioned_docs/version-0.65/scrollview.md b/website/versioned_docs/version-0.65/scrollview.md
index 107f079e934..aaf333e2571 100644
--- a/website/versioned_docs/version-0.65/scrollview.md
+++ b/website/versioned_docs/version-0.65/scrollview.md
@@ -742,7 +742,7 @@ Scrolls to a given x, y offset, either immediately, with a smooth animation.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.65/state.md b/website/versioned_docs/version-0.65/state.md
index 85dd5086f07..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.65/state.md
+++ b/website/versioned_docs/version-0.65/state.md
@@ -16,31 +16,31 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
const BlinkApp = () => {
return (
-
-
+
);
-}
+};
export default BlinkApp;
```
diff --git a/website/versioned_docs/version-0.65/testing-overview.md b/website/versioned_docs/version-0.65/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.65/testing-overview.md
+++ b/website/versioned_docs/version-0.65/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -234,9 +232,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
@@ -647,7 +645,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
{
lines: [
TextLayout,
- TextLayout
+ TextLayout,
// ...
];
target: 1127;
diff --git a/website/versioned_docs/version-0.65/timepickerandroid.md b/website/versioned_docs/version-0.65/timepickerandroid.md
index b5a74224b92..c39d3da6ac1 100644
--- a/website/versioned_docs/version-0.65/timepickerandroid.md
+++ b/website/versioned_docs/version-0.65/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.65/touchablehighlight.md b/website/versioned_docs/version-0.65/touchablehighlight.md
index a3bd7bf3116..644e0fdb5e9 100644
--- a/website/versioned_docs/version-0.65/touchablehighlight.md
+++ b/website/versioned_docs/version-0.65/touchablehighlight.md
@@ -16,7 +16,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.65/touchablewithoutfeedback.md b/website/versioned_docs/version-0.65/touchablewithoutfeedback.md
index 41b8fe80e13..df5ebb558ee 100644
--- a/website/versioned_docs/version-0.65/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.65/touchablewithoutfeedback.md
@@ -14,7 +14,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.65/transforms.md b/website/versioned_docs/version-0.65/transforms.md
index 35b0e882f61..42bb8f02ac1 100644
--- a/website/versioned_docs/version-0.65/transforms.md
+++ b/website/versioned_docs/version-0.65/transforms.md
@@ -275,13 +275,13 @@ export default App;
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.65/tutorial.md b/website/versioned_docs/version-0.65/tutorial.md
index 2b4ced41784..1c864b710fb 100644
--- a/website/versioned_docs/version-0.65/tutorial.md
+++ b/website/versioned_docs/version-0.65/tutorial.md
@@ -144,8 +144,8 @@ const App = () => {
```jsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +166,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
diff --git a/website/versioned_docs/version-0.65/typescript.md b/website/versioned_docs/version-0.65/typescript.md
index b7c18356364..2561347a94c 100644
--- a/website/versioned_docs/version-0.65/typescript.md
+++ b/website/versioned_docs/version-0.65/typescript.md
@@ -116,7 +116,14 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -136,7 +143,7 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
@@ -145,17 +152,17 @@ export type Props = {
const Hello: React.FC = ({
name,
- baseEnthusiasmLevel = 0
+ baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- baseEnthusiasmLevel
+ baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
- enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
+ enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
@@ -189,13 +196,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
- margin: 16
- }
+ margin: 16,
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.65/usecolorscheme.md b/website/versioned_docs/version-0.65/usecolorscheme.md
index 54c0d983014..02173f0324b 100644
--- a/website/versioned_docs/version-0.65/usecolorscheme.md
+++ b/website/versioned_docs/version-0.65/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
diff --git a/website/versioned_docs/version-0.65/usewindowdimensions.md b/website/versioned_docs/version-0.65/usewindowdimensions.md
index 49517624e90..edafc5164c7 100644
--- a/website/versioned_docs/version-0.65/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.65/usewindowdimensions.md
@@ -4,13 +4,13 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
```jsx
-const { height, width } = useWindowDimensions();
+const {height, width} = useWindowDimensions();
```
## Example
diff --git a/website/versioned_docs/version-0.65/virtualizedlist.md b/website/versioned_docs/version-0.65/virtualizedlist.md
index dd7e6c5d9a8..2837aca870c 100644
--- a/website/versioned_docs/version-0.65/virtualizedlist.md
+++ b/website/versioned_docs/version-0.65/virtualizedlist.md
@@ -571,7 +571,7 @@ hasMore () => boolean;
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-java.md
index f090f7083be..6f9ec198e9b 100644
--- a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
return (
@@ -173,18 +168,18 @@ const HelloWorld = () => {
var styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
- margin: 10
- }
+ margin: 10,
+ },
});
AppRegistry.registerComponent(
'MyReactNativeApp',
- () => HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-objc.md
index 739cd48c5a7..220245e9761 100644
--- a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-objc.md
@@ -206,15 +206,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -235,18 +230,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-swift.md
index efe5f1daaea..cb3a21aa1a6 100644
--- a/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.66/_integration-with-exisiting-apps-swift.md
@@ -172,15 +172,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -201,18 +196,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.66/accessibility.md b/website/versioned_docs/version-0.66/accessibility.md
index bde7cf3d297..18a4f5fdd55 100644
--- a/website/versioned_docs/version-0.66/accessibility.md
+++ b/website/versioned_docs/version-0.66/accessibility.md
@@ -174,12 +174,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -233,11 +233,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -262,16 +262,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.66/actionsheetios.md b/website/versioned_docs/version-0.66/actionsheetios.md
index a8499cad7d9..17de636eb9e 100644
--- a/website/versioned_docs/version-0.66/actionsheetios.md
+++ b/website/versioned_docs/version-0.66/actionsheetios.md
@@ -86,13 +86,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.66/alertios.md b/website/versioned_docs/version-0.66/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.66/alertios.md
+++ b/website/versioned_docs/version-0.66/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.66/animated.md b/website/versioned_docs/version-0.66/animated.md
index 0e278ac247c..e805df991eb 100644
--- a/website/versioned_docs/version-0.66/animated.md
+++ b/website/versioned_docs/version-0.66/animated.md
@@ -201,7 +201,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -537,7 +537,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.66/animations.md b/website/versioned_docs/version-0.66/animations.md
index ac56096056e..02349c7f7fc 100644
--- a/website/versioned_docs/version-0.66/animations.md
+++ b/website/versioned_docs/version-0.66/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -669,7 +669,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -684,11 +684,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -710,10 +710,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.66/asyncstorage.md b/website/versioned_docs/version-0.66/asyncstorage.md
index 04e507f8b57..7076624fe7b 100644
--- a/website/versioned_docs/version-0.66/asyncstorage.md
+++ b/website/versioned_docs/version-0.66/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.66/building-for-tv.md b/website/versioned_docs/version-0.66/building-for-tv.md
index f5e52bf1400..1a66d4a7c04 100644
--- a/website/versioned_docs/version-0.66/building-for-tv.md
+++ b/website/versioned_docs/version-0.66/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.66/communication-android.md b/website/versioned_docs/version-0.66/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.66/communication-android.md
+++ b/website/versioned_docs/version-0.66/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.66/communication-ios.md b/website/versioned_docs/version-0.66/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.66/communication-ios.md
+++ b/website/versioned_docs/version-0.66/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.66/custom-webview-android.md b/website/versioned_docs/version-0.66/custom-webview-android.md
index e361cf1ca47..1db4679c3ca 100644
--- a/website/versioned_docs/version-0.66/custom-webview-android.md
+++ b/website/versioned_docs/version-0.66/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
-
+
Press me!
diff --git a/website/versioned_docs/version-0.66/dynamiccolorios.md b/website/versioned_docs/version-0.66/dynamiccolorios.md
index 946cb865359..2cc219ea8c6 100644
--- a/website/versioned_docs/version-0.66/dynamiccolorios.md
+++ b/website/versioned_docs/version-0.66/dynamiccolorios.md
@@ -12,7 +12,7 @@ DynamicColorIOS({
light: color,
dark: color,
highContrastLight: color, // (optional) will fallback to "light" if not provided
- highContrastDark: color // (optional) will fallback to "dark" if not provided
+ highContrastDark: color, // (optional) will fallback to "dark" if not provided
});
```
@@ -39,17 +39,17 @@ At runtime, the system will choose which of the colors to display depending on t
## Example
```jsx
-import { DynamicColorIOS } from 'react-native';
+import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
- light: 'midnightblue'
+ light: 'midnightblue',
});
const customContrastDynamicTextColor = DynamicColorIOS({
dark: 'darkgray',
light: 'lightgray',
highContrastDark: 'black',
- highContrastLight: 'white'
+ highContrastLight: 'white',
});
```
diff --git a/website/versioned_docs/version-0.66/flatlist.md b/website/versioned_docs/version-0.66/flatlist.md
index c5faab9a9ab..629a1926abb 100644
--- a/website/versioned_docs/version-0.66/flatlist.md
+++ b/website/versioned_docs/version-0.66/flatlist.md
@@ -181,7 +181,7 @@ Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another
### Required
**`renderItem`**
```jsx
-renderItem({ item, index, separators });
+renderItem({item, index, separators});
```
Takes an item from `data` and renders it into the list.
@@ -207,23 +207,20 @@ Example usage:
(
+ (({highlighted}) => (
this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
-
+
{item.title}
@@ -610,7 +607,7 @@ Tells the list an interaction has occurred, which should trigger viewability cal
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.66/headless-js-android.md b/website/versioned_docs/version-0.66/headless-js-android.md
index 8199ec28ec5..d36678b0462 100644
--- a/website/versioned_docs/version-0.66/headless-js-android.md
+++ b/website/versioned_docs/version-0.66/headless-js-android.md
@@ -10,16 +10,16 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
A task is an async function that you register on `AppRegistry`, similar to registering React applications:
```jsx
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
Then, in `SomeTaskName.js`:
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// do stuff
};
```
diff --git a/website/versioned_docs/version-0.66/hermes.md b/website/versioned_docs/version-0.66/hermes.md
index cf827863dd9..2a80e3bec83 100644
--- a/website/versioned_docs/version-0.66/hermes.md
+++ b/website/versioned_docs/version-0.66/hermes.md
@@ -9,10 +9,6 @@ title: Using Hermes
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
-First, ensure you're using at least version 0.60.4 of React Native.
-
-If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes.
-
> ## Note for RN compatibility.
>
> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
diff --git a/website/versioned_docs/version-0.66/images.md b/website/versioned_docs/version-0.66/images.md
index ce2fe9c92f1..06530260e00 100644
--- a/website/versioned_docs/version-0.66/images.md
+++ b/website/versioned_docs/version-0.66/images.md
@@ -81,8 +81,8 @@ For images included via Xcode asset catalogs or in the Android drawable folder,
```jsx
{
- this.setState({ isHungry: false });
+ this.setState({isHungry: false});
}}
// ..
/>
diff --git a/website/versioned_docs/version-0.66/javascript-environment.md b/website/versioned_docs/version-0.66/javascript-environment.md
index 293903c6587..2117ada8893 100644
--- a/website/versioned_docs/version-0.66/javascript-environment.md
+++ b/website/versioned_docs/version-0.66/javascript-environment.md
@@ -7,12 +7,13 @@ import TableRow from '@site/core/TableRowWithCodeBlock';
## JavaScript Runtime
-When using React Native, you're going to be running your JavaScript code in two environments:
+When using React Native, you're going to be running your JavaScript code in up to three environments:
- In most cases, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- If enabled, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
## JavaScript Syntax Transformers
@@ -65,7 +66,7 @@ A full list of React Native's enabled transformations can be found in [metro-rea
ECMAScript 2022 (ES13) Stage 1 Proposal Miscellaneous getConstants() {
The constant can then be accessed by invoking `getConstants` on the native module in JS:
```jsx
-const { DEFAULT_EVENT_NAME } = CalendarModule.getConstants();
+const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);
```
@@ -379,9 +379,9 @@ const onPress = () => {
CalendarModule.createCalendarEvent(
'Party',
'My House',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -410,7 +410,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -430,12 +430,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -469,7 +469,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'My House'
+ 'My House',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.66/native-modules-ios.md b/website/versioned_docs/version-0.66/native-modules-ios.md
index ae27042c3eb..c067d396b3f 100644
--- a/website/versioned_docs/version-0.66/native-modules-ios.md
+++ b/website/versioned_docs/version-0.66/native-modules-ios.md
@@ -74,7 +74,7 @@ RCT_EXPORT_MODULE(CalendarModuleFoo);
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModuleFoo } = ReactNative.NativeModules;
+const {CalendarModuleFoo} = ReactNative.NativeModules;
```
If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.
@@ -89,7 +89,7 @@ RCT_EXPORT_MODULE();
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModule } = ReactNative.NativeModules;
+const {CalendarModule} = ReactNative.NativeModules;
```
### Export a Native Method to JavaScript
@@ -137,7 +137,7 @@ Find a place in your application where you would like to add a call to the nativ
```jsx
import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import {NativeModules, Button} from 'react-native';
const NewModuleButton = () => {
const onPress = () => {
@@ -159,13 +159,13 @@ export default NewModuleButton;
In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:
```jsx
-import { NativeModules } from 'react-native';
+import {NativeModules} from 'react-native';
```
You can then access the `CalendarModule` native module off of `NativeModules`.
```jsx
-const { CalendarModule } = NativeModules;
+const {CalendarModule} = NativeModules;
```
Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:
@@ -213,8 +213,8 @@ To save consumers of your native module from needing to do that each time they w
* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
-import { NativeModules } from 'react-native';
-const { CalendarModule } = NativeModules;
+import {NativeModules} from 'react-native';
+const {CalendarModule} = NativeModules;
export default CalendarModule;
```
@@ -330,9 +330,9 @@ const onSubmit = () => {
CalendarModule.createCalendarEvent(
'Party',
'04-12-2020',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -361,7 +361,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -392,12 +392,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -433,7 +433,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'my house'
+ 'my house',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.66/navigation.md b/website/versioned_docs/version-0.66/navigation.md
index e8aad6d3d75..c48e37aa9c3 100644
--- a/website/versioned_docs/version-0.66/navigation.md
+++ b/website/versioned_docs/version-0.66/navigation.md
@@ -49,7 +49,7 @@ Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do t
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
@@ -70,8 +70,8 @@ Now you can create an app with a home screen and a profile screen:
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
@@ -82,7 +82,7 @@ const MyStack = () => {
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
-const ProfileScreen = ({ navigation, route }) => {
+const ProfileScreen = ({navigation, route}) => {
return This is {route.params.name}'s profile ;
};
```
diff --git a/website/versioned_docs/version-0.66/network.md b/website/versioned_docs/version-0.66/network.md
index 786e4db02cc..007662031c7 100644
--- a/website/versioned_docs/version-0.66/network.md
+++ b/website/versioned_docs/version-0.66/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch method will return a [
```jsx
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
};
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
const getMoviesFromApiAsync = async () => {
try {
const response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
const json = await response.json();
return json.movies;
@@ -183,7 +183,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -213,17 +213,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.66/panresponder.md b/website/versioned_docs/version-0.66/panresponder.md
index 220a5de64fe..e075ef77a98 100644
--- a/website/versioned_docs/version-0.66/panresponder.md
+++ b/website/versioned_docs/version-0.66/panresponder.md
@@ -68,8 +68,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blockList: moduleMap } }
+ transform: {inlineRequires: {blockList: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.66/roottag.md b/website/versioned_docs/version-0.66/roottag.md
index cd3e47e3c7b..c486b6f93c1 100644
--- a/website/versioned_docs/version-0.66/roottag.md
+++ b/website/versioned_docs/version-0.66/roottag.md
@@ -26,14 +26,14 @@ In versions 0.65 and below, RootTag is accessed via a [legacy context](https://g
How to access `RootTag` via the `RootTagContext`.
```js
-import { RootTagContext } from 'react-native';
+import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';
function ScreenA() {
const rootTag = useContext(RootTagContext);
- const updateTitle = (title) => {
+ const updateTitle = title => {
NativeNavigation.setTitle(rootTag, title);
};
diff --git a/website/versioned_docs/version-0.66/scrollview.md b/website/versioned_docs/version-0.66/scrollview.md
index b4471977e5f..bb8846cdc6f 100644
--- a/website/versioned_docs/version-0.66/scrollview.md
+++ b/website/versioned_docs/version-0.66/scrollview.md
@@ -752,7 +752,7 @@ Scrolls to a given x, y offset, either immediately, with a smooth animation.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.66/state.md b/website/versioned_docs/version-0.66/state.md
index 85dd5086f07..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.66/state.md
+++ b/website/versioned_docs/version-0.66/state.md
@@ -16,31 +16,31 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
const BlinkApp = () => {
return (
-
-
+
);
-}
+};
export default BlinkApp;
```
diff --git a/website/versioned_docs/version-0.66/testing-overview.md b/website/versioned_docs/version-0.66/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.66/testing-overview.md
+++ b/website/versioned_docs/version-0.66/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -234,9 +232,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
@@ -671,7 +669,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
{
lines: [
TextLayout,
- TextLayout
+ TextLayout,
// ...
];
target: 1127;
diff --git a/website/versioned_docs/version-0.66/timepickerandroid.md b/website/versioned_docs/version-0.66/timepickerandroid.md
index b5a74224b92..c39d3da6ac1 100644
--- a/website/versioned_docs/version-0.66/timepickerandroid.md
+++ b/website/versioned_docs/version-0.66/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.66/touchablehighlight.md b/website/versioned_docs/version-0.66/touchablehighlight.md
index 32184698249..ca9fcca8eda 100644
--- a/website/versioned_docs/version-0.66/touchablehighlight.md
+++ b/website/versioned_docs/version-0.66/touchablehighlight.md
@@ -16,7 +16,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.66/touchablewithoutfeedback.md b/website/versioned_docs/version-0.66/touchablewithoutfeedback.md
index 41b8fe80e13..df5ebb558ee 100644
--- a/website/versioned_docs/version-0.66/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.66/touchablewithoutfeedback.md
@@ -14,7 +14,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.66/transforms.md b/website/versioned_docs/version-0.66/transforms.md
index 35b0e882f61..42bb8f02ac1 100644
--- a/website/versioned_docs/version-0.66/transforms.md
+++ b/website/versioned_docs/version-0.66/transforms.md
@@ -275,13 +275,13 @@ export default App;
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.66/tutorial.md b/website/versioned_docs/version-0.66/tutorial.md
index 2b4ced41784..1c864b710fb 100644
--- a/website/versioned_docs/version-0.66/tutorial.md
+++ b/website/versioned_docs/version-0.66/tutorial.md
@@ -144,8 +144,8 @@ const App = () => {
```jsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +166,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
diff --git a/website/versioned_docs/version-0.66/typescript.md b/website/versioned_docs/version-0.66/typescript.md
index b7c18356364..2561347a94c 100644
--- a/website/versioned_docs/version-0.66/typescript.md
+++ b/website/versioned_docs/version-0.66/typescript.md
@@ -116,7 +116,14 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -136,7 +143,7 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
@@ -145,17 +152,17 @@ export type Props = {
const Hello: React.FC = ({
name,
- baseEnthusiasmLevel = 0
+ baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- baseEnthusiasmLevel
+ baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
- enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
+ enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
@@ -189,13 +196,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
- margin: 16
- }
+ margin: 16,
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.66/usecolorscheme.md b/website/versioned_docs/version-0.66/usecolorscheme.md
index 54c0d983014..02173f0324b 100644
--- a/website/versioned_docs/version-0.66/usecolorscheme.md
+++ b/website/versioned_docs/version-0.66/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
diff --git a/website/versioned_docs/version-0.66/usewindowdimensions.md b/website/versioned_docs/version-0.66/usewindowdimensions.md
index 49517624e90..95970499751 100644
--- a/website/versioned_docs/version-0.66/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.66/usewindowdimensions.md
@@ -4,13 +4,13 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
-`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
+`useWindowDimensions` hook automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:
```jsx
-const { height, width } = useWindowDimensions();
+const {height, width} = useWindowDimensions();
```
## Example
@@ -20,10 +20,16 @@ import React from "react";
import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
const App = () => {
- const window = useWindowDimensions();
+ const { height, width, scale, fontScale } = useWindowDimensions();
return (
- {`Window Dimensions: height - ${window.height}, width - ${window.width}`}
+
+ Window Dimension Data
+
+ Height: {height}
+ Width: {width}
+ Font scale: {fontScale}
+ Pixel ratio: {scale}
);
}
@@ -32,14 +38,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "center",
alignItems: "center"
+ },
+ header: {
+ fontSize: 20,
+ marginBottom: 12
}
});
export default App;
```
-- The [useDimensions](https://github.com/react-native-community/react-native-hooks#usedimensions) hook from the community [React Native hooks](https://github.com/react-native-community/react-native-hooks) library aims to make handling screen/window size changes easier to work with.
-- [React Native Responsive Dimensions](https://github.com/DaniAkash/react-native-responsive-dimensions) also comes with responsive hooks.
+- The [`useDimensions`](https://github.com/react-native-community/hooks#usedimensions) hook from the community [React Native Hooks](https://github.com/react-native-community/hooks) library aims to make handling screen/window size changes easier to work with.
+- [React Native Responsive Dimensions](https://github.com/react-native-toolkit/react-native-responsive-dimensions) also comes with responsive hooks.
## Properties
@@ -69,9 +79,10 @@ The height in pixels of the window or screen your app occupies.
useWindowDimensions().scale;
```
-The pixel ratio of the device your app is running on.
+The pixel ratio of the device your app is running on. The values can be:
-> A value of `1` indicates PPI/DPI of 96 (76 on some platforms). `2` indicates a Retina or high DPI display.
+- `1` which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).
+- `2` or `3` which indicates a Retina or high DPI display.
---
diff --git a/website/versioned_docs/version-0.66/virtualizedlist.md b/website/versioned_docs/version-0.66/virtualizedlist.md
index dd7e6c5d9a8..2837aca870c 100644
--- a/website/versioned_docs/version-0.66/virtualizedlist.md
+++ b/website/versioned_docs/version-0.66/virtualizedlist.md
@@ -571,7 +571,7 @@ hasMore () => boolean;
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-java.md
index f090f7083be..6f9ec198e9b 100644
--- a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
return (
@@ -173,18 +168,18 @@ const HelloWorld = () => {
var styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
- margin: 10
- }
+ margin: 10,
+ },
});
AppRegistry.registerComponent(
'MyReactNativeApp',
- () => HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-objc.md
index 739cd48c5a7..220245e9761 100644
--- a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-objc.md
@@ -206,15 +206,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -235,18 +230,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-swift.md
index efe5f1daaea..cb3a21aa1a6 100644
--- a/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.67/_integration-with-exisiting-apps-swift.md
@@ -172,15 +172,10 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -201,18 +196,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.67/accessibility.md b/website/versioned_docs/version-0.67/accessibility.md
index bde7cf3d297..18a4f5fdd55 100644
--- a/website/versioned_docs/version-0.67/accessibility.md
+++ b/website/versioned_docs/version-0.67/accessibility.md
@@ -174,12 +174,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -233,11 +233,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -262,16 +262,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.67/actionsheetios.md b/website/versioned_docs/version-0.67/actionsheetios.md
index 81008847013..c61fa8c51de 100644
--- a/website/versioned_docs/version-0.67/actionsheetios.md
+++ b/website/versioned_docs/version-0.67/actionsheetios.md
@@ -87,13 +87,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.67/alertios.md b/website/versioned_docs/version-0.67/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.67/alertios.md
+++ b/website/versioned_docs/version-0.67/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.67/animated.md b/website/versioned_docs/version-0.67/animated.md
index 0e278ac247c..e805df991eb 100644
--- a/website/versioned_docs/version-0.67/animated.md
+++ b/website/versioned_docs/version-0.67/animated.md
@@ -201,7 +201,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -537,7 +537,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.67/animations.md b/website/versioned_docs/version-0.67/animations.md
index 18704441310..55165d381a7 100644
--- a/website/versioned_docs/version-0.67/animations.md
+++ b/website/versioned_docs/version-0.67/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -669,7 +669,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -684,11 +684,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -710,10 +710,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.67/asyncstorage.md b/website/versioned_docs/version-0.67/asyncstorage.md
index 04e507f8b57..7076624fe7b 100644
--- a/website/versioned_docs/version-0.67/asyncstorage.md
+++ b/website/versioned_docs/version-0.67/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.67/building-for-tv.md b/website/versioned_docs/version-0.67/building-for-tv.md
index f5e52bf1400..1a66d4a7c04 100644
--- a/website/versioned_docs/version-0.67/building-for-tv.md
+++ b/website/versioned_docs/version-0.67/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.67/communication-android.md b/website/versioned_docs/version-0.67/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.67/communication-android.md
+++ b/website/versioned_docs/version-0.67/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.67/communication-ios.md b/website/versioned_docs/version-0.67/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.67/communication-ios.md
+++ b/website/versioned_docs/version-0.67/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.67/custom-webview-android.md b/website/versioned_docs/version-0.67/custom-webview-android.md
index 808d7364faa..ad83e1f4b9e 100644
--- a/website/versioned_docs/version-0.67/custom-webview-android.md
+++ b/website/versioned_docs/version-0.67/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
-
+
Press me!
diff --git a/website/versioned_docs/version-0.67/dynamiccolorios.md b/website/versioned_docs/version-0.67/dynamiccolorios.md
index 946cb865359..2cc219ea8c6 100644
--- a/website/versioned_docs/version-0.67/dynamiccolorios.md
+++ b/website/versioned_docs/version-0.67/dynamiccolorios.md
@@ -12,7 +12,7 @@ DynamicColorIOS({
light: color,
dark: color,
highContrastLight: color, // (optional) will fallback to "light" if not provided
- highContrastDark: color // (optional) will fallback to "dark" if not provided
+ highContrastDark: color, // (optional) will fallback to "dark" if not provided
});
```
@@ -39,17 +39,17 @@ At runtime, the system will choose which of the colors to display depending on t
## Example
```jsx
-import { DynamicColorIOS } from 'react-native';
+import {DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
- light: 'midnightblue'
+ light: 'midnightblue',
});
const customContrastDynamicTextColor = DynamicColorIOS({
dark: 'darkgray',
light: 'lightgray',
highContrastDark: 'black',
- highContrastLight: 'white'
+ highContrastLight: 'white',
});
```
diff --git a/website/versioned_docs/version-0.67/flatlist.md b/website/versioned_docs/version-0.67/flatlist.md
index 0398e1181c3..04b61618ca4 100644
--- a/website/versioned_docs/version-0.67/flatlist.md
+++ b/website/versioned_docs/version-0.67/flatlist.md
@@ -181,7 +181,7 @@ Inherits [ScrollView Props](scrollview.md#props), unless it is nested in another
### Required
**`renderItem`**
```jsx
-renderItem({ item, index, separators });
+renderItem({item, index, separators});
```
Takes an item from `data` and renders it into the list.
@@ -207,23 +207,20 @@ Example usage:
(
+ (({highlighted}) => (
this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}>
-
+
{item.title}
diff --git a/website/versioned_docs/version-0.67/headless-js-android.md b/website/versioned_docs/version-0.67/headless-js-android.md
index 8199ec28ec5..d36678b0462 100644
--- a/website/versioned_docs/version-0.67/headless-js-android.md
+++ b/website/versioned_docs/version-0.67/headless-js-android.md
@@ -10,16 +10,16 @@ Headless JS is a way to run tasks in JavaScript while your app is in the backgro
A task is an async function that you register on `AppRegistry`, similar to registering React applications:
```jsx
-import { AppRegistry } from 'react-native';
+import {AppRegistry} from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
- require('SomeTaskName')
+ require('SomeTaskName'),
);
```
Then, in `SomeTaskName.js`:
```jsx
-module.exports = async (taskData) => {
+module.exports = async taskData => {
// do stuff
};
```
diff --git a/website/versioned_docs/version-0.67/hermes.md b/website/versioned_docs/version-0.67/hermes.md
index 7d758d715f7..3cc9264a808 100644
--- a/website/versioned_docs/version-0.67/hermes.md
+++ b/website/versioned_docs/version-0.67/hermes.md
@@ -9,10 +9,6 @@ title: Using Hermes
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
-First, ensure you're using at least version 0.60.4 of React Native.
-
-If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. After upgrading the app, make sure everything works before trying to switch to Hermes.
-
> ## Note for RN compatibility.
>
> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
diff --git a/website/versioned_docs/version-0.67/images.md b/website/versioned_docs/version-0.67/images.md
index 65d73678838..6843c52b9bb 100644
--- a/website/versioned_docs/version-0.67/images.md
+++ b/website/versioned_docs/version-0.67/images.md
@@ -81,8 +81,8 @@ For images included via Xcode asset catalogs or in the Android drawable folder,
```jsx
{
- this.setState({ isHungry: false });
+ this.setState({isHungry: false});
}}
// ..
/>
diff --git a/website/versioned_docs/version-0.67/javascript-environment.md b/website/versioned_docs/version-0.67/javascript-environment.md
index 293903c6587..2117ada8893 100644
--- a/website/versioned_docs/version-0.67/javascript-environment.md
+++ b/website/versioned_docs/version-0.67/javascript-environment.md
@@ -7,12 +7,13 @@ import TableRow from '@site/core/TableRowWithCodeBlock';
## JavaScript Runtime
-When using React Native, you're going to be running your JavaScript code in two environments:
+When using React Native, you're going to be running your JavaScript code in up to three environments:
- In most cases, React Native will use [JavaScriptCore](http://trac.webkit.org/wiki/JavaScriptCore), the JavaScript engine that powers Safari. Note that on iOS, JavaScriptCore does not use JIT due to the absence of writable executable memory in iOS apps.
+- If enabled, React Native will use [Hermes](hermes), an open-source JavaScript engine optimized for React Native.
- When using Chrome debugging, all JavaScript code runs within Chrome itself, communicating with native code via WebSockets. Chrome uses [V8](https://v8.dev/) as its JavaScript engine.
-While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JavaScript engines in the future, so it's best to avoid relying on specifics of any runtime.
+While these environments are very similar, you may end up hitting some inconsistencies. It is best to avoid relying on specifics of any runtime.
## JavaScript Syntax Transformers
@@ -65,7 +66,7 @@ A full list of React Native's enabled transformations can be found in [metro-rea
ECMAScript 2022 (ES13) Stage 1 Proposal Miscellaneous getConstants() {
The constant can then be accessed by invoking `getConstants` on the native module in JS:
```jsx
-const { DEFAULT_EVENT_NAME } = CalendarModule.getConstants();
+const {DEFAULT_EVENT_NAME} = CalendarModule.getConstants();
console.log(DEFAULT_EVENT_NAME);
```
@@ -379,9 +379,9 @@ const onPress = () => {
CalendarModule.createCalendarEvent(
'Party',
'My House',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -410,7 +410,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -430,12 +430,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -469,7 +469,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'My House'
+ 'My House',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.67/native-modules-ios.md b/website/versioned_docs/version-0.67/native-modules-ios.md
index ae27042c3eb..c067d396b3f 100644
--- a/website/versioned_docs/version-0.67/native-modules-ios.md
+++ b/website/versioned_docs/version-0.67/native-modules-ios.md
@@ -74,7 +74,7 @@ RCT_EXPORT_MODULE(CalendarModuleFoo);
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModuleFoo } = ReactNative.NativeModules;
+const {CalendarModuleFoo} = ReactNative.NativeModules;
```
If you do not specify a name, the JavaScript module name will match the Objective-C class name, with any "RCT" or "RK" prefixes removed.
@@ -89,7 +89,7 @@ RCT_EXPORT_MODULE();
The native module can then be accessed in JS like this:
```jsx
-const { CalendarModule } = ReactNative.NativeModules;
+const {CalendarModule} = ReactNative.NativeModules;
```
### Export a Native Method to JavaScript
@@ -137,7 +137,7 @@ Find a place in your application where you would like to add a call to the nativ
```jsx
import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import {NativeModules, Button} from 'react-native';
const NewModuleButton = () => {
const onPress = () => {
@@ -159,13 +159,13 @@ export default NewModuleButton;
In order to access your native module from JavaScript you need to first import `NativeModules` from React Native:
```jsx
-import { NativeModules } from 'react-native';
+import {NativeModules} from 'react-native';
```
You can then access the `CalendarModule` native module off of `NativeModules`.
```jsx
-const { CalendarModule } = NativeModules;
+const {CalendarModule} = NativeModules;
```
Now that you have the CalendarModule native module available, you can invoke your native method `createCalendarEvent()`. Below it is added to the `onPress()` method in `NewModuleButton`:
@@ -213,8 +213,8 @@ To save consumers of your native module from needing to do that each time they w
* 1. String name: A string representing the name of the event
* 2. String location: A string representing the location of the event
*/
-import { NativeModules } from 'react-native';
-const { CalendarModule } = NativeModules;
+import {NativeModules} from 'react-native';
+const {CalendarModule} = NativeModules;
export default CalendarModule;
```
@@ -330,9 +330,9 @@ const onSubmit = () => {
CalendarModule.createCalendarEvent(
'Party',
'04-12-2020',
- (eventId) => {
+ eventId => {
console.log(`Created a new event with id ${eventId}`);
- }
+ },
);
};
```
@@ -361,7 +361,7 @@ const onPress = () => {
console.error(`Error found! ${error}`);
}
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -392,12 +392,12 @@ const onPress = () => {
CalendarModule.createCalendarEventCallback(
'testName',
'testLocation',
- (error) => {
+ error => {
console.error(`Error found! ${error}`);
},
- (eventId) => {
+ eventId => {
console.log(`event id ${eventId} returned`);
- }
+ },
);
};
```
@@ -433,7 +433,7 @@ const onSubmit = async () => {
try {
const eventId = await CalendarModule.createCalendarEvent(
'Party',
- 'my house'
+ 'my house',
);
console.log(`Created a new event with id ${eventId}`);
} catch (e) {
diff --git a/website/versioned_docs/version-0.67/navigation.md b/website/versioned_docs/version-0.67/navigation.md
index e8aad6d3d75..c48e37aa9c3 100644
--- a/website/versioned_docs/version-0.67/navigation.md
+++ b/website/versioned_docs/version-0.67/navigation.md
@@ -49,7 +49,7 @@ Now, you need to wrap the whole app in `NavigationContainer`. Usually you'd do t
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
@@ -70,8 +70,8 @@ Now you can create an app with a home screen and a profile screen:
```jsx
import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
@@ -82,7 +82,7 @@ const MyStack = () => {
- navigation.navigate('Profile', { name: 'Jane' })
+ navigation.navigate('Profile', {name: 'Jane'})
}
/>
);
};
-const ProfileScreen = ({ navigation, route }) => {
+const ProfileScreen = ({navigation, route}) => {
return This is {route.params.name}'s profile ;
};
```
diff --git a/website/versioned_docs/version-0.67/network.md b/website/versioned_docs/version-0.67/network.md
index 786e4db02cc..007662031c7 100644
--- a/website/versioned_docs/version-0.67/network.md
+++ b/website/versioned_docs/version-0.67/network.md
@@ -26,12 +26,12 @@ fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
Accept: 'application/json',
- 'Content-Type': 'application/json'
+ 'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
- secondParam: 'yourOtherValue'
- })
+ secondParam: 'yourOtherValue',
+ }),
});
```
@@ -46,11 +46,11 @@ Networking is an inherently asynchronous operation. Fetch method will return a [
```jsx
const getMoviesFromApi = () => {
return fetch('https://reactnative.dev/movies.json')
- .then((response) => response.json())
- .then((json) => {
+ .then(response => response.json())
+ .then(json => {
return json.movies;
})
- .catch((error) => {
+ .catch(error => {
console.error(error);
});
};
@@ -62,7 +62,7 @@ You can also use the `async` / `await` syntax in a React Native app:
const getMoviesFromApiAsync = async () => {
try {
const response = await fetch(
- 'https://reactnative.dev/movies.json'
+ 'https://reactnative.dev/movies.json',
);
const json = await response.json();
return json.movies;
@@ -183,7 +183,7 @@ The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt
```jsx
var request = new XMLHttpRequest();
-request.onreadystatechange = (e) => {
+request.onreadystatechange = e => {
if (request.readyState !== 4) {
return;
}
@@ -213,17 +213,17 @@ ws.onopen = () => {
ws.send('something'); // send a message
};
-ws.onmessage = (e) => {
+ws.onmessage = e => {
// a message was received
console.log(e.data);
};
-ws.onerror = (e) => {
+ws.onerror = e => {
// an error occurred
console.log(e.message);
};
-ws.onclose = (e) => {
+ws.onclose = e => {
// connection closed
console.log(e.code, e.reason);
};
diff --git a/website/versioned_docs/version-0.67/panresponder.md b/website/versioned_docs/version-0.67/panresponder.md
index 220a5de64fe..e075ef77a98 100644
--- a/website/versioned_docs/version-0.67/panresponder.md
+++ b/website/versioned_docs/version-0.67/panresponder.md
@@ -68,8 +68,8 @@ const ExampleComponent = () => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
- }
- })
+ },
+ }),
).current;
return
+
Load
@@ -110,18 +110,18 @@ In your root file (index.(ios|android).js) you can add the following after the i
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
- .filter((moduleId) => modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
- .filter((moduleId) => !modules[moduleId].isInitialized)
- .map((moduleId) => modules[moduleId].verboseName);
+ .filter(moduleId => !modules[moduleId].isInitialized)
+ .map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
- waitingModuleNames.length
+ waitingModuleNames.length,
);
// grab this text blob, and put it in a file named packager/modulePaths.js
@@ -129,15 +129,15 @@ console.log(
`module.exports = ${JSON.stringify(
loadedModuleNames.sort(),
null,
- 2
- )};`
+ 2,
+ )};`,
);
```
When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.
```js
-require.Systrace.beginEvent = (message) => {
+require.Systrace.beginEvent = message => {
if (message.includes(problematicModule)) {
throw new Error();
}
@@ -162,18 +162,18 @@ const config = {
transformer: {
getTransformOptions: () => {
const moduleMap = {};
- modulePaths.forEach((path) => {
+ modulePaths.forEach(path => {
if (fs.existsSync(path)) {
moduleMap[resolve(path)] = true;
}
});
return {
preloadedModules: moduleMap,
- transform: { inlineRequires: { blockList: moduleMap } }
+ transform: {inlineRequires: {blockList: moduleMap}},
};
- }
+ },
},
- projectRoot: ROOT_FOLDER
+ projectRoot: ROOT_FOLDER,
};
module.exports = config;
diff --git a/website/versioned_docs/version-0.67/roottag.md b/website/versioned_docs/version-0.67/roottag.md
index cd3e47e3c7b..c486b6f93c1 100644
--- a/website/versioned_docs/version-0.67/roottag.md
+++ b/website/versioned_docs/version-0.67/roottag.md
@@ -26,14 +26,14 @@ In versions 0.65 and below, RootTag is accessed via a [legacy context](https://g
How to access `RootTag` via the `RootTagContext`.
```js
-import { RootTagContext } from 'react-native';
+import {RootTagContext} from 'react-native';
import NativeAnalytics from 'native-analytics';
import NativeNavigation from 'native-navigation';
function ScreenA() {
const rootTag = useContext(RootTagContext);
- const updateTitle = (title) => {
+ const updateTitle = title => {
NativeNavigation.setTitle(rootTag, title);
};
diff --git a/website/versioned_docs/version-0.67/scrollview.md b/website/versioned_docs/version-0.67/scrollview.md
index b4471977e5f..bb8846cdc6f 100644
--- a/website/versioned_docs/version-0.67/scrollview.md
+++ b/website/versioned_docs/version-0.67/scrollview.md
@@ -752,7 +752,7 @@ Scrolls to a given x, y offset, either immediately, with a smooth animation.
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
diff --git a/website/versioned_docs/version-0.67/state.md b/website/versioned_docs/version-0.67/state.md
index 85dd5086f07..a22ad3024ad 100644
--- a/website/versioned_docs/version-0.67/state.md
+++ b/website/versioned_docs/version-0.67/state.md
@@ -16,31 +16,31 @@ import { Text, View } from 'react-native';
const Blink = (props) => {
const [isShowingText, setIsShowingText] = useState(true);
- useEffect(() => {
- const toggle = setInterval(() => {
- setIsShowingText(!isShowingText);
- }, 1000);
+ useEffect(() => {
+ const toggle = setInterval(() => {
+ setIsShowingText(!isShowingText);
+ }, 1000);
- return () => clearInterval(toggle);
- })
+ return () => clearInterval(toggle);
+ });
if (!isShowingText) {
return null;
}
return {props.text} ;
-}
+};
const BlinkApp = () => {
return (
-
-
+
);
-}
+};
export default BlinkApp;
```
diff --git a/website/versioned_docs/version-0.67/testing-overview.md b/website/versioned_docs/version-0.67/testing-overview.md
index 4216c7ff9cd..9bb25763527 100644
--- a/website/versioned_docs/version-0.67/testing-overview.md
+++ b/website/versioned_docs/version-0.67/testing-overview.md
@@ -153,13 +153,13 @@ function GroceryShoppingList() {
setGroceryItem(text)}
+ onChangeText={text => setGroceryItem(text)}
/>
{item}
))}
@@ -186,13 +186,13 @@ Component testing libraries such as [React Native Testing Library](https://calls
```jsx
test('given empty GroceryShoppingList, user can add an item to it', () => {
- const { getByPlaceholder, getByText, getAllByText } = render(
-
-
- {this.props.children}
-
+ {this.props.children}
);
}
@@ -234,9 +232,9 @@ Composing `MyAppText` in this way ensures that we get the styles from a top-leve
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```jsx
-
+
I am bold
- and red
+ and red
```
@@ -671,7 +669,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
{
lines: [
TextLayout,
- TextLayout
+ TextLayout,
// ...
];
target: 1127;
diff --git a/website/versioned_docs/version-0.67/timepickerandroid.md b/website/versioned_docs/version-0.67/timepickerandroid.md
index b5a74224b92..c39d3da6ac1 100644
--- a/website/versioned_docs/version-0.67/timepickerandroid.md
+++ b/website/versioned_docs/version-0.67/timepickerandroid.md
@@ -11,15 +11,15 @@ Opens the standard Android time picker dialog.
```jsx
try {
- const { action, hour, minute } = await TimePickerAndroid.open({
+ const {action, hour, minute} = await TimePickerAndroid.open({
hour: 14,
minute: 0,
- is24Hour: false // Will display '2 PM'
+ is24Hour: false, // Will display '2 PM'
});
if (action !== TimePickerAndroid.dismissedAction) {
// Selected hour (0-23), minute (0-59)
}
-} catch ({ code, message }) {
+} catch ({code, message}) {
console.warn('Cannot open time picker', message);
}
```
diff --git a/website/versioned_docs/version-0.67/touchablehighlight.md b/website/versioned_docs/version-0.67/touchablehighlight.md
index 32184698249..ca9fcca8eda 100644
--- a/website/versioned_docs/version-0.67/touchablehighlight.md
+++ b/website/versioned_docs/version-0.67/touchablehighlight.md
@@ -16,7 +16,7 @@ TouchableHighlight must have one child (not zero or more than one). If you wish
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.67/touchablewithoutfeedback.md b/website/versioned_docs/version-0.67/touchablewithoutfeedback.md
index 41b8fe80e13..df5ebb558ee 100644
--- a/website/versioned_docs/version-0.67/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.67/touchablewithoutfeedback.md
@@ -14,7 +14,7 @@ Do not use unless you have a very good reason. All elements that respond to pres
```jsx
function MyComponent(props) {
return (
-
+
My Component
);
diff --git a/website/versioned_docs/version-0.67/transforms.md b/website/versioned_docs/version-0.67/transforms.md
index 35b0e882f61..42bb8f02ac1 100644
--- a/website/versioned_docs/version-0.67/transforms.md
+++ b/website/versioned_docs/version-0.67/transforms.md
@@ -275,13 +275,13 @@ export default App;
The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:
```js
-transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]);
+transform([{rotateX: '45deg'}, {rotateZ: '0.785398rad'}]);
```
The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:
```js
-transform([{ skewX: '45deg' }]);
+transform([{skewX: '45deg'}]);
```
| Type | Required |
diff --git a/website/versioned_docs/version-0.67/tutorial.md b/website/versioned_docs/version-0.67/tutorial.md
index c851415ebf0..6ac0590baa4 100644
--- a/website/versioned_docs/version-0.67/tutorial.md
+++ b/website/versioned_docs/version-0.67/tutorial.md
@@ -144,8 +144,8 @@ const App = () => {
```jsx
// React Native Counter Example using Hooks!
-import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet } from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
@@ -166,8 +166,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center'
- }
+ alignItems: 'center',
+ },
});
```
diff --git a/website/versioned_docs/version-0.67/typescript.md b/website/versioned_docs/version-0.67/typescript.md
index b7c18356364..2561347a94c 100644
--- a/website/versioned_docs/version-0.67/typescript.md
+++ b/website/versioned_docs/version-0.67/typescript.md
@@ -116,7 +116,14 @@ yarn add -D typescript @types/jest @types/react @types/react-native @types/react
```js
module.exports = {
preset: 'react-native',
- moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+ moduleFileExtensions: [
+ 'ts',
+ 'tsx',
+ 'js',
+ 'jsx',
+ 'json',
+ 'node',
+ ],
};
```
@@ -136,7 +143,7 @@ You can provide an interface for a React Component's [Props](props) and [State](
```tsx title="components/Hello.tsx"
import React from 'react';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
@@ -145,17 +152,17 @@ export type Props = {
const Hello: React.FC = ({
name,
- baseEnthusiasmLevel = 0
+ baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
- baseEnthusiasmLevel
+ baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
- enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
+ enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
@@ -189,13 +196,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
- justifyContent: 'center'
+ justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
- margin: 16
- }
+ margin: 16,
+ },
});
export default Hello;
diff --git a/website/versioned_docs/version-0.67/usecolorscheme.md b/website/versioned_docs/version-0.67/usecolorscheme.md
index 54c0d983014..02173f0324b 100644
--- a/website/versioned_docs/version-0.67/usecolorscheme.md
+++ b/website/versioned_docs/version-0.67/usecolorscheme.md
@@ -4,7 +4,7 @@ title: useColorScheme
---
```jsx
-import { useColorScheme } from 'react-native';
+import {useColorScheme} from 'react-native';
```
The `useColorScheme` React hook provides and subscribes to color scheme updates from the [`Appearance`](appearance) module. The return value indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
diff --git a/website/versioned_docs/version-0.67/usewindowdimensions.md b/website/versioned_docs/version-0.67/usewindowdimensions.md
index 49517624e90..95970499751 100644
--- a/website/versioned_docs/version-0.67/usewindowdimensions.md
+++ b/website/versioned_docs/version-0.67/usewindowdimensions.md
@@ -4,13 +4,13 @@ title: useWindowDimensions
---
```jsx
-import { useWindowDimensions } from 'react-native';
+import {useWindowDimensions} from 'react-native';
```
-`useWindowDimensions` automatically updates `width` and `height` values when screen size changes. You can get your application window's width and height like so:
+`useWindowDimensions` hook automatically updates all of its values when screen size or font scale changes. You can get your application window's width and height like so:
```jsx
-const { height, width } = useWindowDimensions();
+const {height, width} = useWindowDimensions();
```
## Example
@@ -20,10 +20,16 @@ import React from "react";
import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
const App = () => {
- const window = useWindowDimensions();
+ const { height, width, scale, fontScale } = useWindowDimensions();
return (
- {`Window Dimensions: height - ${window.height}, width - ${window.width}`}
+
+ Window Dimension Data
+
+ Height: {height}
+ Width: {width}
+ Font scale: {fontScale}
+ Pixel ratio: {scale}
);
}
@@ -32,14 +38,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "center",
alignItems: "center"
+ },
+ header: {
+ fontSize: 20,
+ marginBottom: 12
}
});
export default App;
```
-- The [useDimensions](https://github.com/react-native-community/react-native-hooks#usedimensions) hook from the community [React Native hooks](https://github.com/react-native-community/react-native-hooks) library aims to make handling screen/window size changes easier to work with.
-- [React Native Responsive Dimensions](https://github.com/DaniAkash/react-native-responsive-dimensions) also comes with responsive hooks.
+- The [`useDimensions`](https://github.com/react-native-community/hooks#usedimensions) hook from the community [React Native Hooks](https://github.com/react-native-community/hooks) library aims to make handling screen/window size changes easier to work with.
+- [React Native Responsive Dimensions](https://github.com/react-native-toolkit/react-native-responsive-dimensions) also comes with responsive hooks.
## Properties
@@ -69,9 +79,10 @@ The height in pixels of the window or screen your app occupies.
useWindowDimensions().scale;
```
-The pixel ratio of the device your app is running on.
+The pixel ratio of the device your app is running on. The values can be:
-> A value of `1` indicates PPI/DPI of 96 (76 on some platforms). `2` indicates a Retina or high DPI display.
+- `1` which indicates that one point equals one pixel (usually PPI/DPI of 96, 76 on some platforms).
+- `2` or `3` which indicates a Retina or high DPI display.
---
diff --git a/website/versioned_docs/version-0.67/virtualizedlist.md b/website/versioned_docs/version-0.67/virtualizedlist.md
index b1abd2c3ac0..78a7316ac75 100644
--- a/website/versioned_docs/version-0.67/virtualizedlist.md
+++ b/website/versioned_docs/version-0.67/virtualizedlist.md
@@ -571,7 +571,7 @@ hasMore () => boolean;
### `scrollToEnd()`
```jsx
-scrollToEnd(([options]: { animated: boolean }));
+scrollToEnd(([options]: {animated: boolean}));
```
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
diff --git a/website/versioned_docs/version-0.68/_getting-started-macos-ios.md b/website/versioned_docs/version-0.68/_getting-started-macos-ios.md
index 83f5c5bb321..942887a2ed9 100644
--- a/website/versioned_docs/version-0.68/_getting-started-macos-ios.md
+++ b/website/versioned_docs/version-0.68/_getting-started-macos-ios.md
@@ -1,5 +1,3 @@
-import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
-
## Installing dependencies
You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.
@@ -47,8 +45,6 @@ sudo gem install cocoapods
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
-`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
diff --git a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-java.md b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-java.md
index f090f7083be..6f9ec198e9b 100644
--- a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-java.md
+++ b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-java.md
@@ -156,12 +156,7 @@ In your `index.js`, create your component. In our sample here, we will add a ` {
return (
@@ -173,18 +168,18 @@ const HelloWorld = () => {
var styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
- margin: 10
- }
+ margin: 10,
+ },
});
AppRegistry.registerComponent(
'MyReactNativeApp',
- () => HelloWorld
+ () => HelloWorld,
);
```
diff --git a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-objc.md b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-objc.md
index 893187c9b91..220245e9761 100644
--- a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-objc.md
+++ b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-objc.md
@@ -1,4 +1,4 @@
-import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
## Key Concepts
@@ -186,8 +186,6 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total
> If this fails with errors mentioning `xcrun`, make sure that in Xcode in **Preferences > Locations** the Command Line Tools are assigned.
- {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -237,18 +230,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-swift.md b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-swift.md
index a1c8ea18456..cb3a21aa1a6 100644
--- a/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-swift.md
+++ b/website/versioned_docs/version-0.68/_integration-with-exisiting-apps-swift.md
@@ -1,5 +1,3 @@
-import M1Cocoapods from './\_markdown-m1-cocoapods.mdx';
-
## Key Concepts
The keys to integrating React Native components into your iOS application are to:
@@ -154,8 +152,6 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total
> If you get a warning such as "_The `swift-2048 [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig`. This can lead to problems with the CocoaPods installation_", then make sure the `Framework Search Paths` in `Build Settings` for both `Debug` and `Release` only contain `$(inherited)`.
- {
- const contents = scores.map((score) => (
+import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+
+const RNHighScores = ({scores}) => {
+ const contents = scores.map(score => (
{score.name}:{score.value}
{'\n'}
@@ -205,18 +196,18 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- backgroundColor: '#FFFFFF'
+ backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
- margin: 10
+ margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
- marginBottom: 5
- }
+ marginBottom: 5,
+ },
});
// Module name
diff --git a/website/versioned_docs/version-0.68/accessibility.md b/website/versioned_docs/version-0.68/accessibility.md
index 1390cf83733..953f5fb04cd 100644
--- a/website/versioned_docs/version-0.68/accessibility.md
+++ b/website/versioned_docs/version-0.68/accessibility.md
@@ -191,12 +191,12 @@ In the case of two overlapping UI components with the same parent, default acces
```jsx
First layout
Second layout
@@ -250,11 +250,11 @@ To handle action requests, a component must implement an `onAccessibilityAction`
{
+ onAccessibilityAction={event => {
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
@@ -279,16 +279,12 @@ The `AccessibilityInfo` API allows you to determine whether or not a screen read
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method âsendAccessibilityEventâ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are `typeWindowStateChanged`, `typeViewFocused` and `typeViewClicked`.
```jsx
-import {
- Platform,
- UIManager,
- findNodeHandle
-} from 'react-native';
+import {Platform, UIManager, findNodeHandle} from 'react-native';
if (Platform.OS === 'android') {
UIManager.sendAccessibilityEvent(
findNodeHandle(this),
- UIManager.AccessibilityEventTypes.typeViewFocused
+ UIManager.AccessibilityEventTypes.typeViewFocused,
);
}
```
diff --git a/website/versioned_docs/version-0.68/actionsheetios.md b/website/versioned_docs/version-0.68/actionsheetios.md
index 81008847013..c61fa8c51de 100644
--- a/website/versioned_docs/version-0.68/actionsheetios.md
+++ b/website/versioned_docs/version-0.68/actionsheetios.md
@@ -87,13 +87,13 @@ ActionSheetIOS.showActionSheetWithOptions(
{
options: ['Cancel', 'Remove'],
destructiveButtonIndex: 1,
- cancelButtonIndex: 0
+ cancelButtonIndex: 0,
},
- (buttonIndex) => {
+ buttonIndex => {
if (buttonIndex === 1) {
/* destructive action */
}
- }
+ },
);
```
diff --git a/website/versioned_docs/version-0.68/alertios.md b/website/versioned_docs/version-0.68/alertios.md
index e338397bbd6..6b600947bd0 100644
--- a/website/versioned_docs/version-0.68/alertios.md
+++ b/website/versioned_docs/version-0.68/alertios.md
@@ -12,15 +12,15 @@ Creating an iOS alert:
```jsx
AlertIOS.alert(
'Sync Complete',
- 'All your data are belong to us.'
+ 'All your data are belong to us.',
);
```
Creating an iOS prompt:
```jsx
-AlertIOS.prompt('Enter a value', null, (text) =>
- console.log('You entered ' + text)
+AlertIOS.prompt('Enter a value', null, text =>
+ console.log('You entered ' + text),
);
```
@@ -59,13 +59,13 @@ AlertIOS.alert(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'Install',
- onPress: () => console.log('Install Pressed')
- }
- ]
+ onPress: () => console.log('Install Pressed'),
+ },
+ ],
);
```
@@ -100,15 +100,15 @@ AlertIOS.prompt(
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
- style: 'cancel'
+ style: 'cancel',
},
{
text: 'OK',
- onPress: (password) =>
- console.log('OK Pressed, password: ' + password)
- }
+ onPress: password =>
+ console.log('OK Pressed, password: ' + password),
+ },
],
- 'secure-text'
+ 'secure-text',
);
```
@@ -120,9 +120,9 @@ Example with the default button and a custom callback:
AlertIOS.prompt(
'Update username',
null,
- (text) => console.log('Your username is ' + text),
+ text => console.log('Your username is ' + text),
null,
- 'default'
+ 'default',
);
```
diff --git a/website/versioned_docs/version-0.68/animated.md b/website/versioned_docs/version-0.68/animated.md
index 0e278ac247c..e805df991eb 100644
--- a/website/versioned_docs/version-0.68/animated.md
+++ b/website/versioned_docs/version-0.68/animated.md
@@ -201,7 +201,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
@@ -537,7 +537,7 @@ Animations are started by calling start() on your animation. start() takes a com
Start example with callback:
```jsx
-Animated.timing({}).start(({ finished }) => {
+Animated.timing({}).start(({finished}) => {
/* completion callback */
});
```
diff --git a/website/versioned_docs/version-0.68/animations.md b/website/versioned_docs/version-0.68/animations.md
index 18704441310..55165d381a7 100644
--- a/website/versioned_docs/version-0.68/animations.md
+++ b/website/versioned_docs/version-0.68/animations.md
@@ -78,7 +78,7 @@ For example, if we want to create a 2-second long animation of an object that sl
Animated.timing(this.state.xPosition, {
toValue: 100,
easing: Easing.back(),
- duration: 2000
+ duration: 2000,
}).start();
```
@@ -95,19 +95,19 @@ Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
- velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
- deceleration: 0.997
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
- toValue: { x: 0, y: 0 } // return to start
+ toValue: {x: 0, y: 0}, // return to start
}),
Animated.timing(twirl, {
// and twirl
- toValue: 360
- })
- ])
+ toValue: 360,
+ }),
+ ]),
]).start(); // start the sequence group
```
@@ -126,7 +126,7 @@ const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
- toValue: 2
+ toValue: 2,
}).start();
```
@@ -139,7 +139,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
```jsx
value.interpolate({
inputRange: [0, 1],
- outputRange: [0, 100]
+ outputRange: [0, 100],
});
```
@@ -162,7 +162,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
```jsx
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
- outputRange: [300, 0, 1, 0, 0]
+ outputRange: [300, 0, 1, 0, 0],
});
```
@@ -188,7 +188,7 @@ Input | Output
```jsx
value.interpolate({
inputRange: [0, 360],
- outputRange: ['0deg', '360deg']
+ outputRange: ['0deg', '360deg'],
});
```
@@ -199,12 +199,12 @@ value.interpolate({
Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
```jsx
-Animated.spring(follower, { toValue: leader }).start();
+Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
- outputRange: [1, 0]
- })
+ outputRange: [1, 0],
+ }),
}).start();
```
@@ -669,7 +669,7 @@ Using the native driver for normal animations is straightforward. You can add `u
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
- useNativeDriver: true // <-- Add this
+ useNativeDriver: true, // <-- Add this
}).start();
```
@@ -684,11 +684,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
[
{
nativeEvent: {
- contentOffset: { y: this.state.animatedValue }
- }
- }
+ contentOffset: {y: this.state.animatedValue},
+ },
+ },
],
- { useNativeDriver: true } // <-- Add this
+ {useNativeDriver: true}, // <-- Add this
)}>
{content}
@@ -710,10 +710,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
App1
diff --git a/website/versioned_docs/version-0.68/asyncstorage.md b/website/versioned_docs/version-0.68/asyncstorage.md
index 04e507f8b57..7076624fe7b 100644
--- a/website/versioned_docs/version-0.68/asyncstorage.md
+++ b/website/versioned_docs/version-0.68/asyncstorage.md
@@ -16,7 +16,7 @@ The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript
Importing the `AsyncStorage` library:
```jsx
-import { AsyncStorage } from 'react-native';
+import {AsyncStorage} from 'react-native';
```
Persisting data:
@@ -26,7 +26,7 @@ _storeData = async () => {
try {
await AsyncStorage.setItem(
'@MySuperStore:key',
- 'I like to save it.'
+ 'I like to save it.',
);
} catch (error) {
// Error saving data
@@ -132,12 +132,12 @@ Example:
let UID123_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// You only need to define what will be added or updated
let UID123_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
AsyncStorage.setItem(
@@ -151,9 +151,9 @@ AsyncStorage.setItem(
AsyncStorage.getItem('UID123', (err, result) => {
console.log(result);
});
- }
+ },
);
- }
+ },
);
// Console log result:
@@ -284,7 +284,7 @@ Example:
```jsx
let keys = ['k1', 'k2'];
-AsyncStorage.multiRemove(keys, (err) => {
+AsyncStorage.multiRemove(keys, err => {
// keys k1 & k2 removed, if they existed
// do most stuff after removal (if you want)
});
@@ -316,39 +316,39 @@ Example:
let UID234_object = {
name: 'Chris',
age: 30,
- traits: { hair: 'brown', eyes: 'brown' }
+ traits: {hair: 'brown', eyes: 'brown'},
};
// first user, delta values
let UID234_delta = {
age: 31,
- traits: { eyes: 'blue', shoe_size: 10 }
+ traits: {eyes: 'blue', shoe_size: 10},
};
// second user, initial values
let UID345_object = {
name: 'Marge',
age: 25,
- traits: { hair: 'blonde', eyes: 'blue' }
+ traits: {hair: 'blonde', eyes: 'blue'},
};
// second user, delta values
let UID345_delta = {
age: 26,
- traits: { eyes: 'green', shoe_size: 6 }
+ traits: {eyes: 'green', shoe_size: 6},
};
let multi_set_pairs = [
['UID234', JSON.stringify(UID234_object)],
- ['UID345', JSON.stringify(UID345_object)]
+ ['UID345', JSON.stringify(UID345_object)],
];
let multi_merge_pairs = [
['UID234', JSON.stringify(UID234_delta)],
- ['UID345', JSON.stringify(UID345_delta)]
+ ['UID345', JSON.stringify(UID345_delta)],
];
-AsyncStorage.multiSet(multi_set_pairs, (err) => {
- AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
+AsyncStorage.multiSet(multi_set_pairs, err => {
+ AsyncStorage.multiMerge(multi_merge_pairs, err => {
AsyncStorage.multiGet(['UID234', 'UID345'], (err, stores) => {
stores.map((result, i, store) => {
let key = store[i][0];
diff --git a/website/versioned_docs/version-0.68/build-speed.md b/website/versioned_docs/version-0.68/build-speed.md
index 94a1a7a8ce0..5b792eeb6c1 100644
--- a/website/versioned_docs/version-0.68/build-speed.md
+++ b/website/versioned_docs/version-0.68/build-speed.md
@@ -76,16 +76,16 @@ if an intermediate compilation result was originally stored.
To install it, you can follow the [official installation instructions](https://github.com/ccache/ccache/blob/master/doc/INSTALL.md).
-On Mac OS, we can install ccache with `brew install ccache`.
+On macOS, we can install ccache with `brew install ccache`.
Once installed you can configure it as follows to cache NDK compile results:
```
-ln -s ccache /usr/local/bin/gcc
-ln -s ccache /usr/local/bin/g++
-ln -s ccache /usr/local/bin/cc
-ln -s ccache /usr/local/bin/c++
-ln -s ccache /usr/local/bin/clang
-ln -s ccache /usr/local/bin/clang++
+ln -s $(which ccache) /usr/local/bin/gcc
+ln -s $(which ccache) /usr/local/bin/g++
+ln -s $(which ccache) /usr/local/bin/cc
+ln -s $(which ccache) /usr/local/bin/c++
+ln -s $(which ccache) /usr/local/bin/clang
+ln -s $(which ccache) /usr/local/bin/clang++
```
This will create symbolic links to `ccache` inside the `/usr/local/bin/` which are called `gcc`, `g++`, and so on.
diff --git a/website/versioned_docs/version-0.68/building-for-tv.md b/website/versioned_docs/version-0.68/building-for-tv.md
index f5e52bf1400..1a66d4a7c04 100644
--- a/website/versioned_docs/version-0.68/building-for-tv.md
+++ b/website/versioned_docs/version-0.68/building-for-tv.md
@@ -59,13 +59,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
@@ -145,13 +145,13 @@ class Game2048 extends React.Component {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
- cmp.setState({ board: cmp.state.board.move(2) });
+ cmp.setState({board: cmp.state.board.move(2)});
} else if (evt && evt.eventType === 'up') {
- cmp.setState({ board: cmp.state.board.move(1) });
+ cmp.setState({board: cmp.state.board.move(1)});
} else if (evt && evt.eventType === 'left') {
- cmp.setState({ board: cmp.state.board.move(0) });
+ cmp.setState({board: cmp.state.board.move(0)});
} else if (evt && evt.eventType === 'down') {
- cmp.setState({ board: cmp.state.board.move(3) });
+ cmp.setState({board: cmp.state.board.move(3)});
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
diff --git a/website/versioned_docs/version-0.68/communication-android.md b/website/versioned_docs/version-0.68/communication-android.md
index 2add1ad1590..4322ace82c1 100644
--- a/website/versioned_docs/version-0.68/communication-android.md
+++ b/website/versioned_docs/version-0.68/communication-android.md
@@ -41,11 +41,11 @@ public class MainActivity extends ReactActivity {
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.68/communication-ios.md b/website/versioned_docs/version-0.68/communication-ios.md
index f474ab2c35a..cafb9903742 100644
--- a/website/versioned_docs/version-0.68/communication-ios.md
+++ b/website/versioned_docs/version-0.68/communication-ios.md
@@ -34,11 +34,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
```jsx
import React from 'react';
-import { View, Image } from 'react-native';
+import {View, Image} from 'react-native';
export default class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
- return {this.props.images.map(this.renderImage)} ;
diff --git a/website/versioned_docs/version-0.68/custom-webview-android.md b/website/versioned_docs/version-0.68/custom-webview-android.md
index 808d7364faa..ad83e1f4b9e 100644
--- a/website/versioned_docs/version-0.68/custom-webview-android.md
+++ b/website/versioned_docs/version-0.68/custom-webview-android.md
@@ -179,8 +179,8 @@ To use your custom web view, you'll need to create a class for it. Your class mu
To get your native component, you must use `requireNativeComponent`: the same as for regular custom components. However, you must pass in an extra third argument, `WebView.extraNativeComponentConfig`. This third argument contains prop types that are only required for native code.
```jsx
-import React, { Component, PropTypes } from 'react';
-import { WebView, requireNativeComponent } from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {WebView, requireNativeComponent} from 'react-native';
export default class CustomWebView extends Component {
static propTypes = WebView.propTypes;
@@ -189,7 +189,7 @@ export default class CustomWebView extends Component {
return (
setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
-
+