Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
Animated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
diff --git a/docs/0.44/animated/index.html b/docs/0.44/animated/index.html
index 6f8c379b8cc..046fb48a94f 100644
--- a/docs/0.44/animated/index.html
+++ b/docs/0.44/animated/index.html
@@ -1,4 +1,4 @@
-Animated · React Native Animated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
Animated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
diff --git a/docs/0.44/flatlist.html b/docs/0.44/flatlist.html
index dfaa4f76f43..3e614f88e34 100644
--- a/docs/0.44/flatlist.html
+++ b/docs/0.44/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native FlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+FlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode. @@ -198,7 +198,7 @@ class MyList extends React.PureComponent {
data
-For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
| Type | Required |
|---|
getItemLayout
-getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is efficient if you have fixed sized items, for example:
getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.44/flatlist/index.html b/docs/0.44/flatlist/index.html
index dfaa4f76f43..3e614f88e34 100644
--- a/docs/0.44/flatlist/index.html
+++ b/docs/0.44/flatlist/index.html
@@ -1,4 +1,4 @@
-FlatList · React Native FlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+FlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode. @@ -198,7 +198,7 @@ class MyList extends React.PureComponent {
data
-For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
| Type | Required |
|---|
getItemLayout
-getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is efficient if you have fixed sized items, for example:
getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.44/listview.html b/docs/0.44/listview.html
index b2ed0a5b131..2d8d665afb7 100644
--- a/docs/0.44/listview.html
+++ b/docs/0.44/listview.html
@@ -1,4 +1,4 @@
-ListView · React Native ListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with an array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
ListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
Minimal example:
class MyComponent extends Component {
constructor() {
diff --git a/docs/0.44/listview/index.html b/docs/0.44/listview/index.html
index b2ed0a5b131..2d8d665afb7 100644
--- a/docs/0.44/listview/index.html
+++ b/docs/0.44/listview/index.html
@@ -1,4 +1,4 @@
-ListView · React Native ListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with an array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
ListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
Minimal example:
class MyComponent extends Component {
constructor() {
diff --git a/docs/0.44/listviewdatasource.html b/docs/0.44/listviewdatasource.html
index 41b3d7fdfc7..ca57186140c 100644
--- a/docs/0.44/listviewdatasource.html
+++ b/docs/0.44/listviewdatasource.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native ListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
ListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.44/listviewdatasource/index.html b/docs/0.44/listviewdatasource/index.html
index 41b3d7fdfc7..ca57186140c 100644
--- a/docs/0.44/listviewdatasource/index.html
+++ b/docs/0.44/listviewdatasource/index.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
ListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
ListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.44/modal.html b/docs/0.44/modal.html
index df30c1cd508..959e108f80a 100644
--- a/docs/0.44/modal.html
+++ b/docs/0.44/modal.html
@@ -1,4 +1,4 @@
-Modal · React Native
Modal
The Modal component is a basic way to present content above an enclosing view.
+Modal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.44/modal/index.html b/docs/0.44/modal/index.html
index df30c1cd508..959e108f80a 100644
--- a/docs/0.44/modal/index.html
+++ b/docs/0.44/modal/index.html
@@ -1,4 +1,4 @@
-Modal · React Native Modal
The Modal component is a basic way to present content above an enclosing view.
+Modal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.44/navigatorios.html b/docs/0.44/navigatorios.html
index e2cff297687..5f68ddad6b5 100644
--- a/docs/0.44/navigatorios.html
+++ b/docs/0.44/navigatorios.html
@@ -248,7 +248,6 @@ render() {
interactivePopGestureEnabled
-
Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
@@ -357,7 +356,7 @@ render() {
pop()
pop();
-Get and remove the previous scene.
+Pop back to the previous scene.
replaceAtIndex()
replaceAtIndex((route: object), (index: number));
@@ -438,7 +437,7 @@ render() {
resetTo()
resetTo((route: object));
-Replaces the top item, gets back to and removes it.
+Replaces the top item and pop to it.
Parameters:
diff --git a/docs/0.44/navigatorios/index.html b/docs/0.44/navigatorios/index.html
index e2cff297687..5f68ddad6b5 100644
--- a/docs/0.44/navigatorios/index.html
+++ b/docs/0.44/navigatorios/index.html
@@ -248,7 +248,6 @@ render() {
interactivePopGestureEnabled
-
Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.
If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the interactivePopGestureEnabled prop, you can never restore the default behavior.
@@ -357,7 +356,7 @@ render() {
pop()
pop();
-Get and remove the previous scene.
+Pop back to the previous scene.
replaceAtIndex()
replaceAtIndex((route: object), (index: number));
@@ -438,7 +437,7 @@ render() {
resetTo()
resetTo((route: object));
-Replaces the top item, gets back to and removes it.
+Replaces the top item and pop to it.
Parameters:
diff --git a/docs/0.44/scrollview.html b/docs/0.44/scrollview.html
index 0f56e971338..359f16c1ddc 100644
--- a/docs/0.44/scrollview.html
+++ b/docs/0.44/scrollview.html
@@ -69,12 +69,12 @@
}
});
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -490,7 +490,6 @@
indicatorStyle
The style of the scroll indicators.
-
default (the default), same as black.black, scroll indicator is black. This style is good against a light background.
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -490,7 +490,6 @@
indicatorStyle
The style of the scroll indicators.
-
default (the default), same as black.black, scroll indicator is black. This style is good against a light background.
If you don't need section support and want a simpler interface, use <FlatList>.
If you need sticky section header support, use ListView for now.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item.title}}
renderSectionHeader={({section}) => <H1 title={section.key} />}
diff --git a/docs/0.44/sectionlist/index.html b/docs/0.44/sectionlist/index.html
index 884d052fe32..bff40db82f3 100644
--- a/docs/0.44/sectionlist/index.html
+++ b/docs/0.44/sectionlist/index.html
@@ -83,7 +83,7 @@
If you don't need section support and want a simpler interface, use <FlatList>.
If you need sticky section header support, use ListView for now.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item.title}}
renderSectionHeader={({section}) => <H1 title={section.key} />}
diff --git a/docs/0.44/textinput.html b/docs/0.44/textinput.html
index 313ced165ce..97949294d13 100644
--- a/docs/0.44/textinput.html
+++ b/docs/0.44/textinput.html
@@ -69,7 +69,7 @@
}
});
EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required
removeClippedSubviews
-This is a reserved performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
+This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
Type Required
renderToHardwareTextureAndroid
Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.
-On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
+On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
Type Required Platform
removeClippedSubviews
-This is a reserved performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
+This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
Type Required
renderToHardwareTextureAndroid
Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.
-On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
+On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
Type Required Platform Animated · React Native EditAnimated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
+ EditAnimated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
diff --git a/docs/0.45/animated/index.html b/docs/0.45/animated/index.html
index af2d2946a2a..da510d92f76 100644
--- a/docs/0.45/animated/index.html
+++ b/docs/0.45/animated/index.html
@@ -1,4 +1,4 @@
-Animated · React Native
EditAnimated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
+ EditAnimated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
The simplest workflow for creating an animation is to to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
diff --git a/docs/0.45/listview.html b/docs/0.45/listview.html
index bad4c13344f..a725fed1b26 100644
--- a/docs/0.45/listview.html
+++ b/docs/0.45/listview.html
@@ -1,4 +1,4 @@
-ListView · React Native
EditListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with an array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
+ EditListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
Minimal example:
class MyComponent extends Component {
constructor() {
diff --git a/docs/0.45/listview/index.html b/docs/0.45/listview/index.html
index bad4c13344f..a725fed1b26 100644
--- a/docs/0.45/listview/index.html
+++ b/docs/0.45/listview/index.html
@@ -1,4 +1,4 @@
-ListView · React Native
EditListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with an array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
+ EditListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.
Minimal example:
class MyComponent extends Component {
constructor() {
diff --git a/docs/0.45/listviewdatasource.html b/docs/0.45/listviewdatasource.html
index 27d853afcd2..6e89311c3a0 100644
--- a/docs/0.45/listviewdatasource.html
+++ b/docs/0.45/listviewdatasource.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.45/listviewdatasource/index.html b/docs/0.45/listviewdatasource/index.html
index 27d853afcd2..6e89311c3a0 100644
--- a/docs/0.45/listviewdatasource/index.html
+++ b/docs/0.45/listviewdatasource/index.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.45/modal.html b/docs/0.45/modal.html
index 38ff23f60b6..1d1e5bf832b 100644
--- a/docs/0.45/modal.html
+++ b/docs/0.45/modal.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.45/modal/index.html b/docs/0.45/modal/index.html
index 38ff23f60b6..1d1e5bf832b 100644
--- a/docs/0.45/modal/index.html
+++ b/docs/0.45/modal/index.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.46/listviewdatasource.html b/docs/0.46/listviewdatasource.html
index 9d2af1e241b..f551cd0cd6d 100644
--- a/docs/0.46/listviewdatasource.html
+++ b/docs/0.46/listviewdatasource.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.46/listviewdatasource/index.html b/docs/0.46/listviewdatasource/index.html
index 9d2af1e241b..f551cd0cd6d 100644
--- a/docs/0.46/listviewdatasource/index.html
+++ b/docs/0.46/listviewdatasource/index.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.46/modal.html b/docs/0.46/modal.html
index a9474fc23c5..3d47bae407f 100644
--- a/docs/0.46/modal.html
+++ b/docs/0.46/modal.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.46/modal/index.html b/docs/0.46/modal/index.html
index a9474fc23c5..3d47bae407f 100644
--- a/docs/0.46/modal/index.html
+++ b/docs/0.46/modal/index.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.47/flatlist.html b/docs/0.47/flatlist.html
index 951cfdba9fa..566204a7fa5 100644
--- a/docs/0.47/flatlist.html
+++ b/docs/0.47/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native
EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
@@ -202,7 +202,7 @@ class MyList extends React.PureComponent {
data
-For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
+For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
Type Required
getItemLayout
-getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is efficient if you have fixed sized items, for example:
+getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.47/flatlist/index.html b/docs/0.47/flatlist/index.html
index 951cfdba9fa..566204a7fa5 100644
--- a/docs/0.47/flatlist/index.html
+++ b/docs/0.47/flatlist/index.html
@@ -1,4 +1,4 @@
-FlatList · React Native EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
@@ -202,7 +202,7 @@ class MyList extends React.PureComponent {
data
-For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
+For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
Type Required
getItemLayout
-getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is efficient if you have fixed sized items, for example:
+getItemLayout is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. getItemLayout is the most efficient, and is easy to use if you have fixed height items, for example:
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
diff --git a/docs/0.47/layout-props.html b/docs/0.47/layout-props.html
index e4e86395081..13620f50e91 100644
--- a/docs/0.47/layout-props.html
+++ b/docs/0.47/layout-props.html
@@ -571,9 +571,9 @@
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
+position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
-If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
See https://github.com/facebook/yoga for more details on how position differs between React Native and CSS.
diff --git a/docs/0.47/layout-props/index.html b/docs/0.47/layout-props/index.html
index e4e86395081..13620f50e91 100644
--- a/docs/0.47/layout-props/index.html
+++ b/docs/0.47/layout-props/index.html
@@ -571,9 +571,9 @@
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
+position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
-If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
See https://github.com/facebook/yoga for more details on how position differs between React Native and CSS.
diff --git a/docs/0.47/listviewdatasource.html b/docs/0.47/listviewdatasource.html
index bcba0ba987e..5804ffbac6d 100644
--- a/docs/0.47/listviewdatasource.html
+++ b/docs/0.47/listviewdatasource.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.47/listviewdatasource/index.html b/docs/0.47/listviewdatasource/index.html
index bcba0ba987e..5804ffbac6d 100644
--- a/docs/0.47/listviewdatasource/index.html
+++ b/docs/0.47/listviewdatasource/index.html
@@ -1,4 +1,4 @@
-ListViewDataSource · React Native
EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.
-To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.
+ EditListViewDataSource
Provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.
+To update the data in the datasource, use cloneWithRows (or cloneWithRowsAndSections if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.
In this example, a component receives data in chunks, handled by _onDataArrived, which concats the new data onto the old data and updates the data source. We use concat to create a new array - mutating this._data, e.g. with this._data.push(newRowData), would be an error. _rowHasChanged understands the shape of the row data and knows how to efficiently compare it.
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
cloneWithRows()
cloneWithRows(dataBlob, rowIdentities);
-Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
+Clones this ListViewDataSource with the specified dataBlob and rowIdentities. The dataBlob is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).
The rowIdentities is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.
-Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
+Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the dataBlob.
cloneWithRowsAndSections()
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
diff --git a/docs/0.47/modal.html b/docs/0.47/modal.html
index 4ceec2be016..87e7ea9735c 100644
--- a/docs/0.47/modal.html
+++ b/docs/0.47/modal.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.47/modal/index.html b/docs/0.47/modal/index.html
index 4ceec2be016..87e7ea9735c 100644
--- a/docs/0.47/modal/index.html
+++ b/docs/0.47/modal/index.html
@@ -1,4 +1,4 @@
-Modal · React Native
EditModal
The Modal component is a basic way to present content above an enclosing view.
+ EditModal
The Modal component is a simple way to present content above an enclosing view.
Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.
import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View} from 'react-native';
diff --git a/docs/0.47/scrollview.html b/docs/0.47/scrollview.html
index 377954fa502..6286092a4cb 100644
--- a/docs/0.47/scrollview.html
+++ b/docs/0.47/scrollview.html
@@ -69,12 +69,12 @@
}
});
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -514,7 +514,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -514,7 +514,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.- Scroll loading.
If you don't need section support and want a simpler interface, use <FlatList>.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item.title} />}
renderSectionHeader={({section}) => <H1 title={section.title} />}
diff --git a/docs/0.47/sectionlist/index.html b/docs/0.47/sectionlist/index.html
index 61777f3ccb2..61781957e10 100644
--- a/docs/0.47/sectionlist/index.html
+++ b/docs/0.47/sectionlist/index.html
@@ -82,7 +82,7 @@
Scroll loading.
If you don't need section support and want a simpler interface, use <FlatList>.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item.title} />}
renderSectionHeader={({section}) => <H1 title={section.title} />}
diff --git a/docs/0.47/view.html b/docs/0.47/view.html
index 68508ba9acc..04e2429c7a8 100644
--- a/docs/0.47/view.html
+++ b/docs/0.47/view.html
@@ -386,7 +386,7 @@
removeClippedSubviews
-This is a reserved performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
+This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
Type Required
renderToHardwareTextureAndroid
Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.
-On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
+On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
Type Required Platform
removeClippedSubviews
-This is a reserved performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
+This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).
Type Required
renderToHardwareTextureAndroid
Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.
-On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
+On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.
Type Required Platform Animated · React Native EditAnimated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
-The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
+ EditAnimated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
+The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -213,14 +213,14 @@
Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
Config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.Animated · React Native
EditAnimated
The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
-The most basic workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
+ EditAnimated
The Animated library is designed to make animations fluid, powerful, and easy to build and maintain. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple start/stop methods to control time-based animation execution.
+The simplest workflow for creating an animation is to create an Animated.Value, hook it up to one or more style attributes of an animated component, and then drive updates via animations using Animated.timing():
Animated.timing(
// Animate value over time
this.state.fadeAnim, // The value to drive
@@ -90,7 +90,7 @@
Animated provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
Animated.decay() starts with an initial velocity and gradually slows to a stop.Animated.spring() provides a basic spring physics model.Animated.spring() provides a simple spring physics model.Animated.timing() animates a value over time using easing functions.
In most cases, you will be using timing(). By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
@@ -100,7 +100,7 @@
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
You can use the native driver by specifying useNativeDriver: true in your animation configuration. See the Animations guide to learn more.
Animatable components
-Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
createAnimatedComponent() can be used to make a component animatable.
@@ -119,7 +119,7 @@
Animated.sequence() starts the animations in order, waiting for each to complete before starting the next.Animated.stagger() starts animations in order and in parallel, but with successive delays.Animations can also be chained together by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
+Animations can also be chained together simply by setting the toValue of one animation to be another Animated.Value. See Tracking dynamic values in the Animations guide.
By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
Combining animated values
You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:
@@ -213,14 +213,14 @@
Animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
Config is an object that may have the following options.
Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
-The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
+The friction/tension or bounciness/speed options match the spring model in Facebook Pop, Rebound, and Origami.
friction: Controls "bounciness"/overshoot. Default 7.tension: Controls speed. Default 40.speed: Controls speed of the animation. Default 12.bounciness: Controls bounciness. Default 8.
-Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
+Specifying stiffness/damping/mass as parameters makes Animated.spring use an analytical spring model based on the motion equations of a damped harmonic oscillator. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.
stiffness: The spring stiffness coefficient. Default 100.damping: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.51/easing/index.html b/docs/0.51/easing/index.html
index 271cbde8d52..f0872b1669c 100644
--- a/docs/0.51/easing/index.html
+++ b/docs/0.51/easing/index.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.51/flatlist.html b/docs/0.51/flatlist.html
index 54b36e5b0c4..aab08e1d51b 100644
--- a/docs/0.51/flatlist.html
+++ b/docs/0.51/flatlist.html
@@ -1,4 +1,4 @@
-FlatList · React Native
EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
diff --git a/docs/0.51/flatlist/index.html b/docs/0.51/flatlist/index.html
index 54b36e5b0c4..aab08e1d51b 100644
--- a/docs/0.51/flatlist/index.html
+++ b/docs/0.51/flatlist/index.html
@@ -1,4 +1,4 @@
-FlatList · React Native
EditFlatList
A performant interface for rendering basic, flat lists, supporting the most handy features:
+ EditFlatList
A performant interface for rendering simple, flat lists, supporting the most handy features:
- Fully cross-platform.
- Optional horizontal mode.
diff --git a/docs/0.51/layout-props.html b/docs/0.51/layout-props.html
index e8b91e3feb4..d8801a37e83 100644
--- a/docs/0.51/layout-props.html
+++ b/docs/0.51/layout-props.html
@@ -657,9 +657,9 @@
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
+position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
-If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
See https://github.com/facebook/yoga for more details on how position differs between React Native and CSS.
diff --git a/docs/0.51/layout-props/index.html b/docs/0.51/layout-props/index.html
index e8b91e3feb4..d8801a37e83 100644
--- a/docs/0.51/layout-props/index.html
+++ b/docs/0.51/layout-props/index.html
@@ -657,9 +657,9 @@
position
-position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent.
+position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent.
If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
-If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.
+If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.
See https://github.com/facebook/yoga for more details on how position differs between React Native and CSS.
diff --git a/docs/0.51/scrollview.html b/docs/0.51/scrollview.html
index 6690b5ebbda..2a46e838947 100644
--- a/docs/0.51/scrollview.html
+++ b/docs/0.51/scrollview.html
@@ -69,12 +69,12 @@
}
});
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.- Scroll loading.
If you don't need section support and want a simpler interface, use <FlatList>.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item} />}
renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.51/sectionlist/index.html b/docs/0.51/sectionlist/index.html
index dd786fbb1b1..5815daccefd 100644
--- a/docs/0.51/sectionlist/index.html
+++ b/docs/0.51/sectionlist/index.html
@@ -82,7 +82,7 @@
Scroll loading.
If you don't need section support and want a simpler interface, use <FlatList>.
-Examples:
+Simple Examples:
<SectionList
renderItem={({item}) => <ListItem title={item} />}
renderSectionHeader={({section}) => <Header title={section.title} />}
diff --git a/docs/0.51/text.html b/docs/0.51/text.html
index 86821ae0d44..a1c610e02dc 100644
--- a/docs/0.51/text.html
+++ b/docs/0.51/text.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.51/text/index.html b/docs/0.51/text/index.html
index 86821ae0d44..a1c610e02dc 100644
--- a/docs/0.51/text/index.html
+++ b/docs/0.51/text/index.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.51/textinput.html b/docs/0.51/textinput.html
index f22cffc3fcb..a71b0c491bf 100644
--- a/docs/0.51/textinput.html
+++ b/docs/0.51/textinput.html
@@ -69,7 +69,7 @@
}
});
EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.52/easing/index.html b/docs/0.52/easing/index.html
index 7f9587ea679..d5bade9f9af 100644
--- a/docs/0.52/easing/index.html
+++ b/docs/0.52/easing/index.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.52/scrollview.html b/docs/0.52/scrollview.html
index 43bf4351161..300cc07a4a6 100644
--- a/docs/0.52/scrollview.html
+++ b/docs/0.52/scrollview.html
@@ -69,12 +69,12 @@
}
});
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.
EditScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
<ScrollView> vs <FlatList> - which one to use?
-ScrollView renders all its react child components at once, but this has a performance downside.
-Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
-This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
+ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.
+On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.
+This is where FlatList comes into play. FlatList renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.
FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.
Props
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
indicatorStyle
The style of the scroll indicators.
-
'default' (the default), same as black.'black', scroll indicator is black. This style is good against a light background.In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.52/text/index.html b/docs/0.52/text/index.html
index bf3555a038c..dec5b78476f 100644
--- a/docs/0.52/text/index.html
+++ b/docs/0.52/text/index.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.52/textinput.html b/docs/0.52/textinput.html
index 59ee9743753..c72587e9620 100644
--- a/docs/0.52/textinput.html
+++ b/docs/0.52/textinput.html
@@ -69,7 +69,7 @@
}
});
EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required EditTextInput
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
-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:
+The simplest 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 simple example:
defaultValue
-Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
Type Required
value
-The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
+The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker.
Type Required Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.53/easing/index.html b/docs/0.53/easing/index.html
index bba172a5fc1..586b5465a6a 100644
--- a/docs/0.53/easing/index.html
+++ b/docs/0.53/easing/index.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.53/text.html b/docs/0.53/text.html
index 2e02793a487..372d9e42bc0 100644
--- a/docs/0.53/text.html
+++ b/docs/0.53/text.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.53/text/index.html b/docs/0.53/text/index.html
index 2e02793a487..372d9e42bc0 100644
--- a/docs/0.53/text/index.html
+++ b/docs/0.53/text/index.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.54/easing.html b/docs/0.54/easing.html
index 6169533c3f5..b86e261a5e5 100644
--- a/docs/0.54/easing.html
+++ b/docs/0.54/easing.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.54/easing/index.html b/docs/0.54/easing/index.html
index 6169533c3f5..b86e261a5e5 100644
--- a/docs/0.54/easing/index.html
+++ b/docs/0.54/easing/index.html
@@ -73,10 +73,10 @@
Predefined animations
The Easing module provides several predefined animations through the following methods:
-back provides a basic animation where the object goes slightly back before moving forwardback provides a simple animation where the object goes slightly back before moving forwardbounce provides a bouncing animationease provides a basic inertial animationelastic provides a basic spring interactionease provides a simple inertial animationelastic provides a simple spring interaction
Standard functions
Three standard easing functions are provided:
@@ -142,7 +142,7 @@
ease()
static ease(t)
-A basic inertial interaction, similar to an object slowly accelerating to speed.
+A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
@@ -184,14 +184,14 @@
elastic()
static elastic(bounciness)
-A basic elastic interaction, similar to a spring oscillating back and forth.
+A simple elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
static back(s)
-Use with Animated.parallel() to create a basic effect where the object animates back slightly as the animation starts.
+Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
- http://tiny.cc/back_default (s = 1.70158, default)
@@ -200,7 +200,7 @@
bounce()
static bounce(t)
-Provides a basic bouncing effect.
+Provides a simple bouncing effect.
http://easings.net/#easeInBounce
bezier()
diff --git a/docs/0.54/text.html b/docs/0.54/text.html
index 710501fe30e..95fc1cd7d8a 100644
--- a/docs/0.54/text.html
+++ b/docs/0.54/text.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>
diff --git a/docs/0.54/text/index.html b/docs/0.54/text/index.html
index 710501fe30e..95fc1cd7d8a 100644
--- a/docs/0.54/text/index.html
+++ b/docs/0.54/text/index.html
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
In order to use this feature, you must give the view a width and a height.
Containers
-The <Text> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
+The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.
<Text>
<Text>First part and </Text>
<Text>second part</Text>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>
-Assuming that MyAppText is a component that only renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
+Assuming that MyAppText is a component that simply renders out its children into a Text component with styling, then MyAppHeaderText can be defined as follows:
class MyAppHeaderText extends Component {
render() {
<MyAppText>