diff --git a/.alexignore b/.alexignore index 2ac280cf12b3cc..6c65071aa0ae9f 100644 --- a/.alexignore +++ b/.alexignore @@ -38,6 +38,5 @@ website/versioned_docs/version-0.43/ website/versioned_docs/version-0.44/ website/versioned_docs/version-0.46/ website/versioned_docs/version-0.47/ -website/versioned_docs/version-0.51/ website/versioned_docs/version-0.53/ website/versioned_docs/version-0.58/ diff --git a/website/versioned_docs/version-0.51/animated.md b/website/versioned_docs/version-0.51/animated.md index 00e304d2c19b38..ca22a23170b71b 100644 --- a/website/versioned_docs/version-0.51/animated.md +++ b/website/versioned_docs/version-0.51/animated.md @@ -4,9 +4,9 @@ title: Animated original_id: 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 `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 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()`: +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()`: ```jsx Animated.timing( @@ -34,7 +34,7 @@ There are two value types you can use with `Animated`: `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()`](animated.md#decay) starts with an initial velocity and gradually slows to a stop. -- [`Animated.spring()`](animated.md#spring) provides a simple spring physics model. +- [`Animated.spring()`](animated.md#spring) provides a basic spring physics model. - [`Animated.timing()`](animated.md#timing) animates a value over time using [easing functions](easing.md). 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. @@ -51,7 +51,7 @@ You can use the native driver by specifying `useNativeDriver: true` in your anim ### Animatable components -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. +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. - [`createAnimatedComponent()`](animated.md#createanimatedcomponent) can be used to make a component animatable. @@ -71,7 +71,7 @@ Animations can also be combined in complex ways using composition functions: - [`Animated.sequence()`](animated.md#sequence) starts the animations in order, waiting for each to complete before starting the next. - [`Animated.stagger()`](animated.md#stagger) starts animations in order and in parallel, but with successive delays. -Animations can also be chained together simply by setting the `toValue` of one animation to be another `Animated.Value`. See [Tracking dynamic values](animations.md#tracking-dynamic-values) in the Animations guide. +Animations can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. See [Tracking dynamic values](animations.md#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. @@ -193,14 +193,14 @@ 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](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), and [Origami](http://origami.design/). +The friction/tension or bounciness/speed options match the spring model in [`Facebook Pop`](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), and [Origami](http://origami.design/). - `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](https://en.wikipedia.org/wiki/Harmonic_oscillator#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. +Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an analytical spring model based on the motion equations of a [damped harmonic oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#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. - `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. diff --git a/website/versioned_docs/version-0.51/easing.md b/website/versioned_docs/version-0.51/easing.md index 39776511ebfa1a..a863bcf356cb0b 100644 --- a/website/versioned_docs/version-0.51/easing.md +++ b/website/versioned_docs/version-0.51/easing.md @@ -12,10 +12,10 @@ You can find a visualization of some common easing functions at http://easings.n The `Easing` module provides several predefined animations through the following methods: -- [`back`](easing.md#back) provides a simple animation where the object goes slightly back before moving forward +- [`back`](easing.md#back) provides a basic animation where the object goes slightly back before moving forward - [`bounce`](easing.md#bounce) provides a bouncing animation -- [`ease`](easing.md#ease) provides a simple inertial animation -- [`elastic`](easing.md#elastic) provides a simple spring interaction +- [`ease`](easing.md#ease) provides a basic inertial animation +- [`elastic`](easing.md#elastic) provides a basic spring interaction ### Standard functions @@ -106,7 +106,7 @@ http://cubic-bezier.com/#0,0,1,1 static ease(t) ``` -A simple inertial interaction, similar to an object slowly accelerating to speed. +A basic inertial interaction, similar to an object slowly accelerating to speed. http://cubic-bezier.com/#.42,0,1,1 @@ -190,7 +190,7 @@ http://easings.net/#easeInExpo static elastic(bounciness) ``` -A simple elastic interaction, similar to a spring oscillating back and forth. +A basic 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. @@ -204,7 +204,7 @@ http://easings.net/#easeInElastic static back(s) ``` -Use with `Animated.parallel()` to create a simple effect where the object animates back slightly as the animation starts. +Use with `Animated.parallel()` to create a basic effect where the object animates back slightly as the animation starts. Wolfram Plot: @@ -218,7 +218,7 @@ Wolfram Plot: static bounce(t) ``` -Provides a simple bouncing effect. +Provides a basic bouncing effect. http://easings.net/#easeInBounce diff --git a/website/versioned_docs/version-0.51/flatlist.md b/website/versioned_docs/version-0.51/flatlist.md index 1f0a584c383af5..31e5c154584d92 100644 --- a/website/versioned_docs/version-0.51/flatlist.md +++ b/website/versioned_docs/version-0.51/flatlist.md @@ -4,7 +4,7 @@ title: FlatList original_id: flatlist --- -A performant interface for rendering simple, flat lists, supporting the most handy features: +A performant interface for rendering basic, flat lists, supporting the most handy features: - Fully cross-platform. - Optional horizontal mode. diff --git a/website/versioned_docs/version-0.51/layout-props.md b/website/versioned_docs/version-0.51/layout-props.md index 87d79adc8b99b5..c5e3461d9b8e70 100644 --- a/website/versioned_docs/version-0.51/layout-props.md +++ b/website/versioned_docs/version-0.51/layout-props.md @@ -566,11 +566,11 @@ Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBotto ### `position` -`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. +`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. 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, just 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, 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/website/versioned_docs/version-0.51/scrollview.md b/website/versioned_docs/version-0.51/scrollview.md index a3a0ce22921a3a..0d635889607e38 100644 --- a/website/versioned_docs/version-0.51/scrollview.md +++ b/website/versioned_docs/version-0.51/scrollview.md @@ -6,17 +6,17 @@ original_id: scrollview 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 easy 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 quick to debug. Doesn't yet support other contained responders from blocking this scroll view from becoming the responder. `` vs [``](flatlist.md) - which one to use? -`ScrollView` simply renders all its react child components at once. That makes it very easy to understand and use. +`ScrollView` renders all its react child components at once, but this has a performance downside. -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. +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. +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. `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. @@ -440,6 +440,8 @@ When true, the ScrollView will try to lock to only vertical or horizontal scroll 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. - `'white'`, scroll indicator is white. This style is good against a dark background. diff --git a/website/versioned_docs/version-0.51/sectionlist.md b/website/versioned_docs/version-0.51/sectionlist.md index 763698d7f16ada..1540370b366ff7 100644 --- a/website/versioned_docs/version-0.51/sectionlist.md +++ b/website/versioned_docs/version-0.51/sectionlist.md @@ -19,7 +19,7 @@ A performant interface for rendering sectioned lists, supporting the most handy If you don't need section support and want a simpler interface, use [``](flatlist.md). -Simple Examples: +Examples: } diff --git a/website/versioned_docs/version-0.51/text.md b/website/versioned_docs/version-0.51/text.md index c4c2a2e5beea92..60e46983a31856 100644 --- a/website/versioned_docs/version-0.51/text.md +++ b/website/versioned_docs/version-0.51/text.md @@ -112,7 +112,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool); ## Containers -The `` 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 `` are no longer rectangles, but wrap when they see the end of the line. +The `` 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 `` are no longer rectangles, but wrap when they see the end of the line. ```jsx @@ -175,7 +175,7 @@ You also lose the ability to set up a default font for an entire subtree. The re ``` -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: +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: ```jsx class MyAppHeaderText extends Component { diff --git a/website/versioned_docs/version-0.51/textinput.md b/website/versioned_docs/version-0.51/textinput.md index ee08c6228ec841..ce6a7fb47dab22 100644 --- a/website/versioned_docs/version-0.51/textinput.md +++ b/website/versioned_docs/version-0.51/textinput.md @@ -6,7 +6,7 @@ original_id: textinput 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 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: +The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example: ```SnackPlayer import React, { Component } from 'react'; @@ -217,7 +217,7 @@ If `true`, caret is hidden. The default value is `false`. ### `defaultValue` -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. +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. | Type | Required | | ------ | -------- | @@ -531,7 +531,7 @@ see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more ### `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 simply 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 setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker. | Type | Required | | ------ | -------- |