From fdcd66efbef9e795b2506f2dd69dc35a1b42cf71 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Tue, 3 Mar 2020 06:52:04 +0530
Subject: [PATCH 1/7] Animated Fading View

---
 docs/animated.md | 167 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 159 insertions(+), 8 deletions(-)

diff --git a/docs/animated.md b/docs/animated.md
index 434efe5984f..121183633e6 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -5,18 +5,169 @@ title: Animated
 
 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 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()`:
+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()`
+
+> The animated value should not be modified directly like Javascript variables hence it is usually kept as a state variable in class components. Functional components with hooks can use `useRef` hook which returns a mutable ref object whose `current` property is initialized as the given argument and persists throughout the component lifecycle.
+
+The following example contains a simple view which will fade in & fade out based on the animated value `fadeAnim`
+
+<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')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Animated
+import React, { useRef } from "react";
+import { Animated, Text, View, StyleSheet, Button } from "react-native";
+
+export default function App() {
+  // fadeAnim will be used as the value for opacity. Initial Value: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const fadeIn = () => {
+    // Will change fadeAnim value to 1 in 5 seconds
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 5000
+    }).start();
+  };
+
+  const fadeOut = () => {
+    // Will change fadeAnim value to 0 in 5 seconds
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 5000
+    }).start();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.fadingContainer,
+          {
+            opacity: fadeAnim // Bind opacity to animated value
+          }
+        ]}
+      >
+        <Text style={styles.fadingText}>Fading View!</Text>
+      </Animated.View>
+      <View style={styles.buttonRow}>
+        <Button title="Fade In" onPress={fadeIn} />
+        <Button title="Fade Out" onPress={fadeOut} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fadingContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: "powderblue"
+  },
+  fadingText: {
+    fontSize: 28,
+    textAlign: "center",
+    margin: 10
+  },
+  buttonRow: {
+    flexDirection: "row",
+    marginVertical: 16
+  }
+});
+```
 
-```jsx
-Animated.timing(
-  // Animate value over time
-  this.state.fadeAnim, // The value to drive
-  {
-    toValue: 1, // Animate to final value of 1
+<block class="classical syntax" />
+
+```SnackPlayer name=Animated
+import React, { Component } from "react";
+import { Animated, Text, View, StyleSheet, Button } from "react-native";
+
+class App extends Component {
+  // fadeAnim will be used as the value for opacity. Initial Value: 0
+  state = {
+    fadeAnim: new Animated.Value(0)
+  };
+
+  fadeIn = () => {
+    // Will change fadeAnim value to 1 in 5 seconds
+    Animated.timing(this.state.fadeAnim, {
+      toValue: 1,
+      duration: 5000
+    }).start();
+  };
+
+  fadeOut = () => {
+    // Will change fadeAnim value to 0 in 5 seconds
+    Animated.timing(this.state.fadeAnim, {
+      toValue: 0,
+      duration: 5000
+    }).start();
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Animated.View
+          style={[
+            styles.fadingContainer,
+            {
+              opacity: this.state.fadeAnim // Bind opacity to animated value
+            }
+          ]}
+        >
+          <Text style={styles.fadingText}>Fading View!</Text>
+        </Animated.View>
+        <View style={styles.buttonRow}>
+          <Button title="Fade In" onPress={this.fadeIn} />
+          <Button title="Fade Out" onPress={this.fadeOut} />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
   },
-).start(); // Start the animation
+  fadingContainer: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: "powderblue"
+  },
+  fadingText: {
+    fontSize: 28,
+    textAlign: "center",
+    margin: 10
+  },
+  buttonRow: {
+    flexDirection: "row",
+    marginVertical: 16
+  }
+});
+
+export default App;
 ```
 
+<block class="endBlock syntax" />
+
 Refer to the [Animations](animations#animated-api) guide to see additional examples of `Animated` in action.
 
 ## Overview

From 37140ea2db3008b9c9aaf28f38965b6cf40dc803 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Tue, 3 Mar 2020 06:52:25 +0530
Subject: [PATCH 2/7] animated drag & release

---
 docs/animations.md | 131 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 129 insertions(+), 2 deletions(-)

diff --git a/docs/animations.md b/docs/animations.md
index a21edbe1a0e..e8ba5f443d2 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -16,11 +16,11 @@ The [`Animated`](animated) API is designed to concisely express a wide variety o
 For example, a container view that fades in when it is mounted may look like this:
 
 ```SnackPlayer
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Animated, Text, View } from 'react-native';
 
 const FadeInView = (props) => {
-  const [fadeAnim] = useState(new Animated.Value(0))  // Initial value for opacity: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current  // Initial value for opacity: 0
 
   React.useEffect(() => {
     Animated.timing(
@@ -237,6 +237,133 @@ onPanResponderMove={Animated.event(
 ])}
 ```
 
+#### Example
+
+<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')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Animated
+import React, { useRef } from "react";
+import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";
+
+export default function App() {
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([
+        null,
+        { dx: pan.x, dy: pan.y }
+      ]),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
+      }
+    })
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag & Release this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{ translateX: pan.x }, { translateY: pan.y }]
+        }}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: "bold"
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: "blue",
+    borderRadius: 5
+  }
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Animated
+import React, { Component } from "react";
+import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";
+
+export default class App extends Component {
+  pan = new Animated.ValueXY();
+  panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderMove: Animated.event([
+      null,
+      { dx: this.pan.x, dy: this.pan.y }
+    ]),
+    onPanResponderRelease: () => {
+      Animated.spring(this.pan, { toValue: { x: 0, y: 0 } }).start();
+    }
+  });
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.titleText}>Drag & Release this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
+          }}
+          {...this.panResponder.panHandlers}
+        >
+          <View style={styles.box} />
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: "bold"
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: "blue",
+    borderRadius: 5
+  }
+});
+```
+
+<block class="endBlock syntax" />
+
 ### Responding to the current animation value
 
 You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:

From cd472019820fc08a80fda7076a0e40d20c68e227 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Tue, 3 Mar 2020 06:52:44 +0530
Subject: [PATCH 3/7] animated dragging with panresponder

---
 docs/panresponder.md | 162 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 151 insertions(+), 11 deletions(-)

diff --git a/docs/panresponder.md b/docs/panresponder.md
index f372ae10ff4..c3e7160d4d6 100644
--- a/docs/panresponder.md
+++ b/docs/panresponder.md
@@ -42,10 +42,9 @@ A `gestureState` object has the following:
 ### Basic Usage
 
 ```jsx
