Skip to content

Commit

Permalink
Fix lint rules in version 0.60 (facebook#1346)
Browse files Browse the repository at this point in the history
  • Loading branch information
bolah2009 authored and rickhanlonii committed Oct 15, 2019
1 parent 90a26df commit 718866a
Show file tree
Hide file tree
Showing 26 changed files with 57 additions and 60 deletions.
1 change: 0 additions & 1 deletion .alexignore
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,3 @@ website/versioned_docs/version-0.56/
website/versioned_docs/version-0.57/
website/versioned_docs/version-0.58/
website/versioned_docs/version-0.59/
website/versioned_docs/version-0.60/
16 changes: 8 additions & 8 deletions website/versioned_docs/version-0.60/animated.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(
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 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.
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 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.

Expand All @@ -73,7 +73,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 Expand Up @@ -170,14 +170,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.
Expand Down Expand Up @@ -345,7 +345,7 @@ Config is an object that may have the following options:
static forkEvent(event, listener)
```
Advanced imperative API for snooping on animated events that are passed in through props. It permits to add a new javascript listener to an existing `AnimatedEvent`. If `animatedEvent` is a simple javascript listener, it will merge the 2 listeners into a single one, and if `animatedEvent` is null/undefined, it will assign the javascript listener directly. Use values directly where possible.
Advanced imperative API for snooping on animated events that are passed in through props. It permits to add a new javascript listener to an existing `AnimatedEvent`. If `animatedEvent` is a javascript listener, it will merge the 2 listeners into a single one, and if `animatedEvent` is null/undefined, it will assign the javascript listener directly. Use values directly where possible.
---
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/appstate.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ addEventListener(type, handler);

Add a handler to AppState changes by listening to the `change` event type and providing the handler

TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate `addEventListener` and `removeEventListener` and just use `addListener` and `listener.remove()` directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).
TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate `addEventListener` and `removeEventListener` and use `addListener` and `listener.remove()` directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).

---

Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-0.60/asyncstorage.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ original_id: asyncstorage

> **Deprecated.** Use [react-native-community/react-native-async-storage](https://github.com/react-native-community/react-native-async-storage) instead.
`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.
`AsyncStorage` is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

It is recommended that you use an abstraction on top of `AsyncStorage` instead of `AsyncStorage` directly for anything more than light usage since it operates globally.

On iOS, `AsyncStorage` is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, `AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite based on what is available.

The `AsyncStorage` JavaScript code is a simple facade that provides a clear JavaScript API, real `Error` objects, and simple non-multi functions. Each method in the API returns a `Promise` object.
The `AsyncStorage` JavaScript code is a facade that provides a clear JavaScript API, real `Error` objects, and non-multi functions. Each method in the API returns a `Promise` object.

Importing the `AsyncStorage` library:

Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-0.60/communication-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ In [Integrating with Existing Apps guide](integration-with-existing-apps.md) and

React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.

The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.

## Properties

Expand Down Expand Up @@ -75,7 +75,7 @@ There is no way to update only a few properties at a time. We suggest that you b
### Passing properties from React Native to native

The problem exposing properties of native components is covered in detail in [this article](native-components-android.md#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation). In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp`, then just use them in React Native as if the component was an ordinary React Native component.
The problem exposing properties of native components is covered in detail in [this article](native-components-android.md#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation). In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp`, then use them in React Native as if the component was an ordinary React Native component.

### Limits of properties

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/datepickerios.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ By default, the date picker will use the device's timezone. With this parameter,

### `initialDate`

Provides an initial value that will change when the user starts selecting a date. It is useful for simple use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth.
Provides an initial value that will change when the user starts selecting a date. It is useful for use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth.

| Type | Required |
| ---- | -------- |
Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/dimensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ 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
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/drawerlayoutandroid.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ Function called when the drawer state has changed. The drawer can be in 3 states
### `drawerBackgroundColor`
Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
Specifies the background color of the drawer. The default value is `white`. If you want to set the opacity of the drawer, use rgba. Example:
```jsx
return <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />;
Expand Down
14 changes: 7 additions & 7 deletions website/versioned_docs/version-0.60/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 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

Expand Down Expand Up @@ -86,7 +86,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

Expand Down Expand Up @@ -170,7 +170,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.

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

---

Expand All @@ -194,7 +194,7 @@ Use with `Animated.parallel()` to create a simple effect where the object animat
static bounce(t)
```

Provides a simple bouncing effect.
Provides a basic bouncing effect.

http://easings.net/#easeInBounce

Expand Down
6 changes: 3 additions & 3 deletions website/versioned_docs/version-0.60/flatlist.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -237,7 +237,7 @@ Example usage:

### `data`

For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying [`VirtualizedList`](virtualizedlist.md) directly.
For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying [`VirtualizedList`](virtualizedlist.md) directly.

| Type | Required |
| ----- | -------- |
Expand Down Expand Up @@ -331,7 +331,7 @@ A marker property for telling the list to re-render (since it implements `PureCo
(data, index) => {length: number, offset: number, index: number}
```

`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is both efficient and easy to use if you have fixed size items, for example:
`getItemLayout` is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. `getItemLayout` is efficient if you have fixed size items, for example:

```jsx
getItemLayout={(data, index) => (
Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-0.60/hermes.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ original_id: hermes
<img width="300" height="300" style="float: right; margin: -30px 4px 0;" src="/react-native/docs/assets/HermesLogo.svg"/>
</a>

[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.
[Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an **opt-in** React Native feature, and this guide explains how to enable it.

First, ensure you're using at least version 0.60.4 of React Native.

Expand Down Expand Up @@ -48,7 +48,7 @@ $ react-native run-android

## Confirming Hermes is in use

If you've just created a new app from scratch you should see if Hermes is enabled in the welcome view:
If you've recently created a new app from scratch you should see if Hermes is enabled in the welcome view:

![Where to find JS engine status in AwesomeProject](/react-native/docs/assets/HermesApp.jpg)

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/imagebackground.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ original_id: imagebackground

A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.

You might not want to use `<ImageBackground>` in some cases, since the implementation is very simple. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.
You might not want to use `<ImageBackground>` in some cases, since the implementation is basic. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.

Note that you must specify some width and height style attributes.

Expand Down
2 changes: 1 addition & 1 deletion website/versioned_docs/version-0.60/inputaccessoryview.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ original_id: inputaccessoryview

A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.

To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A simple example:
To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:

```SnackPlayer name=InputAccessoryView&platform=ios
import React, { Component } from 'react';
Expand Down
Loading

0 comments on commit 718866a

Please sign in to comment.