Update to reanimated 2

example/app.json

@@ -1,23 +1,15 @@
 {
-  "name": "reanimated-collapsible-helpers-example",
-  "displayName": "ReanimatedCollapsiblHelpers Example",
   "expo": {
     "name": "reanimated-collapsible-helpers-example",
     "slug": "reanimated-collapsible-helpers-example",
     "description": "Example app for reanimated-collapsible-helpers",
     "privacy": "public",
     "version": "1.0.0",
     "icon": "src/assets/icon.png",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ]
+    "assetBundlePatterns": ["**/*"]
   }
 }

example/babel.config.js

@@ -16,6 +16,7 @@ module.exports = function (api) {
           },
         },
       ],
+      'react-native-reanimated/plugin',
     ],
   };
 };

example/metro.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
 const pak = require('../package.json');
 
@@ -16,7 +16,7 @@ module.exports = {
   // We need to make sure that only one version is loaded for peerDependencies
   // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: blacklist(
+    blacklistRE: exclusionList(
       modules.map(
         (m) =>
           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)

example/package.json

@@ -14,30 +14,32 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/native": "^5.8.10",
-    "@react-navigation/stack": "^5.12.8",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/stack": "^6.3.1",
     "color": "^3.1.3",
-    "expo": "^40.0.0",
-    "expo-font": "~8.4.0",
-    "expo-splash-screen": "~0.8.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "0.63.4",
+    "expo": "^46.0.0",
+    "expo-font": "~10.2.0",
+    "expo-splash-screen": "~0.16.2",
+    "expo-status-bar": "~1.4.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
     "react-native-chart-kit": "^6.8.1",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~1.13.0",
-    "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.0",
-    "react-native-svg": "12.1.0",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-svg": "12.3.0",
     "react-native-unimodules": "~0.12.0",
-    "react-native-web": "~0.13.12"
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "~7.9.0",
+    "@babel/core": "^7.18.6",
     "@babel/runtime": "^7.9.6",
+    "@expo/webpack-config": "^0.17.0",
     "@types/color": "^3.0.1",
+    "babel-loader": "^8.2.5",
     "babel-plugin-module-resolver": "^4.0.0",
-    "babel-preset-expo": "8.3.0",
-    "expo-cli": "^3.21.12"
+    "babel-preset-expo": "~9.2.0"
   }
 }

example/src/Home.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import type { StackNavigationProp } from '@react-navigation/stack';
-
+import { StatusBar } from 'expo-status-bar';
 import { white, lightGrey, blue, lightPurple } from './colors';
 import { ICON_SIZE } from './constants';
 import type { StackParamList } from './types';
@@ -34,6 +34,7 @@ type Props = {
 export function Home({ navigation }: Props) {
   return (
     <View>
+      <StatusBar style="dark" />
       {examples.map(({ name, label, icon, color }) => (
         <TouchableOpacity key={name} onPress={() => navigation.navigate(name)}>
           <View style={styles.buttonInnerContainer}>

example/src/examples/faq/Accordion.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, StyleProp, ViewStyle, Text } from 'react-native';
-import { interpolate, Extrapolate } from 'react-native-reanimated';
+import { interpolateNode, Extrapolate } from 'react-native-reanimated';
 import {
   useCollapsible,
   AnimatedSection,
@@ -35,14 +35,14 @@ export function Accordion({ question, answer, style }: Props) {
           onLayout={onLayout}
           state={state}
           style={{
-            opacity: interpolate(animatedHeight, {
+            opacity: interpolateNode(animatedHeight, {
               inputRange: [0, height],
               outputRange: [0, 1],
               extrapolate: Extrapolate.CLAMP,
             }),
             transform: [
               {
-                translateY: interpolate(animatedHeight, {
+                translateY: interpolateNode(animatedHeight, {
                   inputRange: [0, height],
                   outputRange: [-15, -5],
                   extrapolate: Extrapolate.CLAMP,

example/src/shared/AnimatedChevron.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Animated, { Extrapolate } from 'react-native-reanimated';
 import Svg, { Path } from 'react-native-svg';
 
-const { interpolate, concat } = Animated;
+const { interpolateNode, concat } = Animated;
 
 export function AnimatedChevron({
   animatedHeight,
@@ -20,7 +20,7 @@ export function AnimatedChevron({
           transform: [
             {
               rotateZ: concat(
-                interpolate(animatedHeight, {
+                interpolateNode(animatedHeight, {
                   inputRange: [0, height],
                   outputRange: [90, -90],
                   extrapolate: Extrapolate.CLAMP,

example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}