Skip to content

Commit

Permalink
fixed lint errors (facebook#1415)
Browse files Browse the repository at this point in the history
  • Loading branch information
isabelacmor authored and rickhanlonii committed Oct 20, 2019
1 parent 03017c8 commit 99174bc
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 8 deletions.
1 change: 0 additions & 1 deletion .alexignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,4 @@ website/blog/
# To be considerate to the reviewer, please submit each version in different PRs.
website/versioned_docs/version-0.16/
website/versioned_docs/version-0.18/
website/versioned_docs/version-0.22/
website/versioned_docs/version-0.46/
8 changes: 4 additions & 4 deletions website/versioned_docs/version-0.22/animated.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Animated
original_id: animated
---

Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain.
Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and straight-forward to build and maintain.

The simplest workflow is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates either via animations, such as `Animated.timing`, or by hooking into gestures like panning or scrolling via `Animated.event`. `Animated.Value` can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:

Expand Down Expand Up @@ -36,15 +36,15 @@ class FadeInView extends React.Component {
}
```

Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. 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.
Note that only animatable components can be animated. `View`, `Text`, and `Image` are already provided, and you can create custom ones with `createAnimatedComponent`. These particular 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.

Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.

A single `Animated.Value` can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.

For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to

1. This can easily be done by modifying `style` in the example above like so:
1. This can be done by modifying `style` in the example above like so:

```jsx
style={{
Expand All @@ -58,7 +58,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
}}>
```

Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together simply by setting the `toValue` of one animation to be another `Animated.Value`.
Animations can also be combined in complex ways using composition functions such as `sequence` and `parallel`, and can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`.

`Animated.ValueXY` is handy for 2D animations, like panning, and there are other helpful additions like `setOffset` and `getLayout` to aid with typical interaction patterns, like drag-and-drop.

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.22/textinput.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 basic example:

```
<TextInput
Expand Down Expand Up @@ -114,7 +114,7 @@ If true, the text field will blur when submitted. The default value is true for

### `defaultValue`

Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you don't 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 basic use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.

| Type | Required |
| ------ | -------- |
Expand Down Expand Up @@ -300,7 +300,7 @@ Styles

### `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 only setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.

| Type | Required |
| ------ | -------- |
Expand Down

0 comments on commit 99174bc

Please sign in to comment.