-class ExampleComponent extends Component {
-  constructor(props) {
-    super(props);
-    this._panResponder = PanResponder.create({
+const ExampleComponent = () => {
+  const panResponder = React.useRef(
+    PanResponder.create({
       // Ask to be the responder:
       onStartShouldSetPanResponder: (evt, gestureState) => true,
       onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
@@ -76,18 +75,159 @@ class ExampleComponent extends Component {
         // responder. Returns true by default. Is currently only supported on android.
         return true;
       },
-    });
+    }),
+  ).current;
+
+  return <View {...panResponder.panHandlers} />;
+};
+```
+
+### Working Example
+
+`PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
+
+<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')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=PanResponder
+import React, { useRef } from "react";
+import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";
+
+export default function App() {
+
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.setOffset({
+          x: pan.x._value,
+          y: pan.y._value
+        });
+      },
+      onPanResponderMove: Animated.event(
+        [
+          null,
+          { dx: pan.x, dy: pan.y }
+        ]
+      ),
+      onPanResponderRelease: () => {
+        pan.flattenOffset();
+      }
+    })
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.titleText}>Drag this box!</Text>
+      <Animated.View
+        style={{
+          transform: [{ translateX: pan.x }, { translateY: pan.y }]
+        }}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.box} />
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: "bold"
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: "blue",
+    borderRadius: 5
   }
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=PanResponder
+import React, { Component } from "react";
+import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";
+
+export default class App extends Component {
+  pan = new Animated.ValueXY();
+  panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      this.pan.setOffset({
+        x: this.pan.x._value,
+        y: this.pan.y._value
+      });
+    },
+    onPanResponderMove: Animated.event([
+      null,
+      { dx: this.pan.x, dy: this.pan.y }
+    ]),
+    onPanResponderRelease: () => {
+      this.pan.flattenOffset();
+    }
+  });
 
   render() {
-    return <View {...this._panResponder.panHandlers} />;
+    return (
+      <View style={styles.container}>
+        <Text style={styles.titleText}>Drag this box!</Text>
+        <Animated.View
+          style={{
+            transform: [{ translateX: this.pan.x }, { translateY: this.pan.y }]
+          }}
+          {...this.panResponder.panHandlers}
+        >
+          <View style={styles.box} />
+        </Animated.View>
+      </View>
+    );
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  titleText: {
+    fontSize: 14,
+    lineHeight: 24,
+    fontWeight: "bold"
+  },
+  box: {
+    height: 150,
+    width: 150,
+    backgroundColor: "blue",
+    borderRadius: 5
+  }
+});
 ```
 
-### Working Example
+<block class="endBlock syntax" />
 
-To see it in action, try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js)
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js)
 
 ---
 
@@ -103,9 +243,9 @@ static create(config)
 
 **Parameters:**
 
-| Name      | Type     | Required | Description  |
-| ------    | ------   | -------- | ------------ |
-| config    | object   | Yes      | Refer below  | 
+| Name   | Type   | Required | Description |
+| ------ | ------ | -------- | ----------- |
+| config | object | Yes      | Refer below |
 
 The config object provides enhanced versions of all of the responder callbacks that provide not only the typical `ResponderSyntheticEvent`, but also the `PanResponder` gesture state, by replacing the word `Responder` with `PanResponder` in each of the typical `onResponder*` callbacks. For example, the `config` object would look like:
 

From 4e2c1253cfd66609f5a03b2d01b12fc72b3f4750 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Tue, 3 Mar 2020 07:38:13 +0530
Subject: [PATCH 4/7] animated carousel example

---
 docs/animations.md | 316 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 314 insertions(+), 2 deletions(-)

diff --git a/docs/animations.md b/docs/animations.md
index e8ba5f443d2..a44a61a4a31 100644
--- a/docs/animations.md
+++ b/docs/animations.md
@@ -226,6 +226,318 @@ For example, when working with horizontal scrolling gestures, you would do the f
  )}
 ```
 
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+<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')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import React, { useRef } from "react";
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  useWindowDimensions
+} from "react-native";
+
+const images = [
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4"
+];
+
+export default function App() {
+  const scrollX = useRef(new Animated.Value(0)).current;
+
+  const { width: windowWidth } = useWindowDimensions();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.scrollContainer}>
+        <ScrollView
+          horizontal={true}
+          style={styles.scrollViewStyle}
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onScroll={Animated.event([
+            {
+              nativeEvent: {
+                contentOffset: {
+                  x: scrollX
+                }
+              }
+            }
+          ])}
+          scrollEventThrottle={1}
+        >
+          {images.map((image, imageIndex) => {
+            return (
+              <View
+                style={{ width: windowWidth, height: 250 }}
+                key={imageIndex}
+              >
+                <ImageBackground source={{ uri: image }} style={styles.card}>
+                  <View style={styles.textContainer}>
+                    <Text style={styles.infoText}>
+                      {"Image - " + imageIndex}
+                    </Text>
+                  </View>
+                </ImageBackground>
+              </View>
+            );
+          })}
+        </ScrollView>
+        <View style={styles.indicatorContainer}>
+          {images.map((image, imageIndex) => {
+            const width = scrollX.interpolate({
+              inputRange: [
+                windowWidth * (imageIndex - 1),
+                windowWidth * imageIndex,
+                windowWidth * (imageIndex + 1)
+              ],
+              outputRange: [8, 16, 8],
+              extrapolate: "clamp"
+            });
+            return (
+              <Animated.View
+                key={imageIndex}
+                style={[styles.normalDot, { width }]}
+              />
+            );
+          })}
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  textContainer: {
+    backgroundColor: "rgba(0,0,0, 0.7)",
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5
+  },
+  infoText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold"
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: "silver",
+    marginHorizontal: 4
+  },
+  indicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import React, { Component } from "react";
+import {
+  SafeAreaView,
+  ScrollView,
+  Text,
+  StyleSheet,
+  View,
+  ImageBackground,
+  Animated,
+  Dimensions
+} from "react-native";
+
+const images = [
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4",
+  "https://images.unsplash.com/photo-1556740749-887f6717d7e4"
+];
+
+const window = Dimensions.get("window");
+
+export default class App extends Component {
+  scrollX = new Animated.Value(0);
+
+  state = {
+    dimensions: {
+      window
+    }
+  };
+
+  onDimensionsChange = ({ window }) => {
+    this.setState({ dimensions: { window } });
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.onDimensionsChange);
+  }
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.onDimensionsChange);
+  }
+
+  render() {
+    const windowWidth = this.state.dimensions.window.width;
+
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.scrollContainer}>
+          <ScrollView
+            horizontal={true}
+            style={styles.scrollViewStyle}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onScroll={Animated.event([
+              {
+                nativeEvent: {
+                  contentOffset: {
+                    x: this.scrollX
+                  }
+                }
+              }
+            ])}
+            scrollEventThrottle={1}
+          >
+            {images.map((image, imageIndex) => {
+              return (
+                <View
+                  style={{
+                    width: windowWidth,
+                    height: 250
+                  }}
+                  key={imageIndex}
+                >
+                  <ImageBackground source={{ uri: image }} style={styles.card}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.infoText}>
+                        {"Image - " + imageIndex}
+                      </Text>
+                    </View>
+                  </ImageBackground>
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={styles.indicatorContainer}>
+            {images.map((image, imageIndex) => {
+              const width = this.scrollX.interpolate({
+                inputRange: [
+                  windowWidth * (imageIndex - 1),
+                  windowWidth * imageIndex,
+                  windowWidth * (imageIndex + 1)
+                ],
+                outputRange: [8, 16, 8],
+                extrapolate: "clamp"
+              });
+              return (
+                <Animated.View
+                  key={imageIndex}
+                  style={[styles.normalDot, { width }]}
+                />
+              );
+            })}
+          </View>
+        </View>
+      </SafeAreaView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  scrollContainer: {
+    height: 300,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  card: {
+    flex: 1,
+    marginVertical: 4,
+    marginHorizontal: 16,
+    borderRadius: 5,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  textContainer: {
+    backgroundColor: "rgba(0,0,0, 0.7)",
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    borderRadius: 5
+  },
+  infoText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold"
+  },
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: "silver",
+    marginHorizontal: 4
+  },
+  indicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+```
+
+<block class="endBlock syntax" />
+
 When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
 
 ```jsx
@@ -237,7 +549,7 @@ onPanResponderMove={Animated.event(
 ])}
 ```
 
-#### Example
+#### PanResponder with Animated Event Example
 
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
@@ -452,7 +764,7 @@ UIManager.setLayoutAnimationEnabledExperimental &&
   UIManager.setLayoutAnimationEnabledExperimental(true);
 ```
 
-```SnackPlayer
+```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
 import React from 'react';
 import {
   NativeModules,

From c4c7411503f7367e0817bf94dad08fb49d2c8f17 Mon Sep 17 00:00:00 2001
From: DaniAkash <s.daniakash@gmail.com>
Date: Tue, 3 Mar 2020 07:52:22 +0530
Subject: [PATCH 5/7] fix lint issues

---
 docs/animated.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/animated.md b/docs/animated.md
index 121183633e6..03dd692b787 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -9,7 +9,7 @@ The most basic workflow for creating an animation is to create an `Animated.Valu
 
 > The animated value should not be modified directly like Javascript variables hence it is usually kept as a state variable in class components. Functional components with hooks can use `useRef` hook which returns a mutable ref object whose `current` property is initialized as the given argument and persists throughout the component lifecycle.
 
-The following example contains a simple view which will fade in & fade out based on the animated value `fadeAnim`
+The following example contains a `View` which will fade in & fade out based on the animated value `fadeAnim`
 
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">

From 7e36e6e31cbd3d70c1d8e3d2e0160b8f670c6fd4 Mon Sep 17 00:00:00 2001
From: R Nabors <rachelnabors@users.noreply.github.com>
Date: Wed, 4 Mar 2020 17:30:16 +0000
Subject: [PATCH 6/7] Copy tweaks and speeding up animation duration

---
 docs/animated.md | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/docs/animated.md b/docs/animated.md
index 03dd692b787..f685e5d4671 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -3,13 +3,36 @@ id: animated
 title: Animated
 ---
 
-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 `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
 
-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()`
+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()`.
 
-> The animated value should not be modified directly like Javascript variables hence it is usually kept as a state variable in class components. Functional components with hooks can use `useRef` hook which returns a mutable ref object whose `current` property is initialized as the given argument and persists throughout the component lifecycle.
 
-The following example contains a `View` which will fade in & fade out based on the animated value `fadeAnim`
+<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')">
+      Using with Function Components
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Using with Class Components
+    </li>
+  </ul>
+</div>
+
+<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. 
+
+<block class="classical syntax" />
+
+> Don't modify the animated value directly. It is usually stored as a [state variable](intro-react#state) in class components.
+
+<block class="endBlock syntax" />
+
+
+## Example
+
+The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
@@ -36,7 +59,7 @@ export default function App() {
     // Will change fadeAnim value to 1 in 5 seconds
     Animated.timing(fadeAnim, {
       toValue: 1,
-      duration: 5000
+      duration: 2000
     }).start();
   };
 
@@ -44,7 +67,7 @@ export default function App() {
     // Will change fadeAnim value to 0 in 5 seconds
     Animated.timing(fadeAnim, {
       toValue: 0,
-      duration: 5000
+      duration: 2000
     }).start();
   };
 
@@ -107,7 +130,7 @@ class App extends Component {
     // Will change fadeAnim value to 1 in 5 seconds
     Animated.timing(this.state.fadeAnim, {
       toValue: 1,
-      duration: 5000
+      duration: 2000
     }).start();
   };
 
@@ -115,7 +138,7 @@ class App extends Component {
     // Will change fadeAnim value to 0 in 5 seconds
     Animated.timing(this.state.fadeAnim, {
       toValue: 0,
-      duration: 5000
+      duration: 2000
     }).start();
   };
 

From b2867fdc78196aafc88173666dccab6027dada91 Mon Sep 17 00:00:00 2001
From: R Nabors <rachelnabors@users.noreply.github.com>
Date: Wed, 4 Mar 2020 17:46:02 +0000
Subject: [PATCH 7/7] Tweaking page hierarchy

---
 docs/panresponder.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/panresponder.md b/docs/panresponder.md
index c3e7160d4d6..565f9f82c26 100644
--- a/docs/panresponder.md
+++ b/docs/panresponder.md
@@ -39,7 +39,7 @@ A `gestureState` object has the following:
 - `vy` - current velocity of the gesture
 - `numberActiveTouches` - Number of touches currently on screen
 
-### Basic Usage
+## Usage Pattern
 
 ```jsx
 const ExampleComponent = () => {
@@ -82,7 +82,7 @@ const ExampleComponent = () => {
 };
 ```
 
-### Working Example
+## Example
 
 `PanResponder` works with `Animated` API to help build complex gestures in the UI. The following example contains an animated `View` component which can be dragged freely across the screen
 
@@ -227,7 +227,7 @@ const styles = StyleSheet.create({
 
 <block class="endBlock syntax" />
 
-Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js)
+Try the [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js).
 
 ---