Skip to content

Commit

Permalink
Fix alex lint errors for version-0.43 (facebook#1412)
Browse files Browse the repository at this point in the history
- remove version-0.43 from .alexignore
   - fix version-0.43/animated.md
   - fix version-0.43/dimensions.md
   - fix version-0.43/easing.md
   - fix version-0.43/layout-props.md
   - fix version-0.43/scrollview.md
   - fix version-0.43/textinput.md
  • Loading branch information
itsmunim authored and rickhanlonii committed Oct 19, 2019
1 parent aaac5ae commit 03017c8
Show file tree
Hide file tree
Showing 7 changed files with 21 additions and 22 deletions.
2 changes: 0 additions & 2 deletions .alexignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,4 @@ website/blog/
website/versioned_docs/version-0.16/
website/versioned_docs/version-0.18/
website/versioned_docs/version-0.22/
website/versioned_docs/version-0.43/
website/versioned_docs/version-0.46/
website/versioned_docs/version-0.53/
8 changes: 4 additions & 4 deletions website/versioned_docs/version-0.43/animated.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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 hassle-free to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and straight forward `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()`:

Expand Down Expand Up @@ -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 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.
Expand All @@ -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 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.

Expand All @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.43/dimensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ static set(dims)

This should only be called from native code by sending the didUpdateDimensions event.

@param {object} dims Simple string-keyed object of dimensions to set
@param {object} dims string-keyed object of dimensions to set

---

Expand Down
14 changes: 7 additions & 7 deletions website/versioned_docs/version-0.43/easing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 an 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 an inertial animation
- [`elastic`](easing.md#elastic) provides a spring interaction

### Standard functions

Expand Down Expand Up @@ -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.
An inertial interaction, similar to an object slowly accelerating to speed.

http://cubic-bezier.com/#.42,0,1,1

Expand Down Expand Up @@ -190,7 +190,7 @@ http://easings.net/#easeInExpo
static elastic(bounciness)
```

A simple elastic interaction, similar to a spring oscillating back and forth.
An 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.

Expand All @@ -209,7 +209,7 @@ Wolfram Plots:
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 an effect where the object animates back slightly as the animation starts.

Wolfram Plot:

Expand All @@ -223,7 +223,7 @@ Wolfram Plot:
static bounce(t)
```

Provides a simple bouncing effect.
Provides a bouncing effect.

http://easings.net/#easeInBounce

Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-0.43/layout-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -486,11 +486,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.

Expand Down
7 changes: 4 additions & 3 deletions website/versioned_docs/version-0.43/scrollview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 can be debugged by element inspector.

Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

`<ScrollView>` vs [`<FlatList>`](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. That makes it very convenient 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.
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.

Expand Down Expand Up @@ -423,6 +423,7 @@ 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`.
<!-- alex ignore retext-profanities -->
- `black`, scroll indicator is black. This style is good against a white content background.
- `white`, scroll indicator is white. This style is good against a black content background.

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.43/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 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. An example:

```SnackPlayer
import React, { Component } from 'react';
Expand Down Expand Up @@ -235,7 +235,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 |
| ---- | -------- |
Expand Down Expand Up @@ -476,7 +476,7 @@ Note that not all Text styles are supported, see [Issue#7070](https://github.com

### `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 |
| ------ | -------- |
Expand Down

0 comments on commit 03017c8

Please sign in to comment.