diff --git a/README.md b/README.md
index 8d857b9d5a4..ada122e2043 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ As mentioned above, the `docs` folder contains the source files for all of the d
### Versioned docs
-The React Native website is versioned as to allow users to go back and see the API reference docs for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.
+The React Native website is versioned to allow users to go back and see the API reference docs for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.
> **_Note:_** Do not edit the auto-generated files within `versioned_docs` or `versioned_sidebars` unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the docs.
@@ -116,7 +116,7 @@ The `showcase.json` file contains the list of users that are highlighted in the
1. Follow the "[Running locally](#running-locally)" instructions.
1. Save the files and check in the browser.
1. Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
-1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under `docs/next` path.
+1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under the `docs/next` path.
Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
@@ -126,7 +126,7 @@ Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
If possible, test any visual changes in all latest versions of the following browsers:
-- Chrome and Firefox on desktop.
+- Chrome and Firefox on the desktop.
- Chrome and Safari on mobile.
### Push it
diff --git a/docs/actionsheetios.md b/docs/actionsheetios.md
index 7f982030807..6896d9204f7 100644
--- a/docs/actionsheetios.md
+++ b/docs/actionsheetios.md
@@ -73,6 +73,7 @@ Display an iOS action sheet. The `options` object must contain one or more of:
- `message` (string) - a message to show below the title
- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
The 'callback' function takes one parameter, the zero-based index of the selected item.
diff --git a/docs/alert.md b/docs/alert.md
index 9c4e51e2fa2..0b82e780bde 100644
--- a/docs/alert.md
+++ b/docs/alert.md
@@ -7,9 +7,9 @@ Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
-This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see `AlertIOS`; entering text in an alert is common on iOS only.
+This is an API that works both on Android and iOS and can show static alerts. Alert that prompts the user to enter some information is avaiable on iOS only.
-### Example
+## Example
@@ -149,7 +149,7 @@ export default App;
## iOS
-On iOS you can specify any number of buttons. Each button can optionally specify a style, which is one of 'default', 'cancel', or 'destructive'.
+On iOS you can specify any number of buttons. Each button can optionally specify a style, avaiable options are represented by the [AlertButtonStyle](#alertbuttonstyle) enum.
## Android
@@ -159,33 +159,41 @@ On Android at most three buttons can be specified. Android has a concept of a ne
- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
-Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional `options` parameter with the cancelable property set to true i.e. `{ cancelable: true }`.
+Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional [Options](alert#options) parameter with the cancelable property set to `true` i.e. `{ cancelable: true }`.
-The cancel event can be handled by providing an `onDismiss` callback property `{ onDismiss: () => {} }` inside the `options` parameter.
+The cancel event can be handled by providing an `onDismiss` callback property inside the `options` parameter.
-Example usage:
+### Example
| The dialog's title. Passing `null` or empty string will hide the title. |
+| message | string | An optional message that appears below the dialog's title. |
+| buttons | [Buttons](alert#buttons) | An optional array containg buttons configuration. |
+| options | [Options](alert#options)
Android
| An optional Alert configuration for the Android. |
+
+---
+
+### `prompt()`
iOS
+
+```jsx
+static prompt(title, message?, callbackOrButtons?, type?, defaultValue?, keyboardType?)
+```
+
+Create and display a prompt to enter some text in form of Alert.
+
+**Parameters:**
+
+| Name | Type | Description |
+| ----------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title | string
Required
| The dialog's title. |
+| message | string | An optional message that appears above the text input. |
+| callbackOrButtons | function[Buttons](alert#buttons) | If passed a function, it will be called with the prompt's value `(text: string) => void`, when the user taps 'OK'.If passed an array, buttons will be configured based on the array content. |
+| type | [AlertType](alert#alerttype) | This configures the text input. |
+| defaultValue | string | The default text in text input. |
+| keyboardType | string | The keyboard type of first text field (if exists). One of TextInput [keyboardTypes](textinput#keyboardtype). |
+
+---
+
+## Type Definitions
+
+### AlertButtonStyle
+
+An iOS Alert type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value | Description |
+| ------------------ | ---------------------------- |
+| `'default'` | Default alert with no inputs |
+| `'plain-text'` | Plain text input alert |
+| `'secure-text'` | Secure text input alert |
+| `'login-password'` | Login and password alert |
+
+---
+
+### Buttons
+
+Array of objects containg Alert buttons configuration.
+
+| Type |
+| ---------------- |
+| array of objects |
+
+**Objects properties:**
+
+| Name | Type | Description |
+| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------- |
+| text | string | Button label. |
+| onPress | function | Callback function when button is pressed. |
+| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle) | Button style, on Android this property will be ignored. |
+
+---
+
+### Options
Android
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type | Description |
+| ---------- | -------- | ---------------------------------------------------------------------- |
+| cancelable | boolean | Defines if alert can be dismissed by tapping outside of the alert box. |
+| onDismiss | function | Callback function fired when alert has been dismissed. |
diff --git a/docs/appregistry.md b/docs/appregistry.md
index 1732520b6d8..9327f0b842a 100644
--- a/docs/appregistry.md
+++ b/docs/appregistry.md
@@ -44,7 +44,7 @@ Only called from native code. Cancels a headless task.
**Parameters:**
-| Name | Type | Required |
+| Name | Type | Description |
| -------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------- |
| taskId
Required
| number | The native id for this task instance that was used when `startHeadlessTask` was called. |
| taskKey
Required
| string | The key for the task that was used when `startHeadlessTask` was called. |
diff --git a/docs/building-for-tv.md b/docs/building-for-tv.md
index 412c00c287e..05ad2ecd00f 100644
--- a/docs/building-for-tv.md
+++ b/docs/building-for-tv.md
@@ -155,4 +155,8 @@ class Game2048 extends React.Component {
- _Known issues_:
- - `TextInput` components do not work for now (i.e. they cannot receive focus, see [this comment](https://github.com/facebook/react-native/pull/16500#issuecomment-629285638)).
+ - `TextInput` components do not work for now (i.e. they cannot receive focus automatically, see [this comment](https://github.com/facebook/react-native/pull/16500#issuecomment-629285638)).
+ - It is however possible to use a ref to manually trigger `inputRef.current.focus()`.
+ - You can wrap your input inside a `TouchableWithoutFeedback` component and trigger focus in the `onFocus` event of that touchable. This enables opening the keyboard via the arrow keys.
+ - The keyboard might reset its state after each keypress (this might only happen inside the Android TV emulator).
+ - The content of `Modal` components cannot receive focus, see [this issue](https://github.com/facebook/react-native/issues/24448) for details.
diff --git a/docs/debugging.md b/docs/debugging.md
index 670e4af0a62..10a11e48fbe 100644
--- a/docs/debugging.md
+++ b/docs/debugging.md
@@ -45,7 +45,7 @@ LogBox.ignoreAllLogs();
### Unhandled Errors
-Unhanded JavaScript errors such as `undefined is not a function` will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed.
+Unhandled JavaScript errors such as `undefined is not a function` will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed.
### Syntax Errors
diff --git a/docs/direct-manipulation.md b/docs/direct-manipulation.md
index 8c6d7e6e008..314e173b1f2 100644
--- a/docs/direct-manipulation.md
+++ b/docs/direct-manipulation.md
@@ -14,19 +14,20 @@ It is sometimes necessary to make changes directly to a component without using
[TouchableOpacity](https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js) uses `setNativeProps` internally to update the opacity of its child component:
```jsx
-setOpacityTo(value) {
+const viewRef = useRef();
+const setOpacityTo = useCallback((value) => {
// Redacted: animation related code
- this.refs[CHILD_REF].setNativeProps({
+ viewRef.current.setNativeProps({
opacity: value
});
-},
+}, []);
```
This allows us to write the following code and know that the child will have its opacity updated in response to taps, without the child having any knowledge of that fact or requiring any changes to its implementation:
```jsx
-
-
+
+ Press me!
@@ -35,21 +36,16 @@ This allows us to write the following code and know that the child will have its
Let's imagine that `setNativeProps` was not available. One way that we might implement it with that constraint is to store the opacity value in the state, then update that value whenever `onPress` is fired:
```jsx
-constructor(props) {
- super(props);
- this.state = { myButtonOpacity: 1, };
-}
-
-render() {
- return (
- this.setState({myButtonOpacity: 0.5})}
- onPressOut={() => this.setState({myButtonOpacity: 1})}>
-
- Press me!
-
-
- )
-}
+const [buttonOpacity, setButtonOpacity] = useState(1);
+return (
+ setButtonOpacity(0.5)}
+ onPressOut={() => setButtonOpacity(1)}>
+
+ Press me!
+
+
+);
```
This is computationally intensive compared to the original example - React needs to re-render the component hierarchy each time the opacity changes, even though other properties of the view and its children haven't changed. Usually this overhead isn't a concern but when performing continuous animations and responding to gestures, judiciously optimizing your components can improve your animations' fidelity.
@@ -61,86 +57,90 @@ If you look at the implementation of `setNativeProps` in [NativeMethodsMixin](ht
Composite components are not backed by a native view, so you cannot call `setNativeProps` on them. Consider this example:
```SnackPlayer name=setNativeProps%20with%20Composite%20Components
-import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
-const MyButton = (props) => {
- return (
-
- {props.label}
-
- )
-}
+const MyButton = (props) => (
+
+ {props.label}
+
+);
-export default App = () => {
- return (
-
-
-
- )
-}
+export default App = () => (
+
+
+
+);
```
If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a native-backed child component.
#### Forward setNativeProps to a child
-All we need to do is provide a `setNativeProps` method on our component that calls `setNativeProps` on the appropriate child with the given arguments.
+Since the `setNativeProps` method exists on any ref to a `View` component, it is enough to forward a ref on your custom component to one of the `` components that it renders. This means that a call to `setNativeProps` on the custom component will have the same effect as if you called `setNativeProps` on the wrapped `View` component itself.
```SnackPlayer name=Forwarding%20setNativeProps
-import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
-const MyButton = (props) => {
- setNativeProps = (nativeProps) => {
- _root.setNativeProps(nativeProps);
- }
-
- return (
- _root = component} {...props}>
- {props.label}
-
- )
-}
+const MyButton = React.forwardRef((props, ref) => (
+
+ {props.label}
+
+));
-export default App = () => {
- return (
-
-
-
- )
-}
+export default App = () => (
+
+
+
+);
```
-You can now use `MyButton` inside of `TouchableOpacity`! A sidenote for clarity: we used the [ref callback](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element) syntax here, rather than the traditional string-based ref.
+You can now use `MyButton` inside of `TouchableOpacity`!
-You may have noticed that we passed all of the props down to the child view using `{...this.props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
+You may have noticed that we passed all of the props down to the child view using `{...props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various props](view.md#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`.
## setNativeProps to clear TextInput value
Another very common use case of `setNativeProps` is to clear the value of a TextInput. The `controlled` prop of TextInput can sometimes drop characters when the `bufferDelay` is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use `setNativeProps` to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:
```SnackPlayer name=Clear%20text
-import React from 'react';
-import { TextInput, Text, TouchableOpacity, View } from 'react-native';
-
-export default App = () => {
- clearText = () => {
- _textInput.setNativeProps({text: ''});
- }
-
- return (
-
- _textInput = component}
- style={{height: 50, width: 200, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
- />
-
- Clear text
-
-
- );
-}
+import React from "react";
+import { useCallback, useRef } from "react";
+import { StyleSheet, TextInput, Text, TouchableOpacity, View } from "react-native";
+
+const App = () => {
+ const inputRef = useRef();
+ const clearText = useCallback(() => {
+ inputRef.current.setNativeProps({ text: "" });
+ }, []);
+
+ return (
+
+
+
+ Clear text
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ input: {
+ height: 50,
+ width: 200,
+ marginHorizontal: 20,
+ borderWidth: 1,
+ borderColor: "#ccc",
+ },
+});
+
+export default App;
```
## Avoiding conflicts with the render function
@@ -179,14 +179,67 @@ Determines the location of the given view in the window and returns the values v
- width
- height
-### measureLayout(relativeToNativeNode, onSuccess, onFail)
+### measureLayout(relativeToNativeComponentRef, onSuccess, onFail)
-Like `measure()`, but measures the view relative to an ancestor, specified as `relativeToNativeNode`. This means that the returned x, y are relative to the origin x, y of the ancestor view.
+Like `measure()`, but measures the view relative to an ancestor, specified with `relativeToNativeComponentRef` reference. This means that the returned coordinates are relative to the origin `x`, `y` of the ancestor view.
-As always, to obtain a native node handle for a component, you can use `findNodeHandle(component)`.
+> Note: This method can also be called with a `relativeToNativeNode` handler (instead of reference), but this variant is deprecated.
-```jsx
-import { findNodeHandle } from 'react-native';
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios
+import React, { useEffect, useRef, useState } from "react";
+import { Text, View, StyleSheet } from "react-native";
+
+const App = () => {
+ const textContainerRef = useRef(null);
+ const textRef = useRef(null);
+ const [measure, setMeasure] = useState(null);
+
+ useEffect(() => {
+ if (textRef.current && textContainerRef.current) {
+ textRef.current.measureLayout(
+ textContainerRef.current,
+ (left, top, width, height) => {
+ setMeasure({ left, top, width, height });
+ }
+ );
+ }
+ }, [measure]);
+
+ return (
+
+
+
+ Where am I? (relative to the text container)
+
+
+
+ {JSON.stringify(measure)}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ },
+ textContainer: {
+ backgroundColor: "#61dafb",
+ justifyContent: "center",
+ alignItems: "center",
+ padding: 12,
+ },
+ measure: {
+ textAlign: "center",
+ padding: 12,
+ },
+});
+
+export default App;
```
### focus()
diff --git a/docs/flatlist.md b/docs/flatlist.md
index 34b62ce0fb6..392923f6de3 100644
--- a/docs/flatlist.md
+++ b/docs/flatlist.md
@@ -447,18 +447,11 @@ If provided, a standard RefreshControl will be added for "Pull to Refresh" funct
### `onViewableItemsChanged`
-```jsx
-(info: {
- viewableItems: array,
- changed: array,
- }) => void
-```
-
Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------------------------------------------------------------------------------------ |
+| (callback: { changed: array of [ViewToken](viewtoken)s, viewableItems: array of [ViewToken](viewtoken)s }) => void |
---
diff --git a/docs/flexbox.md b/docs/flexbox.md
index 8e39b0cd340..19f43cd873b 100644
--- a/docs/flexbox.md
+++ b/docs/flexbox.md
@@ -15,42 +15,157 @@ You will normally use a combination of `flexDirection`, `alignItems`, and `justi
In the following example, the red, yellow, and green views are all children in the container view that has `flex: 1` set. The red view uses `flex: 1` , the yellow view uses `flex: 2`, and the green view uses `flex: 3` . **1+2+3 = 6**, which means that the red view will get `1/6` of the space, the yellow `2/6` of the space, and the green `3/6` of the space.
-
+```SnackPlayer name=Flex%20Example
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const Flex = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ padding: 20,
+ },
+});
+
+export default Flex;
+```
## Flex Direction
[`flexDirection`](layout-props#flexdirection) controls the direction in which the children of a node are laid out. This is also referred to as the _main axis_. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.
-- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
-
- `column` (**default value**) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
-- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+- `row` Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
- `column-reverse` Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.
+- `row-reverse` Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
+
You can learn more [here](https://yogalayout.com/docs/flex-direction).
```SnackPlayer name=Flex%20Direction
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const FlexDirectionBasics = () => {
- return (
- // Try setting `flexDirection` to `column`.
-
-
-
-
-
- );
+ const [flexDirection, setflexDirection] = useState("column");
+
+ return (
+
+
+
+
+
+ );
};
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
export default FlexDirectionBasics;
```
-
-
## Layout Direction
Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge `start` and `end` refer to. By default, React Native lays out with LTR layout direction. In this mode `start` refers to left and `end` refers to right.
@@ -59,6 +174,115 @@ Layout direction specifies the direction in which children and text in a hierarc
- `RTL` Text and children are laid out from right to left. Margin and padding applied to the start of an element are applied on the right side.
+```SnackPlayer name=Flex%20Direction
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const DirectionLayout = () => {
+ const [direction, setDirection] = useState("ltr");
+
+ return (
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default DirectionLayout;
+```
+
## Justify Content
[`justifyContent`](layout-props#justifycontent) describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with `flexDirection` set to `row` or vertically within a container with `flexDirection` set to `column`.
@@ -78,30 +302,119 @@ Layout direction specifies the direction in which children and text in a hierarc
You can learn more [here](https://yogalayout.com/docs/justify-content).
```SnackPlayer name=Justify%20Content
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
const JustifyContentBasics = () => {
- return (
- // Try setting `justifyContent` to `center`.
- // Try setting `flexDirection` to `row`.
-
-
-
-
-
- );
+ const [justifyContent, setJustifyContent] = useState("flex-start");
+
+ return (
+
+
+
+
+
+ );
};
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[styles.button, selectedValue === value && styles.selected]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
export default JustifyContentBasics;
```
-
-
## Align Items
[`alignItems`](layout-props#alignitems) describes how to align children along the cross axis of their container. Align items is very similar to `justifyContent` but instead of applying to the main axis, `alignItems` applies to the cross axis.
@@ -121,37 +434,259 @@ export default JustifyContentBasics;
You can learn more [here](https://yogalayout.com/docs/align-items).
```SnackPlayer name=Align%20Items
-import React from 'react';
-import { View } from 'react-native';
-
-const AlignItemsBasics = () => {
- return (
- // Try setting `alignItems` to 'flex-start'
- // Try setting `justifyContent` to `flex-end`.
- // Try setting `flexDirection` to `row`.
-
-
-
-
-
- );
+import React, { useState } from "react";
+import {
+ View,
+ TouchableOpacity,
+ Text,
+ StyleSheet,
+} from "react-native";
+
+const AlignItemsLayout = () => {
+ const [alignItems, setAlignItems] = useState("stretch");
+
+ return (
+
+
+
+
+
+ );
};
-export default AlignItemsBasics;
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ minHeight: 200,
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default AlignItemsLayout;
```
-
-
## Align Self
[`alignSelf`](layout-props#alignself) has the same options and effect as `alignItems` but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. `alignSelf` overrides any option set by the parent with `alignItems`.
-
+```SnackPlayer name=Align%20Self
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const AlignSelfLayout = () => {
+ const [alignSelf, setAlignSelf] = useState("stretch");
+
+ return (
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ minHeight: 200,
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default AlignSelfLayout;
+```
## Align Content
@@ -171,7 +706,141 @@ export default AlignItemsBasics;
You can learn more [here](https://yogalayout.com/docs/align-content).
-
+```SnackPlayer name=Align%20Content
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const AlignContentLayout = () => {
+ const [alignContent, setAlignContent] = useState("flex-start");
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexWrap: "wrap",
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ maxHeight: 400,
+ },
+ box: {
+ width: 50,
+ height: 80,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default AlignContentLayout;
+```
## Flex Wrap
@@ -179,7 +848,132 @@ The [`flexWrap`](layout-props#flexwrap) property is set on containers and it con
When wrapping lines, `alignContent` can be used to specify how the lines are placed in the container. Learn more [here](https://yogalayout.com/docs/flex-wrap).
-
+```SnackPlayer name=Flex%20Wrap
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+
+const FlexWrapLayout = () => {
+ const [flexWrap, setFlexWrap] = useState("wrap");
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ {children}
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ maxHeight: 400,
+ },
+ box: {
+ width: 50,
+ height: 80,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default FlexWrapLayout;
+```
## Flex Basis, Grow, and Shrink
@@ -195,6 +989,209 @@ When wrapping lines, `alignContent` can be used to specify how the lines are pla
You can learn more [here](https://yogalayout.com/docs/flex).
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink
+import React, { useState } from "react";
+import {
+ View,
+ Text,
+ TextInput,
+ StyleSheet,
+} from "react-native";
+
+const App = () => {
+ const [powderblue, setPowderblue] = useState({
+ flexGrow: 0,
+ flexShrink: 1,
+ flexBasis: "auto",
+ });
+ const [skyblue, setSkyblue] = useState({
+ flexGrow: 1,
+ flexShrink: 0,
+ flexBasis: 100,
+ });
+ const [steelblue, setSteelblue] = useState({
+ flexGrow: 0,
+ flexShrink: 1,
+ flexBasis: 200,
+ });
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const BoxInfo = ({
+ color,
+ flexBasis,
+ flexShrink,
+ setStyle,
+ flexGrow,
+}) => (
+
+
+
+ Box
+
+
+ flexBasis
+
+ setStyle((value) => ({
+ ...value,
+ flexBasis: isNaN(parseInt(fB))
+ ? "auto"
+ : parseInt(fB),
+ }))
+ }
+ />
+ flexShrink
+
+ setStyle((value) => ({
+ ...value,
+ flexShrink: isNaN(parseInt(fS))
+ ? ""
+ : parseInt(fS),
+ }))
+ }
+ />
+ flexGrow
+
+ setStyle((value) => ({
+ ...value,
+ flexGrow: isNaN(parseInt(fG))
+ ? ""
+ : parseInt(fG),
+ }))
+ }
+ />
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ paddingHorizontal: 10,
+ },
+ box: {
+ flex: 1,
+ height: 50,
+ width: 50,
+ },
+ boxLabel: {
+ minWidth: 80,
+ padding: 8,
+ borderRadius: 4,
+ marginTop: 8,
+ },
+ label: {
+ marginTop: 6,
+ fontSize: 16,
+ fontWeight: "100",
+ },
+ previewContainer: {
+ flex: 1,
+ flexDirection: "row",
+ backgroundColor: "aliceblue",
+ },
+ row: {
+ flex: 1,
+ flexDirection: "row",
+ flexWrap: "wrap",
+ alignItems: "center",
+ marginBottom: 10,
+ },
+ input: {
+ borderBottomWidth: 1,
+ paddingVertical: 3,
+ width: 50,
+ textAlign: "center",
+ },
+});
+
+export default App;
+```
+
## Width and Height
The `width` property specifies the width of an element's content area. Similarly, the `height` property specifies the height of an element's content area.
@@ -207,6 +1204,159 @@ Both `width` and `height` can take the following values:
- `percentage` Defines the width or height in percentage of its parent's width or height, respectively.
+```SnackPlayer name=Width%20and%20Height
+import React, { useState } from "react";
+import {
+ View,
+ SafeAreaView,
+ TouchableOpacity,
+ Text,
+ StyleSheet,
+} from "react-native";
+
+const WidthHeightBasics = () => {
+ const [widthType, setWidthType] = useState("auto");
+ const [heightType, setHeightType] = useState("auto");
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ children,
+ widthType,
+ heightType,
+ widthValues,
+ heightValues,
+ setWidthType,
+ setHeightType,
+}) => (
+
+
+ width
+ {widthValues.map((value) => (
+ setWidthType(value)}
+ style={[
+ styles.button,
+ widthType === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+
+ height
+ {heightValues.map((value) => (
+ setHeightType(value)}
+ style={[
+ styles.button,
+ heightType === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+ {children}
+
+);
+
+const styles = StyleSheet.create({
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ padding: 8,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginRight: 10,
+ marginBottom: 10,
+ },
+ selected: {
+ backgroundColor: "coral",
+ shadowOpacity: 0,
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default WidthHeightBasics;
+```
+
## Absolute & Relative Layout
The `position` type of an element defines how it is positioned within its parent.
@@ -215,7 +1365,145 @@ The `position` type of an element defines how it is positioned within its parent
- `absolute` When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom`, and `left` values.
-
+```SnackPlayer name=Absolute%20%26%20Relative%20Layout
+import React, { useState } from "react";
+import {
+ View,
+ SafeAreaView,
+ TouchableOpacity,
+ Text,
+ StyleSheet,
+} from "react-native";
+
+const PositionLayout = () => {
+ const [position, setPosition] = useState("relative");
+
+ return (
+
+
+
+
+
+ );
+};
+
+const PreviewLayout = ({
+ label,
+ children,
+ values,
+ selectedValue,
+ setSelectedValue,
+}) => (
+
+ {label}
+
+ {values.map((value) => (
+ setSelectedValue(value)}
+ style={[
+ styles.button,
+ selectedValue === value && styles.selected,
+ ]}
+ >
+
+ {value}
+
+
+ ))}
+
+ {children}
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ marginTop: 8,
+ backgroundColor: "aliceblue",
+ minHeight: 200,
+ },
+ box: {
+ width: 50,
+ height: 50,
+ },
+ row: {
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "48%",
+ textAlign: "center",
+ },
+ selected: {
+ backgroundColor: "coral",
+ borderWidth: 0,
+ },
+ buttonLabel: {
+ fontSize: 12,
+ fontWeight: "500",
+ color: "coral",
+ },
+ selectedLabel: {
+ color: "white",
+ },
+ label: {
+ textAlign: "center",
+ marginBottom: 10,
+ fontSize: 24,
+ },
+});
+
+export default PositionLayout;
+```
## Going Deeper
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 4e11c1bea9b..e02f7a05f71 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -135,7 +135,7 @@ You will need Node, the React Native command line interface, a JDK, and Android
Installing dependencies
-You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.
+You will need Node, the React Native command line interface, a JDK, and Android Studio.
@@ -176,16 +176,16 @@ Follow the [installation instructions for your Linux distribution](https://nodej
-
Node, Python2, JDK
+
Node, JDK
-We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
+We recommend installing Node via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
-React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk8/), as well as Python2. Both can be installed using Chocolatey.
+React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk8/), which can be installed using Chocolatey as well.
Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:
```powershell
-choco install -y nodejs.install python2 openjdk8
+choco install -y nodejs.install openjdk8
```
If you have already installed Node on your system, make sure it is Node 10 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.
@@ -263,9 +263,9 @@ Then, click "Next" to install all of these components.
Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
-
2. Install the Android SDK
+
2. Install the Android SDK and NDK
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 10 (Q)` SDK and `20.1.5948944` NDK in particular. Additional Android SDKs and NDKs can be installed through the SDK Manager in Android Studio.
To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
@@ -288,7 +288,9 @@ Select the "SDK Platforms" tab from within the SDK Manager, then check the box n
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `29.0.2` is selected.
-Finally, click "Apply" to download and install the Android SDK and related build tools.
+After that, to install the Android NDK expand the "NDK (Side by side)" entry, then make sure that `20.1.5948944` is selected.
+
+Finally, click "Apply" to download and install the Android SDK and NDK related build tools.
3. Configure the ANDROID_HOME environment variable
diff --git a/docs/image.md b/docs/image.md
index 9482e37b90b..75e94fcb5da 100644
--- a/docs/image.md
+++ b/docs/image.md
@@ -341,11 +341,11 @@ Invoked on load error with `{nativeEvent: {error}}`.
### `onLayout`
-Invoked on mount and layout changes with `{nativeEvent: {layout: {x, y, width, height}}}`.
+Invoked on mount and on layout changes.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required |
+| ------------------------------------ | -------- |
+| ([LayoutEvent](layoutevent)) => void | No |
---
@@ -512,7 +512,7 @@ Does not work for static image resources.
| uri | string | Yes | The location of the image. |
| headers | object | Yes | The headers for the request. |
| success | function | Yes | The function that will be called if the image was successfully found and width and height retrieved. |
-| failure | function | No | The function that will be called if there was an error, such as failing toto retrieve the image. |
+| failure | function | No | The function that will be called if there was an error, such as failing to retrieve the image. |
---
diff --git a/docs/inputaccessoryview.md b/docs/inputaccessoryview.md
index 18969b7025f..4de484ad34c 100644
--- a/docs/inputaccessoryview.md
+++ b/docs/inputaccessoryview.md
@@ -13,7 +13,7 @@ import { Button, InputAccessoryView, ScrollView, TextInput } from 'react-native'
export default App = () => {
const inputAccessoryViewID = 'uniqueID';
- const initialText = 'Placeholder Text';
+ const initialText = '';
const [text, setText] = useState(initialText);
return (
@@ -22,17 +22,18 @@ export default App = () => {
setText(text)}
+ onChangeText={setText}
value={text}
+ placeholder={'Please type here…'}
/>
>
diff --git a/docs/integration-with-android-fragment.md b/docs/integration-with-android-fragment.md
new file mode 100644
index 00000000000..8f3aae0a244
--- /dev/null
+++ b/docs/integration-with-android-fragment.md
@@ -0,0 +1,168 @@
+---
+id: integration-with-existing-apps
+title: Integration with an Android Fragment
+---
+
+The guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity.
+
+### 1. Add React Native to your app
+
+Follow the guide for [Integration with Existing Apps](https://reactnative.dev/docs/integration-with-existing-apps) until the Code integration section. Continue to follow Step 1. Create an `index.android.js` file and Step 2. Add your React Native code from this section.
+
+### 2. Integrating your App with a React Native Fragment
+
+You can render your React Native component into a Fragment instead of a full screen React Native Activity. The component may be termed a "screen" or "fragment" and it will function in the same manner as an Android fragment, likely containing child components. These components can be placed in a `/fragments` folder and the child components used to compose the fragment can be placed in a `/components` folder.
+
+You will need to implement the ReactApplication interface in your main Application Java class. If you have created a new project from Android Studio with a default activity, you will need to create a new class e.g. `MyReactApplication.java`. If it is an existing class you can find this main class in your `AndroidManifest.xml` file. Under the `` tag you should see a property `android:name` e.g. `android:name=".MyReactApplication"`. This value is the class you want to implement and provide the required methods to.
+
+Ensure your main Application Java class implements ReactApplication:
+
+```java
+public class MyReactApplication extends Application implements ReactApplication {...}
+```
+
+Override the required methods `getUseDeveloperSupport`, `getPackages` and `getReactNativeHost`:
+
+```java
+public class MyReactApplication extends Application implements ReactApplication {
+ @Override
+ public void onCreate() {
+ super.onCreate();
+ SoLoader.init(this, false);
+ }
+
+ private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+
+ protected List getPackages() {
+ List packages = new PackageList(this).getPackages();
+ // Packages that cannot be autolinked yet can be added manually here
+ return packages;
+ }
+ };
+
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+ return mReactNativeHost;
+ }
+}
+```
+
+If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually:
+
+```java
+import android.app.Application;
+
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.soloader.SoLoader;
+
+import java.util.List;
+```
+
+Perform a "Sync Project files with Gradle" operation.
+
+### Step 3. Add a FrameLayout for the React Native Fragment
+
+You will now add your React Native Fragment to an Activity. For a new project this Activity will be `MainActivity` but it could be any Activity and more fragments can be added to additional Activities as you integrate more React Native components into your app.
+
+First add the React Native Fragment to your Activity's layout. For example `main_activity.xml` in the `res/layouts` folder.
+
+Add a `` with an id, width and height. This is the layout you will find and render your React Native Fragment into.
+
+```xml
+
+```
+
+### Step 4. Add a React Native Fragment to the FrameLayout
+
+To add your React Native Fragment to your layout you need to have an Activity. As mentioned in a new project this will be `MainActivity`. In this Activity add a button and an event listener. On button click you will render your React Native Fragment.
+
+Modify your Activity layout to add the button:
+
+```xml
+
+```
+
+Now in your Activity class e.g. `MainActivity.java` you need to add an OnClickListener for the button, instantiate your ReactFragment and add it to the frame layout.
+
+Add the button field to the top of your Activity:
+
+```java
+private Button mButton;
+```
+
+Update your Activity's onCreate method as follows:
+
+```java
+@Override
+protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ setContentView(R.layout.main_activity);
+
+ mButton = findViewById(R.id.button);
+ mButton.setOnClickListener(new View.OnClickListener() {
+ public void onClick(View v) {
+ Fragment reactNativeFragment = new ReactFragment.Builder()
+ .setComponentName("HelloWorld")
+ .setLaunchOptions(getLaunchOptions("test message"))
+ .build();
+
+ getSupportFragmentManager()
+ .beginTransaction()
+ .add(R.id.reactNativeFragment, reactNativeFragment)
+ .commit();
+
+ }
+ });
+}
+```
+
+In the code above `Fragment reactNativeFragment = new ReactFragment.Builder()` creates the ReactFragment and `getSupportFragmentManager().beginTransaction().add()` adds the Fragment to the Frame Layout.
+
+If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your `index.js` or `index.android.js` file (it’s the first argument to the AppRegistry.registerComponent() method).
+
+Add the `getLaunchOptions` method which will allow you to pass props through to your component. This is optional and you can remove `setLaunchOptions` if you don't need to pass any props.
+
+```java
+private Bundle getLaunchOptions(String message) {
+ Bundle initialProperties = new Bundle();
+ initialProperties.putString("message", message);
+ return initialProperties;
+}
+```
+
+Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually:
+
+```java
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+```
+
+Perform a "Sync Project files with Gradle" operation.
+
+### Step 5. Test your integration
+
+Make sure you run `yarn` to install your react-native dependencies and run `yarn native` to start the metro bundler. Run your android app in Android Studio and it should load the JavaScript code from the development server and display it in your React Native Fragment in the Activity.
+
+### Step 6. Additional setup - Native modules
+
+You may need to call out to existing Java code from your react component. Native modules allow you to call out to native code and run methods in your native app. Follow the setup here [native-modules-android](https://reactnative.dev/docs/native-modules-android.html#content)
diff --git a/docs/introduction.md b/docs/introduction.md
index e80dfc549c5..3c78c862523 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -52,7 +52,7 @@ The above is a Snack Player. It’s a handy tool created by Expo to embed and ru
With React, you can make components using either classes or functions. Originally, class components were the only components that could have state. But since the introduction of React's Hooks API, you can add state and more to function components.
-[Hooks were introduced in React Native 0.58.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
+[Hooks were introduced in React Native 0.59.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
diff --git a/docs/layoutanimation.md b/docs/layoutanimation.md
index 02f90e23b0b..631d3dba263 100644
--- a/docs/layoutanimation.md
+++ b/docs/layoutanimation.md
@@ -79,7 +79,7 @@ export default App;
### `configureNext()`
```jsx
-static configureNext(config, onAnimationDidEnd?)
+static configureNext(config, onAnimationDidEnd?, onAnimationDidFail?)
```
Schedules an animation to happen on the next layout.
@@ -90,6 +90,7 @@ Schedules an animation to happen on the next layout.
| ----------------- | -------- | -------- | ----------------------------------- |
| config | object | Yes | See config description below. |
| onAnimationDidEnd | function | No | Called when the animation finished. |
+| onAnimationDidFail| function | No | Called when the animation failed. |
The `config` parameter is an object with the keys below. [`create`](layoutanimation.md#create) returns a valid object for `config`, and the [`Presets`](layoutanimation.md#presets) objects can also all be passed as the `config`.
diff --git a/docs/layoutevent.md b/docs/layoutevent.md
new file mode 100644
index 00000000000..b0fda8501db
--- /dev/null
+++ b/docs/layoutevent.md
@@ -0,0 +1,72 @@
+---
+id: layoutevent
+title: LayoutEvent Object Type
+---
+
+`LayoutEvent` object is returned in the callback as a result of component layout change, for example `onLayout` in [View](view) component.
+
+## Example
+
+```js
+{
+ layout: {
+ width: 520,
+ height: 70.5,
+ x: 0,
+ y: 42.5
+ },
+ target: 1127
+}
+```
+
+## Keys and values
+
+### `height`
+
+Height of the component after the layout changes.
+
+| Type | Optional |
+| ------ | -------- |
+| number | No |
+
+### `width`
+
+Width of the component after the layout changes.
+
+| Type | Optional |
+| ------ | -------- |
+| number | No |
+
+### `x`
+
+Component X coordinate inside the parent component.
+
+| Type | Optional |
+| ------ | -------- |
+| number | No |
+
+### `y`
+
+Component Y coordinate inside the parent component.
+
+| Type | Optional |
+| ------ | -------- |
+| number | No |
+
+### `target`
+
+The node id of the element receiving the PressEvent.
+
+| Type | Optional |
+| --------------------------- | -------- |
+| number, `null`, `undefined` | No |
+
+## Used by
+
+- [`Image`](image)
+- [`Pressable`](pressable)
+- [`ScrollView`](scrollview)
+- [`Text`](text)
+- [`TextInput`](textinput)
+- [`TouchableWithoutFeedback`](touchablewithoutfeedback)
+- [`View`](view)
diff --git a/docs/native-modules-ios.md b/docs/native-modules-ios.md
index 7214614f4d5..36310dfeb9e 100644
--- a/docs/native-modules-ios.md
+++ b/docs/native-modules-ios.md
@@ -521,4 +521,4 @@ You can also use `RCT_EXTERN_REMAP_MODULE` and `_RCT_EXTERN_REMAP_METHOD` to alt
### invalidate()
-Native modules can conform to the [RCTInvalidating](https://github.com/facebook/react-native/blob/master/React/Base/RCTInvalidating.h) protocol on iOS by implementing the `invalidate` method. This method [can be invoked](https://github.com/facebook/react-native/blob/master/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm#L756) when the native bridge is invalidated (ie: on devmode reload). You should avoid implementing this method in general, as this mechanism exists for backwards compatibility and may be removed in the future.
+Native modules can conform to the [RCTInvalidating](https://github.com/facebook/react-native/blob/master/React/Base/RCTInvalidating.h) protocol on iOS by implementing the `invalidate` method. This method can be invoked when the native bridge is invalidated (ie: on devmode reload). You should avoid implementing this method in general, as this mechanism exists for backwards compatibility and may be removed in the future.
diff --git a/docs/network.md b/docs/network.md
index 8cb6485cf27..196b4f2be2d 100644
--- a/docs/network.md
+++ b/docs/network.md
@@ -169,6 +169,8 @@ export default class App extends Component {
> By default, iOS will block any request that's not encrypted using [SSL](https://hosting.review/web-hosting-glossary/#12). If you need to fetch from a cleartext URL (one that begins with `http`) you will first need to [add an App Transport Security exception](integration-with-existing-apps.md#test-your-integration). If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can [disable ATS completely](integration-with-existing-apps.md#app-transport-security). Note however that from January 2017, [Apple's App Store review will require reasonable justification for disabling ATS](https://forums.developer.apple.com/thread/48979). See [Apple's documentation](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) for more information.
+> On Android, as of API Level 28, clear text traffic is also blocked by default. This behaviour can be overridden by setting [`android:usesCleartextTraffic`](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic) in the app manifest file.
+
### Using Other Networking Libraries
The [XMLHttpRequest API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) is built into React Native. This means that you can use third party libraries such as [frisbee](https://github.com/niftylettuce/frisbee) or [axios](https://github.com/mzabriskie/axios) that depend on it, or you can use the XMLHttpRequest API directly if you prefer.
diff --git a/docs/optimizing-flatlist-configuration.md b/docs/optimizing-flatlist-configuration.md
index d63f5397f17..e31cbafd9e5 100644
--- a/docs/optimizing-flatlist-configuration.md
+++ b/docs/optimizing-flatlist-configuration.md
@@ -95,7 +95,7 @@ The heavier your components are, the slower they render. Avoid heavy images (use
### Use shouldComponentUpdate
-Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it need to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use
+Implement update verification to your components. React's `PureComponent` implement a [`shouldComponentUpdate`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) with shallow comparison. This is expensive here because it needs to check all your props. If you want a good bit-level performance, create the strictest rules for your list item components, checking only props that could potentially change. If your list is basic enough, you could even use
```jsx
shouldComponentUpdate() {
diff --git a/docs/out-of-tree-platforms.md b/docs/out-of-tree-platforms.md
index 2642f140a9f..36d6cbb99d3 100644
--- a/docs/out-of-tree-platforms.md
+++ b/docs/out-of-tree-platforms.md
@@ -5,11 +5,11 @@ title: Out-of-Tree Platforms
React Native is not only for Android and iOS - there are community-supported projects that bring it to other platforms, such as:
-- [React Native Windows](https://github.com/Microsoft/react-native-windows) - React Native support for Microsoft's Universal Windows Platform (UWP) and the Windows Presentation Foundation (WPF)
+- [React Native Windows](https://github.com/Microsoft/react-native-windows) - React Native support for targeting Microsoft's Universal Windows Platform (UWP).
+- [React Native macOS](https://github.com/microsoft/react-native-macos) - React Native fork targeting macOS and Cocoa.
- [React Native DOM](https://github.com/vincentriemer/react-native-dom) - An experimental, comprehensive port of React Native to the web. (Not to be confused with [React Native Web](https://github.com/necolas/react-native-web), which has different goals)
- [React Native Turbolinks](https://github.com/lazaronixon/react-native-turbolinks) - React Native adapter for building hybrid apps with Turbolinks 5.
- [React Native Desktop](https://github.com/status-im/react-native-desktop) - A project aiming to bring React Native to the Desktop with Qt's QML. A fork of [React Native Ubuntu](https://github.com/CanonicalLtd/react-native/), which is no longer maintained.
-- [React Native macOS](https://github.com/ptmt/react-native-macos) - An experimental React Native fork targeting macOS and Cocoa
- [React Native tvOS](https://github.com/react-native-community/react-native-tvos) - adaptation of React Native for Apple tvOS
- [alita](https://github.com/areslabs/alita) - An experimental, comprehensive port of React Native to mini-program(微信小程序).
- [Proton Native](https://github.com/kusti8/proton-native) - A wrapper for React Native, using Qt to target Linux, MacOS, and Windows.
diff --git a/docs/pressable.md b/docs/pressable.md
index 20a44694b14..13a7a342897 100644
--- a/docs/pressable.md
+++ b/docs/pressable.md
@@ -21,11 +21,11 @@ On an element wrapped by `Pressable`:
After pressing [`onPressIn`](#onpressin), one of two things will happen:
1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
-2. If the person leaves their finger longer than 370 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
+2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
-Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the the wrapped element. Presses can start anywhere within a `HitRect`.
+Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.
@@ -135,7 +135,7 @@ Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
| Type | Required | Default |
| ------ | -------- | ------- |
-| number | No | 370 |
+| number | No | `500` |
### `disabled`
@@ -155,7 +155,7 @@ Sets additional distance outside of element in which a press can be detected.
### `onLongPress`
-Called if the time after `onPressIn` lasts longer than 370 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
+Called if the time after `onPressIn` lasts longer than 500 milliseconds. This time period can be customized with [`delayLongPress`](#delaylongpress).
| Type | Required |
| ------------------------ | -------- |
diff --git a/docs/profile-hermes.md b/docs/profile-hermes.md
new file mode 100644
index 00000000000..3f4daefb478
--- /dev/null
+++ b/docs/profile-hermes.md
@@ -0,0 +1,155 @@
+---
+id: profile-hermes
+title: Profiling with Hermes
+---
+
+You can visualize JavaScript's performance in a React Native app using [Hermes](https://github.com/facebook/hermes). Hermes is a small and lightweight JavaScript engine optimized for running React Native on Android (you can [read more about using it with React Native here](hermes). Hermes helps improve app performance and also exposes ways to analyze the performance of the JavaScript that it runs.
+
+In this section, you will learn how to profile your React Native app running on Hermes and how to visualize the profile using [the Performance tab on Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference)
+
+> Be sure to [enable hermes in your app](hermes) before you get started!
+
+Follow the instructions below to get started profiling:
+
+1. [Record a Hermes sampling profile](profile-hermes.md#record-a-hermes-sampling-profile)
+2. [Execute command from CLI](profile-hermes.md#execute-command-from-cli)
+3. [Open the downloaded profile on Chrome DevTools](profile-hermes.md#open-the-downloaded-profile-on-chrome-devtools)
+
+## Record a Hermes sampling profile
+
+To record a sampling profiler from the Developer Menu:
+
+1. Navigate to your running Metro server terminal.
+2. Press `d` to open the **Developer Menu.**
+3. Select **Enable Sampling Profiler.**
+4. Execute your JavaScript by in your app (press buttons, etc.)
+5. Open the **Developer Menu** by pressing `d` again.
+6. Select **Disable Sampling Profiler** to stop recording and save the sampling profiler.
+
+A toast will show the location where the sampling profiler has been saved, usually in `/data/user/0/com.appName/cache/*.cpuprofile`
+
+
+
+## Execute command from CLI
+
+You can use the [React Native CLI](https://github.com/react-native-community/cli) to convert the Hermes tracing profile to Chrome tracing profile, and then pull it to your local machine using:
+
+```sh
+npx react-native profile-hermes [destinationDir]
+```
+
+### Enabling source map
+
+A source map is used to enhance the profile and associate trace events with the application code. You can automatically generate a source map when converting the Hermes tracing profile to a Chrome tracing profile by enabling `bundleInDebug` if the app is running in development mode. This allows React Native to build the bundle during its running process. Here's how:
+
+1. In your app's `android/app/build.gradle` file, add:
+
+```java
+project.ext.react = [
+ bundleInDebug: true,
+]
+```
+
+> Be sure to clean the build whenever you make any changes to `build.gradle`
+
+2. Clean the build by running:
+
+```sh
+cd android && ./gradlew clean
+```
+
+3. Run your app:
+
+```sh
+npx react-native run-android
+```
+
+### Common errors
+
+#### `adb: no devices/emulators found` or `adb: device offline`
+
+- **Why this happens** The CLI cannot access the device or emulator (through adb) you are using to run the app.
+- **How to fix** Make sure your Android device/emulator is connected and running. The command only works when it can access adb.
+
+#### `There is no file in the cache/ directory`
+
+- **Why this happens** The CLI cannot find any **.cpuprofile** file in your app's **cache/** directory. You might have forgotten to record a profile from the device.
+- **How to fix** Follow the [instructions](profile-hermes.md#record-a-hermes-sampling-profile) to enable/disable profiler from device.
+
+#### `Error: your_profile_name.cpuprofile is an empty file`
+
+- **Why this happens** The profile is empty, it might be because Hermes is not running correctly.
+- **How to fix** Make sure your app is running on the latest version of Hermes.
+
+## Open the downloaded profile in Chrome DevTools
+
+To open the profile in Chrome DevTools:
+
+1. Open Chrome DevTools.
+2. Select the **Performance** tab.
+3. Right click and choose **Load profile...**
+
+
+
+## How does the Hermes Profile Transformer work?
+
+The Hermes Sample Profile is of the `JSON object format`, while the format that Google's DevTools supports is `JSON Array Format`. (More information about the formats can be found on the [Trace Event Format Document](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview))
+
+```ts
+export interface HermesCPUProfile {
+ traceEvents: SharedEventProperties[];
+ samples: HermesSample[];
+ stackFrames: { [key in string]: HermesStackFrame };
+}
+```
+
+The Hermes profile has most of its information encoded into the `samples` and `stackFrames` properties. Each sample is a snapshot of the function call stack at that particular timestamp as each sample has a `sf` property which corresponds to a function call.
+
+```ts
+export interface HermesSample {
+ cpu: string;
+ name: string;
+ ts: string;
+ pid: number;
+ tid: string;
+ weight: string;
+ /**
+ * Will refer to an element in the stackFrames object of the Hermes Profile
+ */
+ sf: number;
+ stackFrameData?: HermesStackFrame;
+}
+```
+
+The information about a function call can be found in `stackFrames` which contains key-object pairs, where the key is the `sf` number and the corresponding object gives us all the relevant information about the function including the `sf` number of its parent function. This parent-child relationship can be traced upwards to find the information of all the functions running at a particular timestamp.
+
+```ts
+export interface HermesStackFrame {
+ line: string;
+ column: string;
+ funcLine: string;
+ funcColumn: string;
+ name: string;
+ category: string;
+ /**
+ * A parent function may or may not exist
+ */
+ parent?: number;
+}
+```
+
+At this point, you should define a few more terms, namely:
+
+1. Nodes: The objects corresponding to `sf` numbers in `stackFrames`
+2. Active Nodes: The nodes which are currently running at a particular timestamp. A node is classified as running if its `sf` number is in the function call stack. This call stack can be obtained from the `sf` number of the sample and tracing upwards till parent `sf`s are available
+
+The `samples` and the `stackFrames` in tandem can then be used to generate all the start and end events at the corresponding timestamps, wherein:
+
+1. Start Nodes/Events: Nodes absent in the previous sample's function call stack but present in the current sample's.
+2. End Nodes/Events: Nodes present in the previous sample's function call stack but absent in the current sample's.
+
+
+
+You can now construct a `flamechart` of function calls as you have all the function information including its start and end timestamps.
+
+The `hermes-profile-transformer` can convert any profile generated using Hermes into a format that can be directly displayed in Chrome DevTools. More information about this can be found on [ `@react-native-community/hermes-profile-transformer` ](https://github.com/react-native-community/hermes-profile-transformer)
diff --git a/docs/running-on-device.md b/docs/running-on-device.md
index 98561a6ae32..ace0fc97dc1 100644
--- a/docs/running-on-device.md
+++ b/docs/running-on-device.md
@@ -53,7 +53,7 @@ If this is your first time running an app on your iOS device, you may need to re
Register for an [Apple developer account](https://developer.apple.com/) if you don't have one yet.
-Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).
+Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "Signing & Capabilities" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).
**Repeat** this step for the **Tests** target in your project.
diff --git a/docs/running-on-simulator-ios.md b/docs/running-on-simulator-ios.md
index befbdc8a464..de58f83244f 100644
--- a/docs/running-on-simulator-ios.md
+++ b/docs/running-on-simulator-ios.md
@@ -9,6 +9,6 @@ Once you have your React Native project initialized, you can run `npx react-nati
## Specifying a device
-You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 11"`. If you wish to run your app on an iPhone SE, run `npx react-native run-ios --simulator="iPhone SE"`.
+You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 11"`. If you wish to run your app on an iPhone SE (1st generation), run `npx react-native run-ios --simulator="iPhone SE (1st generation)"`.
The device names correspond to the list of devices available in Xcode. You can check your available devices by running `xcrun simctl list devices` from the console.
diff --git a/docs/scrollview.md b/docs/scrollview.md
index 0e60435e04f..c66c6f6a690 100644
--- a/docs/scrollview.md
+++ b/docs/scrollview.md
@@ -221,7 +221,7 @@ When true, the ScrollView will try to lock to only vertical or horizontal scroll
### `disableIntervalMomentum`
-When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for horizontal pagination when the page is less than the width of the ScrollView. The default value is false.
+When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for pagination when the page is less than the width of the horizontal ScrollView or the height of the vertical ScrollView. The default value is false.
| Type | Required |
| ---- | -------- |
diff --git a/docs/sectionlist.md b/docs/sectionlist.md
index 872fe6bc464..aeb889c95cc 100644
--- a/docs/sectionlist.md
+++ b/docs/sectionlist.md
@@ -204,13 +204,13 @@ Inherits [ScrollView Props](scrollview.md#props).
---
-### `renderItem`
+###
Required
**`renderItem`**
Default renderer for every item in every section. Can be over-ridden on a per-section basis. Should return a React element.
-| Type | Required |
-| -------- | -------- |
-| function | Yes |
+| Type |
+| -------- |
+| function |
The render function will be passed an object with the following keys:
@@ -226,13 +226,13 @@ The render function will be passed an object with the following keys:
---
-### `sections`
+###
Required
**`sections`**
The actual data to render, akin to the `data` prop in [`FlatList`](flatlist.md).
-| Type | Required |
-| ------------------------------------------- | -------- |
-| array of [Section](sectionlist.md#section)s | Yes |
+| Type |
+| ------------------------------------------- |
+| array of [Section](sectionlist.md#section)s |
---
@@ -240,9 +240,9 @@ The actual data to render, akin to the `data` prop in [`FlatList`](flatlist.md).
A marker property for telling the list to re-render (since it implements `PureComponent`). If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop, stick it here and treat it immutably.
-| Type | Required |
-| ---- | -------- |
-| any | No |
+| Type |
+| ---- |
+| any |
---
@@ -250,9 +250,9 @@ A marker property for telling the list to re-render (since it implements `PureCo
How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type | Default |
+| ------ | ------- |
+| number | `10` |
---
@@ -260,9 +260,9 @@ How many items to render in the initial batch. This should be enough to fill the
Reverses the direction of scroll. Uses scale transforms of -1.
-| Type | Required |
-| --------- | -------- |
-| [boolean] | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
@@ -270,9 +270,9 @@ Reverses the direction of scroll. Uses scale transforms of -1.
Rendered in between each item, but not at the top or bottom. By default, `highlighted`, `section`, and `[leading/trailing][Item/Section]` props are provided. `renderItem` provides `separators.highlight`/`unhighlight` which will update the `highlighted` prop, but you can also add custom props with `separators.updateProps`.
-| Type | Required |
-| ------------------------------ | -------- |
-| [component, function, element] | No |
+| Type |
+| ---------------------------- |
+| component, element, function |
---
@@ -280,9 +280,9 @@ Rendered in between each item, but not at the top or bottom. By default, `highli
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 falls back to using the index, like React does. Note that this sets keys for each item, but each overall section still needs its own key.
-| Type | Required |
-| ------------------------------------- | -------- |
-| (item: Item, index: number) => string | Yes |
+| Type |
+| --------------------------------------- |
+| (item: object, index: number) => string |
---
@@ -290,9 +290,9 @@ Used to extract a unique key for a given item at the specified index. Key is use
Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element.
-| Type | Required |
-| ------------------------------ | -------- |
-| [component, function, element] | No |
+| Type |
+| ---------------------------- |
+| component, element, function |
---
@@ -300,9 +300,9 @@ Rendered when the list is empty. Can be a React Component Class, a render functi
Rendered at the very end of the list. Can be a React Component Class, a render function, or a rendered element.
-| Type | Required |
-| ------------------------------ | -------- |
-| [component, function, element] | No |
+| Type |
+| ---------------------------- |
+| component, element, function |
---
@@ -310,9 +310,9 @@ Rendered at the very end of the list. Can be a React Component Class, a render f
Rendered at the very beginning of the list. Can be a React Component Class, a render function, or a rendered element.
-| Type | Required |
-| ---------------------------- | -------- |
-| component, function, element | No |
+| Type |
+| ---------------------------- |
+| component, element, function |
---
@@ -320,9 +320,9 @@ Rendered at the very beginning of the list. Can be a React Component Class, a re
Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content.
-| Type | Required |
-| ------------------------------------------- | -------- |
-| [(info: {distanceFromEnd: number}) => void] | No |
+| Type |
+| ------------------------------------------- |
+| (info: { distanceFromEnd: number }) => void |
---
@@ -330,9 +330,9 @@ Called once when the scroll position gets within `onEndReachedThreshold` of the
How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the `onEndReached` callback. Thus a value of 0.5 will trigger `onEndReached` when the end of the content is within half the visible length of the list.
-| Type | Required |
-| -------- | -------- |
-| [number] | No |
+| Type | Default |
+| ------ | ------- |
+| number | `2` |
---
@@ -340,9 +340,9 @@ How far from the end (in units of visible length of the list) the bottom edge of
If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the `refreshing` prop correctly. To offset the RefreshControl from the top (e.g. by 100 pts), use `progressViewOffset={100}`.
-| Type | Required |
-| ------------ | -------- |
-| [() => void] | No |
+| Type |
+| -------- |
+| function |
---
@@ -350,24 +350,9 @@ If provided, a standard RefreshControl will be added for "Pull to Refresh" funct
Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-| Type | Required |
-| -------- | -------- |
-| function | No |
-
-The function will be passed an object with the following keys:
-
-- 'viewableItems' (array of `ViewToken`s)
-- 'changed' (array of `ViewToken`s)
-
-The `ViewToken` type is exported by `ViewabilityHelper.js`:
-
-| Name | Type | Required |
-| ---------- | ------- | -------- |
-| item | any | Yes |
-| key | string | Yes |
-| index | number | No |
-| isViewable | boolean | Yes |
-| section | any | No |
+| Type |
+| ------------------------------------------------------------------------------------------------------------------ |
+| (callback: { changed: array of [ViewToken](viewtoken)s, viewableItems: array of [ViewToken](viewtoken)s }) => void |
---
@@ -375,21 +360,21 @@ The `ViewToken` type is exported by `ViewabilityHelper.js`:
Set this true while waiting for new data from a refresh.
-| Type | Required |
-| --------- | -------- |
-| [boolean] | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
### `removeClippedSubviews`
-Note: may have bugs (missing content) in some circumstances - use at your own risk.
+> Note: may have bugs (missing content) in some circumstances - use at your own risk.
This may improve scroll performance for large lists.
-| Type | Required |
-| ------- | -------- |
-| boolean | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
@@ -397,9 +382,9 @@ This may improve scroll performance for large lists.
Rendered at the bottom of each section.
-| Type | Required |
-| ------------------------------------------------------ | -------- |
-| `[(info: {section: SectionT}) => ?React.Element]` | No |
+| Type |
+| ---------------------------------------------------------------------- |
+| (info: { section: [Section](sectionlist#section) }) => element, `null` |
---
@@ -407,9 +392,9 @@ Rendered at the bottom of each section.
Rendered at the top of each section. These stick to the top of the `ScrollView` by default on iOS. See `stickySectionHeadersEnabled`.
-| Type | Required |
-| ------------------------------------------------------ | -------- |
-| `[(info: {section: SectionT}) => ?React.Element]` | No |
+| Type |
+| ---------------------------------------------------------------------- |
+| (info: { section: [Section](sectionlist#section) }) => element, `null` |
---
@@ -417,9 +402,9 @@ Rendered at the top of each section. These stick to the top of the `ScrollView`
Rendered at the top and bottom of each section (note this is different from `ItemSeparatorComponent` which is only rendered between items). These are intended to separate sections from the headers above and below and typically have the same highlight response as `ItemSeparatorComponent`. Also receives `highlighted`, `[leading/trailing][Item/Section]`, and any custom props from `separators.updateProps`.
-| Type | Required |
-| ------------------- | -------- |
-| `[ReactClass]` | No |
+| Type |
+| ---------------------------- |
+| component, element, function |
---
@@ -427,35 +412,19 @@ Rendered at the top and bottom of each section (note this is different from `Ite
Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there.
-| Type | Required |
-| ------- | -------- |
-| boolean | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
## Methods
-### `scrollToLocation()`
+### `flashScrollIndicators()`
iOS
```jsx
-scrollToLocation(params);
+flashScrollIndicators();
```
-Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section) positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
-
-> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` or `onScrollToIndexFailed` prop.
-
-**Parameters:**
-
-| Name | Type | Required | Description |
-| ------ | ------ | -------- | ----------- |
-| params | object | Yes | See below. |
-
-Valid `params` keys are:
-
-- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
-- 'itemIndex' (number) - Index within section for the item to scroll to. Required.
-- 'sectionIndex' (number) - Index for section that contains the item to scroll to. Required.
-- 'viewOffset' (number) - A fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.
-- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
+Displays the scroll indicators momentarily.
---
@@ -469,17 +438,29 @@ Tells the list an interaction has occurred, which should trigger viewability cal
---
-### `flashScrollIndicators()`
+### `scrollToLocation()`
```jsx
-flashScrollIndicators();
+scrollToLocation(params);
```
-Displays the scroll indicators momentarily.
+Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section) positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
-| Platform |
-| -------- |
-| iOS |
+> Note: Cannot scroll to locations outside the render window without specifying the `getItemLayout` or `onScrollToIndexFailed` prop.
+
+**Parameters:**
+
+| Name | Type |
+| ------------------------------------------------------- | ------ |
+| params
Required
| object |
+
+Valid `params` keys are:
+
+- 'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to `true`.
+- 'itemIndex' (number) - Index within section for the item to scroll to. Required.
+- 'sectionIndex' (number) - Index for section that contains the item to scroll to. Required.
+- 'viewOffset' (number) - A fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.
+- 'viewPosition' (number) - A value of `0` places the item specified by index at the top, `1` at the bottom, and `0.5` centered in the middle.
## Type Definitions
@@ -493,10 +474,10 @@ An object that identifies the data to be rendered for a given section.
**Properties:**
-| Name | Type | Description |
-| ------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| data | array | The data for rendering items in this section. Array of objects, much like [`FlatList`'s data prop](flatlist.md#data). |
-| [key] | string | Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default. |
-| [renderItem] | function | Optionally define an arbitrary item renderer for this section, overriding the default [`renderItem`](sectionlist.md#renderitem) for the list. |
-| [ItemSeparatorComponent] | component, function, element | Optionally define an arbitrary item separator for this section, overriding the default [`ItemSeparatorComponent`](sectionlist.md#itemseparatorcomponent) for the list. |
-| [keyExtractor] | function | Optionally define an arbitrary key extractor for this section, overriding the default [`keyExtractor`](sectionlist.md#keyextractor). |
+| Name | Type | Description |
+| ----------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data
Required
| array | The data for rendering items in this section. Array of objects, much like [`FlatList`'s data prop](flatlist#data). |
+| key | string | Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default. |
+| renderItem | function | Optionally define an arbitrary item renderer for this section, overriding the default [`renderItem`](sectionlist#renderitem) for the list. |
+| ItemSeparatorComponent | component, function, element | Optionally define an arbitrary item separator for this section, overriding the default [`ItemSeparatorComponent`](sectionlist#itemseparatorcomponent) for the list. |
+| keyExtractor | function | Optionally define an arbitrary key extractor for this section, overriding the default [`keyExtractor`](sectionlist#keyextractor). |
diff --git a/docs/signed-apk-android.md b/docs/signed-apk-android.md
index fe6a059e86c..fa2ca5bdf89 100644
--- a/docs/signed-apk-android.md
+++ b/docs/signed-apk-android.md
@@ -5,11 +5,11 @@ title: Publishing to Google Play Store
Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via [Google Play store](https://play.google.com/store) it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to [App Signing by Google Play](https://developer.android.com/studio/publish/app-signing#app-signing-google-play) functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The [Signing Your Applications](https://developer.android.com/tools/publishing/app-signing.html) page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle.
-### Generating an upload key
+## Generating an upload key
You can generate a private signing key using `keytool`. On Windows `keytool` must be run from `C:\Program Files\Java\jdkx.x.x_x\bin`.
- $ keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
+ keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called `my-upload-key.keystore`.
@@ -17,19 +17,19 @@ The keystore contains a single key, valid for 10000 days. The alias is a name th
On Mac, if you're not sure where your JDK bin folder is, then perform the following command to find it:
- $ /usr/libexec/java_home
+ /usr/libexec/java_home
It will output the directory of the JDK, which will look something like this:
/Library/Java/JavaVirtualMachines/jdkX.X.X_XXX.jdk/Contents/Home
-Navigate to that directory by using the command `$ cd /your/jdk/path` and use the keytool command with sudo permission as shown below.
+Navigate to that directory by using the command `cd /your/jdk/path` and use the keytool command with sudo permission as shown below.
- $ sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
+ sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
-_Note: Remember to keep the keystore file private. In case you've lost upload key or it's been compromised you should [follow these instructions](https://support.google.com/googleplay/android-developer/answer/7384423#reset)._
+> Note: Remember to keep the keystore file private. In case you've lost upload key or it's been compromised you should [follow these instructions](https://support.google.com/googleplay/android-developer/answer/7384423#reset).
-### Setting up Gradle variables
+## Setting up Gradle variables
1. Place the `my-upload-key.keystore` file under the `android/app` directory in your project folder.
2. Edit the file `~/.gradle/gradle.properties` or `android/gradle.properties`, and add the following (replace `*****` with the correct keystore password, alias and key password),
@@ -43,9 +43,9 @@ MYAPP_UPLOAD_KEY_PASSWORD=*****
These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app.
-_Note about security: If you are not keen on storing your passwords in plaintext, and you are running OSX, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`._
+> Note about security: If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also [store your credentials in the Keychain Access app](https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/). Then you can skip the two last rows in `~/.gradle/gradle.properties`.
-### Adding signing config to your app's Gradle config
+## Adding signing config to your app's Gradle config
The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file `android/app/build.gradle` in your project folder, and add the signing config,
@@ -74,36 +74,36 @@ android {
...
```
-### Generating the release AAB
+## Generating the release AAB
Run the following in a terminal:
```sh
-$ cd android
-$ ./gradlew bundleRelease
+cd android
+./gradlew bundleRelease
```
Gradle's `bundleRelease` will bundle all the JavaScript needed to run your app into the AAB ([Android App Bundle](https://developer.android.com/guide/app-bundle)). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at `android/app/build.gradle` to see how you can update it to reflect these changes.
-> Note: Make sure gradle.properties does not include _org.gradle.configureondemand=true_ as that will make the release build skip bundling JS and assets into the app binary.
+> Note: Make sure `gradle.properties` does not include `org.gradle.configureondemand=true` as that will make the release build skip bundling JS and assets into the app binary.
The generated AAB can be found under `android/app/build/outputs/bundle/release/app.aab`, and is ready to be uploaded to Google Play.
-_Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our [migration section](#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play) to learn how to perform that configuration change._
+In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our [migration section](#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play) to learn how to perform that configuration change.
-### Testing the release build of your app
+## Testing the release build of your app
Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using the following command in the project root:
```sh
-$ npx react-native run-android --variant=release
+npx react-native run-android --variant release
```
-Note that `--variant=release` is only available if you've set up signing as described above.
+Note that `--variant release` is only available if you've set up signing as described above.
You can terminate any running bundler instances, since all your framework and JavaScript code is bundled in the APK's assets.
-### Publishing to other stores
+## Publishing to other stores
By default, the generated APK has the native code for both x86 and ARMv7a CPU architectures. This makes it easier to share APKs that run on almost all Android devices. However, this has the downside that there will be some unused native code on any device, leading to unnecessarily bigger APKs.
@@ -124,11 +124,11 @@ Upload both these files to markets which support device targeting, such as [Goog
+ universalApk true // If true, also generate a universal APK
```
-### Enabling Proguard to reduce the size of the APK (optional)
+## Enabling Proguard to reduce the size of the APK (optional)
Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.
-_**IMPORTANT**: Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`._
+> **IMPORTANT**: Make sure to thoroughly test your app if you've enabled Proguard. Proguard often requires configuration specific to each native library you're using. See `app/proguard-rules.pro`.
To enable Proguard, edit `android/app/build.gradle`:
@@ -139,6 +139,6 @@ To enable Proguard, edit `android/app/build.gradle`:
def enableProguardInReleaseBuilds = true
```
-### Migrating old Android React Native apps to use App Signing by Google Play
+## Migrating old Android React Native apps to use App Signing by Google Play
If you are migrating from previous version of React Native chances are your app does not use App Signing by Google Play feature. We recommend you enable that in order to take advantage from things like automatic app splitting. In order to migrate from the old way of signing you need to start by [generating new upload key](#generating-an-upload-key) and then replacing release signing config in `android/app/build.gradle` to use the upload key instead of the release one (see section about [adding signing config to gradle](#adding-signing-config-to-your-app-s-gradle-config)). Once that's done you should follow the [instructions from Google Play Help website](https://support.google.com/googleplay/android-developer/answer/7384423) in order to send your original release key to Google Play.
diff --git a/docs/style.md b/docs/style.md
index dca3fbb5cb9..2dec53a5e12 100644
--- a/docs/style.md
+++ b/docs/style.md
@@ -45,4 +45,4 @@ One common pattern is to make your component accept a `style` prop which in turn
There are a lot more ways to customize the text style. Check out the [Text component reference](text.md) for a complete list.
-Now you can make your text beautiful. The next step in becoming a style master is to [learn how to control component size](height-and-width.md).
+Now you can make your text beautiful. The next step in becoming a style expert is to [learn how to control component size](height-and-width.md).
diff --git a/docs/text.md b/docs/text.md
index 8286d814dfd..3925a69d41b 100644
--- a/docs/text.md
+++ b/docs/text.md
@@ -26,14 +26,14 @@ In the following example, the nested title and body text will inherit the `fontF
import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";
-const onPressTitle = () => {
- console.log("title pressed");
-};
-
const TextInANest = () => {
- const titleText = useState("Bird's Nest");
+ const [titleText, setTitleText] = useState("Bird's Nest");
const bodyText = useState("This is not really a bird nest.");
+ const onPressTitle = () => {
+ setTitleText("Bird's Nest [pressed]");
+ };
+
return (
@@ -57,7 +57,6 @@ const styles = StyleSheet.create({
});
export default TextInANest;
-
```
@@ -75,10 +74,17 @@ class TextInANest extends Component {
};
}
+ onPressTitle = () => {
+ this.setState({ titleText: "Bird's Nest [pressed]" });
+ };
+
render() {
return (
-
+
{this.state.titleText}
{"\n"}
{"\n"}
@@ -256,9 +262,9 @@ We believe that this more constrained way to style text will yield better apps:
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
@@ -266,9 +272,9 @@ An accessibility hint helps users understand what will happen when they perform
Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
@@ -276,27 +282,13 @@ Overrides the text that's read by the screen reader when the user interacts with
Tells the screen reader to treat the currently focused on element as having a specific role.
-Possible values for `AccessibilityRole` is one of:
-
-- `'none'` - The element has no role.
-- `'button'` - The element should be treated as a button.
-- `'link'` - The element should be treated as a link.
-- `'header'` - The element is a header that divides content into sections.
-- `'search'` - The element should be treated as a search field.
-- `'image'` - The element should be treated as an image.
-- `'key'` - The element should be treated like a keyboard key.
-- `'text'` - The element should be treated as text.
-- `'summary'` - The element provides app summary information.
-- `'imagebutton'` - The element has the role of both an image and also a button.
-- `'adjustable'` - The element allows adjustment over a range of values.
-
On iOS, these roles map to corresponding Accessibility Traits. Image button has the same functionality as if the trait was set to both 'image' and 'button'. See the [Accessibility guide](accessibility.md#accessibilitytraits-ios) for more information.
On Android, these roles have similar functionality on TalkBack as adding Accessibility Traits does on Voiceover in iOS
-| Type | Required |
-| ----------------- | -------- |
-| AccessibilityRole | No |
+| Type |
+| ---------------------------------------------------- |
+| [AccessibilityRole](accessibility#accessibilityrole) |
---
@@ -306,76 +298,73 @@ Tells the screen reader to treat the currently focused on element as being in a
You can provide one state, no state, or multiple states. The states must be passed in through an object. Ex: `{selected: true, disabled: true}`.
-Possible values for `AccessibilityState` are:
-
-- `'selected'` - The element is in a selected state.
-- `'disabled'` - The element is in a disabled state.
-
-| Type | Required |
-| ------ | -------- |
-| object | No |
+| Type |
+| ------------------------------------------------------ |
+| [AccessibilityState](accessibility#accessibilitystate) |
---
### `accessible`
-When set to `true`, indicates that the view is an accessibility element. The default value for a `Text` element is `true`.
+When set to `true`, indicates that the view is an accessibility element.
-See the [Accessibility guide](accessibility.md#accessible-ios-android) for more information.
+See the [Accessibility guide](accessibility#accessible-ios-android) for more information.
-| Type | Required |
-| ---- | -------- |
-| bool | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `true` |
---
-### `adjustsFontSizeToFit`
+### `adjustsFontSizeToFit`
iOS
Specifies whether fonts should be scaled down automatically to fit given style constraints.
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No | iOS |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
### `allowFontScaling`
-Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+Specifies whether fonts should scale to respect Text Size accessibility settings.
-| Type | Required |
-| ---- | -------- |
-| bool | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `true` |
---
-### `dataDetectorType`
+### `android_hyphenationFrequency`
Android
-Determines the types of data converted to clickable URLs in the text element. By default no data types are detected.
+Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+.
-You can provide only one type.
+| Type | Default |
+| ------------------------------------------------ | -------- |
+| enum(`'none'`, `'full'`, `'balanced'`, `'high'`) | `'none'` |
-Possible values for `dataDetectorType` are:
+---
-- `'phoneNumber'`
-- `'link'`
-- `'email'`
-- `'none'`
-- `'all'`
+### `dataDetectorType`
Android
-| Type | Required | Platform |
-| --------------------------------------------------- | -------- | -------- |
-| enum('phoneNumber', 'link', 'email', 'none', 'all') | No | Android |
+Determines the types of data converted to clickable URLs in the text element. By default no data types are detected.
+
+You can provide only one type.
+
+| Type | Default |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
---
-### `disabled`
+### `disabled`
Android
-Specifies the disabled state of the text view for testing purposes
+Specifies the disabled state of the text view for testing purposes.
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No | Android |
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
---
@@ -390,11 +379,9 @@ This can be one of the following values:
- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
- `clip` - Lines are not drawn past the edge of the text container.
-The default is `tail`.
-
-| Type | Required |
-| -------------------------------------- | -------- |
-| enum('head', 'middle', 'tail', 'clip') | No |
+| Type | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail` |
---
@@ -402,23 +389,23 @@ The default is `tail`.
Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
-- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `null/undefined`: inherit from the parent node or the global default (0)
- `0`: no max, ignore parent/global default
- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type | Default |
+| ------ | ----------- |
+| number | `undefined` |
---
-### `minimumFontScale`
+### `minimumFontScale`
iOS
-Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+Specifies smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
-| Type | Required | Platform |
-| ------ | -------- | -------- |
-| number | No | iOS |
+| Type |
+| ------ |
+| number |
---
@@ -426,33 +413,31 @@ Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is
Used to locate this view from native code.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
### `numberOfLines`
-Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetiing this value, which means that no lines restriction will be applied.
This prop is commonly used with `ellipsizeMode`.
-| Type | Required |
-| ------ | -------- |
-| number | No |
+| Type | Default |
+| ------ | ------- |
+| number | `0` |
---
### `onLayout`
-Invoked on mount and layout changes with
+Invoked on mount and on layout changes.
-`{nativeEvent: {layout: {x, y, width, height}}}`
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------ |
+| ([LayoutEvent](layoutevent)) => void |
---
@@ -460,11 +445,9 @@ Invoked on mount and layout changes with
This function is called on long press.
-e.g., `onLongPress={this.increaseSize}>`
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -472,23 +455,19 @@ e.g., `onLongPress={this.increaseSize}>`
Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
-`View.props.onMoveShouldSetResponder: (event) => [true | false]`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------- |
+| ([PressEvent](pressevent)) => boolean |
---
### `onPress`
-This function is called on press. The first function argument is an event in form of [PressEvent](pressevent).
-
-e.g., `onPress={() => console.log('1st')}`
+This function is called on press.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -496,11 +475,9 @@ e.g., `onPress={() => console.log('1st')}`
The View is now responding for touch events. This is the time to highlight and show the user what is happening.
-`View.props.onResponderGrant: (event) => {}`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -508,11 +485,9 @@ The View is now responding for touch events. This is the time to highlight and s
The user is moving their finger.
-`View.props.onResponderMove: (event) => {}`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -520,11 +495,9 @@ The user is moving their finger.
Fired at the end of the touch.
-`View.props.onResponderRelease: (event) => {}`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -532,11 +505,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)
-`View.props.onResponderTerminate: (event) => {}`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ---------------------------------- |
+| ([PressEvent](pressevent)) => void |
---
@@ -544,11 +515,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.
-`View.props.onResponderTerminationRequest: (event) => {}`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------- |
+| ([PressEvent](pressevent)) => boolean |
---
@@ -556,24 +525,19 @@ Some other `View` wants to become responder and is asking this `View` to release
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`.
-`View.props.onStartShouldSetResponderCapture: (event) => [true | false]`, where `event` is a [PressEvent](pressevent).
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------- |
+| ([PressEvent](pressevent)) => boolean |
---
### `onTextLayout`
-Invoked on Text layout
-
-| Type | Required |
-| ------------------------------------------- | -------- |
-| function: (event: TextLayoutEvent) => mixed | No |
+Invoked on Text layout change.
-- TextLayoutEvent - SyntheticEvent object that contains a key called `lines` with a value which is an array containing objects with the following properties
- - { x: number, y: number, width: number, height: number, ascender: number, capHeight: number, descender: number, text: string, xHeight: number,}
+| Type |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
---
@@ -581,9 +545,9 @@ Invoked on Text layout
When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
-| Type | Required |
-| ---------------------- | -------- |
-| [Rect](rect) or number | No |
+| Type |
+| -------------------- |
+| [Rect](rect), number |
---
@@ -591,37 +555,37 @@ When the scroll view is disabled, this defines how far your touch may move off o
Lets the user select text, to use the native copy and paste functionality.
-| Type | Required |
-| ---- | -------- |
-| bool | No |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
-### `selectionColor`
+### `selectionColor`
Android
The highlight color of the text.
-| Type | Required | Platform |
-| ------------------ | -------- | -------- |
-| [color](colors.md) | No | Android |
+| Type |
+| --------------- |
+| [color](colors) |
---
### `style`
-| Type | Required |
-| -------------------------------------------------------------------------------- | -------- |
-| [Text Style Props](text-style-props.md), [View Style Props](view-style-props.md) | No |
+| Type |
+| -------------------------------------------------------------------------- |
+| [Text Style Props](text-style-props), [View Style Props](view-style-props) |
---
-### `suppressHighlighting`
+### `suppressHighlighting`
iOS
When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No | iOS |
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
---
@@ -629,29 +593,77 @@ When `true`, no visual change is made when text is pressed down. By default, a g
Used to locate this view in end-to-end tests.
-| Type | Required |
-| ------ | -------- |
-| string | No |
+| Type |
+| ------ |
+| string |
---
-### `textBreakStrategy`
+### `textBreakStrategy`
Android
-Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `highQuality`.
+Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
-| Type | Required | Platform |
-| ----------------------------------------- | -------- | -------- |
-| enum('simple', 'highQuality', 'balanced') | No | Android |
+| Type | Default |
+| ----------------------------------------------- | ------------- |
+| enum(`'simple'`, `'highQuality'`, `'balanced'`) | `highQuality` |
----
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
-### `android_hyphenationFrequency`
+#### Example
+
+```js
+{
+ capHeight: 10.496,
+ ascender: 14.624,
+ descender: 4,
+ width: 28.224,
+ height: 18.624,
+ xHeight: 6.048,
+ x: 0,
+ y: 0
+}
+```
+
+#### Properties
+
+| Name | Type | Optional | Description |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender | number | No | The line ascender height after the text layout changes. |
+| capHeight | number | No | Height of capital letter above the baseline. |
+| descender | number | No | The line descender height after the text layout changes. |
+| height | number | No | Height of the line after the text layout changes. |
+| width | number | No | Width of the line after the text layout changes. |
+| x | number | No | Line X coordinate inside the Text component. |
+| xHeight | number | No | Distance between the baseline and median of the line (corpus size). |
+| y | number | No | Line Y coordinate inside the Text component. |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponeded to every rendered text line.
+
+#### Example
+
+```js
+{
+ lines: [
+ TextLayout,
+ TextLayout
+ // ...
+ ];
+ target: 1127;
+}
+```
-Sets the frequency of automatic hyphenation to use when determining word breaks on Android API Level 23+, possible values are `none`, `full`, `balanced`, `high`, `normal`. The default value is `none`.
+#### Properties
-| Type | Required | Platform |
-| ---------------------------------------- | -------- | -------- |
-| enum('none', 'full', 'balanced', 'high') | No | Android |
+| Name | Type | Optional | Description |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines | array of [TextLayout](text#textlayout)s | No | Provides the TextLayout data for every rendered line. |
+| target | number | No | The node id of the element. |
# Known issues
diff --git a/docs/textinput.md b/docs/textinput.md
index 8ee24252c6a..a9b890816a5 100644
--- a/docs/textinput.md
+++ b/docs/textinput.md
@@ -8,20 +8,38 @@ A foundational component for inputting text into the app via a keyboard. Props p
The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
```SnackPlayer name=TextInput
-import React, { Component } from 'react';
-import { TextInput } from 'react-native';
+import React from "react";
+import { SafeAreaView, StyleSheet, TextInput } from "react-native";
const UselessTextInput = () => {
- const [value, onChangeText] = React.useState('Useless Placeholder');
+ const [text, onChangeText] = React.useState("Useless Text");
+ const [number, onChangeNumber] = React.useState(null);
return (
- onChangeText(text)}
- value={value}
- />
+
+
+
+
);
-}
+};
+
+const styles = StyleSheet.create({
+ input: {
+ height: 40,
+ margin: 12,
+ borderWidth: 1,
+ },
+});
export default UselessTextInput;
```
@@ -415,6 +433,8 @@ Sets the number of lines for a `TextInput`. Use it with multiline set to `true`
Callback that is called when the text input is blurred.
+> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onEndEditing) event, which is fired upon completion of editing.
+
| Type | Required |
| -------- | -------- |
| function | No |
@@ -463,13 +483,33 @@ Callback that is called when text input ends.
---
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type | Required |
+| ------------------------ | -------- |
+| [PressEvent](pressevent) | No |
+
+---
+
### `onFocus`
Callback that is called when the text input is focused. This is called with `{ nativeEvent: { target } }`.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required |
+| ------------------------------------ | -------- |
+| ([LayoutEvent](layoutevent)) => void | No |
---
@@ -485,7 +525,7 @@ Callback that is called when a key is pressed. This will be called with `{ nativ
### `onLayout`
-Invoked on mount and layout changes with `{ nativeEvent: {layout: {x, y, width, height}, target } }`.
+Invoked on mount and on layout changes.
| Type | Required |
| -------- | -------- |
@@ -525,16 +565,6 @@ Note that on iOS this method isn't called when using `keyboardType="phone-pad"`.
---
-### `onTextInput`
-
-Callback that is called on new text input with the argument `{ nativeEvent: { text, previousText, range: { start, end } } }`. This prop requires `multiline={true}` to be set.
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
-
----
-
### `placeholder`
The string that will be rendered before text input has been entered.
diff --git a/docs/timers.md b/docs/timers.md
index b456805b337..396a2815895 100644
--- a/docs/timers.md
+++ b/docs/timers.md
@@ -12,7 +12,7 @@ Timers are an important part of an application and React Native implements the [
- setImmediate, clearImmediate
- requestAnimationFrame, cancelAnimationFrame
-`requestAnimationFrame(fn)` is not the same as `setTimeout(fn, 0)` - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).
+`requestAnimationFrame(fn)` is not the same as `setTimeout(fn, 0)` - the former will fire after all the frames have flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).
`setImmediate` is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call `setImmediate` within a `setImmediate` callback, it will be executed right away, it won't yield back to native in between.
diff --git a/docs/touchablewithoutfeedback.md b/docs/touchablewithoutfeedback.md
index 7df5754dc56..9be24a5f81e 100644
--- a/docs/touchablewithoutfeedback.md
+++ b/docs/touchablewithoutfeedback.md
@@ -279,13 +279,11 @@ Invoked when the item receives focus.
### `onLayout`
-Invoked on mount and layout changes with
+Invoked on mount and on layout changes.
-`{nativeEvent: {layout: {x, y, width, height}}}`
-
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required |
+| ------------------------------------ | -------- |
+| ([LayoutEvent](layoutevent)) => void | No |
---
diff --git a/docs/transforms.md b/docs/transforms.md
index 3f272ab99f7..754e554b0e1 100644
--- a/docs/transforms.md
+++ b/docs/transforms.md
@@ -290,9 +290,9 @@ The skew transformations require a string so that the transform may be expressed
transform([{ skewX: '45deg' }]);
```
-| Type | Required |
-| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| array of objects: {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} | No |
+| Type | Required |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} | No |
---
diff --git a/docs/typescript.md b/docs/typescript.md
index 229dae4fa63..e4b9b91e3d6 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -194,7 +194,7 @@ To use custom path aliases with TypeScript, you need to set the path aliases to
}
```
-2. Configure the Babel side done by adding a new dependency, [`babel-plugin-module-resolver`][bpmr]:
+2. Add [`babel-plugin-module-resolver`][bpmr] as a development package to your project:
```sh
yarn add --dev babel-plugin-module-resolver
diff --git a/docs/view.md b/docs/view.md
index c82317c7d8e..cf1fe16d0ae 100644
--- a/docs/view.md
+++ b/docs/view.md
@@ -345,15 +345,13 @@ Used to locate this view from native classes.
### `onLayout`
-Invoked on mount and layout changes with:
-
-`{nativeEvent: { layout: {x, y, width, height}}}`
+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 | Required |
-| -------- | -------- |
-| function | No |
+| Type | Required |
+| ------------------------------------ | -------- |
+| ([LayoutEvent](layoutevent)) => void | No |
---
diff --git a/docs/viewtoken.md b/docs/viewtoken.md
new file mode 100644
index 00000000000..5f19a4d1066
--- /dev/null
+++ b/docs/viewtoken.md
@@ -0,0 +1,65 @@
+---
+id: viewtoken
+title: ViewToken Object Type
+---
+
+`ViewToken` object is returned as one of properties in the `onViewableItemsChanged` callback, for example in [FlatList](flatlist) component. It is exported by [`ViewabilityHelper.js`](https://github.com/facebook/react-native/blob/master/Libraries/Lists/ViewabilityHelper.js).
+
+## Example
+
+```js
+{
+ item: { key: "key-12" },
+ key: "key-12",
+ index: 11,
+ isViewable: true
+}
+```
+
+## Keys and values
+
+### `index`
+
+Unique numeric identifier assigned to the data element.
+
+| Type | Optional |
+| ------ | -------- |
+| number | Yes |
+
+### `isViewable`
+
+Specifies if at least some part of list element is visible in the viewport.
+
+| Type | Optional |
+| ------- | -------- |
+| boolean | No |
+
+### `item`
+
+Item data
+
+| Type | Optional |
+| ---- | -------- |
+| any | No |
+
+### `key`
+
+Key identifier assigned of the data element extracted to the top level.
+
+| Type | Optional |
+| ------ | -------- |
+| string | No |
+
+### `section`
+
+Item section data when used with `SectionList`.
+
+| Type | Optional |
+| ---- | -------- |
+| any | Yes |
+
+## Used by
+
+- [`FlatList`](flatlist)
+- [`SectionList`](sectionlist)
+- [`VirtualizedList`](virtualizedlist)
diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md
index c430ca8555a..8704678d609 100644
--- a/docs/virtualizedlist.md
+++ b/docs/virtualizedlist.md
@@ -323,18 +323,11 @@ Used to handle failures when scrolling to an index that has not been measured ye
### `onViewableItemsChanged`
-```jsx
-(info: {
- viewableItems: array,
- changed: array,
- }) => void
-```
-
Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
-| Type | Required |
-| -------- | -------- |
-| function | No |
+| Type |
+| ------------------------------------------------------------------------------------------------------------------ |
+| (callback: { changed: array of [ViewToken](viewtoken)s, viewableItems: array of [ViewToken](viewtoken)s }) => void |
---
diff --git a/netlify.toml b/netlify.toml
index c83f7a2f68c..1cb14009d45 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,4 +1,4 @@
[build]
base = "website"
- publish = "build/react-native"
+ publish = "website/build/react-native"
command = "sed -i -e \"s|const baseUrl .*|const baseUrl = '/';|g\" siteConfig.js && yarn install && node netlify-reduce-versions && yarn sync-community-repos && yarn build"
diff --git a/website/i18n/en.json b/website/i18n/en.json
index 2669d925928..b7085337a8e 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -194,6 +194,9 @@
"layoutanimation": {
"title": "LayoutAnimation"
},
+ "layoutevent": {
+ "title": "LayoutEvent Object Type"
+ },
"libraries": {
"title": "Using Libraries"
},
@@ -272,6 +275,9 @@
"pressevent": {
"title": "PressEvent Object Type"
},
+ "profile-hermes": {
+ "title": "Profiling with Hermes"
+ },
"profiling": {
"title": "Profiling"
},
@@ -437,6 +443,9 @@
"viewpagerandroid": {
"title": "🚧 ViewPagerAndroid"
},
+ "viewtoken": {
+ "title": "ViewToken Object Type"
+ },
"virtualizedlist": {
"title": "VirtualizedList"
},
@@ -3179,6 +3188,12 @@
"version-0.59/version-0.59-stylesheet": {
"title": "StyleSheet"
},
+ "version-0.59/version-0.59-tabbarios-item": {
+ "title": "🚧 TabBarIOS.Item"
+ },
+ "version-0.59/version-0.59-tabbarios": {
+ "title": "🚧 TabBarIOS"
+ },
"version-0.59/version-0.59-text": {
"title": "Text"
},
diff --git a/website/package.json b/website/package.json
index d3fef85907a..f4bd9517991 100644
--- a/website/package.json
+++ b/website/package.json
@@ -43,13 +43,13 @@
},
"devDependencies": {
"@motiz88/react-native-docgen": "0.0.3",
- "alex": "^8.2.0",
+ "alex": "^9.0.1",
"front-matter": "^4.0.2",
"fs-extra": "^9.0.1",
"glob": "^7.1.6",
"glob-promise": "^3.4.0",
"husky": "^4.2.5",
- "node-fetch": "^2.6.0",
+ "node-fetch": "^2.6.1",
"path": "^0.12.7",
"prettier": "1.16.4",
"pretty-quick": "^1.11.1",
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 559e7cae3ff..919670f2fff 100644
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -72,8 +72,10 @@ Save, see, repeat.
Members of the React Native team frequently speak at various
conferences.
-You can follow the latest news from the React Native team on
-Twitter
+You can follow the latest news from the [React Native team] on
+Twitter.
+
+[React Native team]: https://twitter.com/reactnative
`,
community: `
In 2018, React Native had the [2nd highest] number of contributors for any repository in GitHub.
@@ -81,7 +83,7 @@ Today, React Native is supported by contributions from individuals and companies
including [Callstack], [Expo], [Infinite Red], [Microsoft], and [Software Mansion].
Our community is always shipping exciting new projects and exploring platforms beyond Android and iOS
-with repos like React Native Windows and React Native Web.
+with repos like [React Native Windows], [React Native macOS] and [React Native Web].
[2nd highest]: https://octoverse.github.com/2018/projects.html#repositories
[Callstack]: https://callstack.com/
@@ -89,6 +91,9 @@ with repos like React Native Windows and React Native Web.
[Infinite Red]: https://infinite.red/
[Microsoft]: https://www.microsoft.com/en-gb/
[Software Mansion]: https://swmansion.com/
+[React Native Windows]: https://github.com/microsoft/react-native-windows#readme
+[React Native macOS]: https://github.com/microsoft/react-native-macos#readme
+[React Native Web]: https://github.com/necolas/react-native-web#readme
`,
};
@@ -437,10 +442,8 @@ function Community() {
-
- Facebook released React Native in 2015 and has been
- maintaining it ever since.
-
+ Facebook released React Native in 2015 and has been maintaining
+ it ever since.