Update

code-examples/introduction-to-react-native-reanimated/Header.js

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { Text } from "react-native"
+import Animated from "react-native-reanimated"
+
+const HEADER_HEIGHT = 60
+const { diffClamp, interpolate } = Animated
+
+export const Header = props => {
+  const diffClampY = diffClamp(props.y, 0, HEADER_HEIGHT)
+  const translateY = interpolate(diffClampY, {
+    inputRange: [0, HEADER_HEIGHT],
+    outputRange: [0, -HEADER_HEIGHT],
+  })
+  return (
+    <Animated.View
+      style={{
+        height: HEADER_HEIGHT,
+        position: "absolute",
+        top: 0,
+        width: "100%",
+        zIndex: 2,
+        backgroundColor: "#ffb74d",
+        justifyContent: "center",
+        alignItems: "center",
+        transform: [{ translateY: translateY }],
+      }}
+    >
+      <Text>Header</Text>
+    </Animated.View>
+  )
+}
+

code-examples/introduction-to-react-native-reanimated/List.js

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Image } from "react-native"
+import { onScroll } from "react-native-redash"
+import Animated from "react-native-reanimated"
+
+export const List = props => {
+  return (
+    // Use onScroll to update the y value
+    <Animated.ScrollView
+      onScroll={onScroll({ y: props.y })}
+      scrollEventThrottle={16}
+      contentContainerStyle={{ paddingTop: 50 }}
+    >
+      {Array.from({ length: 10 }, (v, k) => (
+        <Image
+          style={{ width: "100%", height: 200, marginTop: 50 }}
+          key={k + ""}
+          source={{ uri: "https://picsum.photos/200/300" }}
+        />
+      ))}
+    </Animated.ScrollView>
+  )
+}

code-examples/introduction-to-react-native-reanimated/Parent.js

@@ -0,0 +1,17 @@
+import * as React from "react"
+import { View } from "react-native"
+import { Header } from "./Header"
+import { List } from "./List"
+import Animated from "react-native-reanimated"
+
+export const Parent = () => {
+  // Create an "y" animated value and pass it down to the children
+  const y = new Animated.Value(0)
+
+  return (
+    <View>
+      <Header y={y} />
+      <List y={y} />
+    </View>
+  )
+}