From cf4801a6690c4dc375cc426e0badb8222495bd34 Mon Sep 17 00:00:00 2001
From: Agastya Darma Laksana <gedeagas22@gmail.com>
Date: Fri, 6 Mar 2020 12:01:54 +0700
Subject: [PATCH 1/2] feat: Adding start on animated docs

---
 docs/animated.md | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/docs/animated.md b/docs/animated.md
index f685e5d4671..ae2f1be72af 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -7,7 +7,6 @@ The `Animated` library is designed to make animations fluid, powerful, and painl
 
 The core 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()`.
 
-
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
@@ -21,7 +20,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
 
 <block class="functional syntax" />
 
-> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle. 
+> Don't modify the animated value directly. You can use the [`useRef` Hook](https://reactjs.org/docs/hooks-reference.html#useref) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
 
 <block class="classical syntax" />
 
@@ -29,7 +28,6 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
 
 <block class="endBlock syntax" />
 
-
 ## Example
 
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
@@ -216,6 +214,12 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
 
 Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
 
+```jsx
+Animated.timing({}).start(({finished}) => {
+  /* completion callback */
+});
+```
+
 ### Using the native driver
 
 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.
@@ -518,7 +522,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 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.aa
 
 ---
 
@@ -528,6 +532,30 @@ Advanced imperative API for snooping on animated events that are passed in throu
 static unforkEvent(event, listener)
 ```
 
+---
+
+### `start()`
+
+```jsx
+static start([callback]: ?(result?: {finished: boolean}) => void)
+```
+
+Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.
+
+**Parameters:**
+
+| Name     | Type                            | Required | Description                                                                                                                                                     |
+| -------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| callback | ?(result?: {finished: boolean}) | No       | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |
+
+Start example with callback:
+
+```jsx
+Animated.timing({}).start(({finished}) => {
+  /* completion callback */
+});
+```
+
 ## Properties
 
 ### `Value`

From 633c45e39ef5a3c6b583314cb94c70cc55fffc73 Mon Sep 17 00:00:00 2001
From: Agastya Darma Laksana <gedeagas22@gmail.com>
Date: Sat, 7 Mar 2020 19:43:12 +0700
Subject: [PATCH 2/2] feat: adding stop() and reset()

---
 docs/animated.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/docs/animated.md b/docs/animated.md
index ae2f1be72af..b2e8a37d3f5 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -556,6 +556,26 @@ Animated.timing({}).start(({finished}) => {
 });
 ```
 
+---
+
+### `stop()`
+
+```jsx
+static stop()
+```
+
+Stops any running animation.
+
+---
+
+### `reset()`
+
+```jsx
+static reset()
+```
+
+Stops any running animation and resets the value to its original.
+
 ## Properties
 
 ### `Value`