Make /app good for for 0.74

app/package.json

@@ -12,23 +12,22 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
-    "@react-native-async-storage/async-storage": "^1.19.3",
-    "@react-native-community/slider": "^4.4.3",
-    "@react-native-masked-view/masked-view": "^0.3.0",
+    "@react-native-async-storage/async-storage": "^1.22.3",
+    "@react-native-community/slider": "^4.5.0",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-picker/picker": "^2.5.1",
-    "@react-navigation/elements": "^1.3.19",
-    "@react-navigation/native": "^6.1.8",
-    "@react-navigation/native-stack": "^6.9.14",
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
     "@react-navigation/stack": "^6.3.18",
     "d3-shape": "^3.2.0",
     "react-dom": "18.0.0",
     "react-native-box2d": "^0.2.5",
-    "react-native-gesture-handler": "^2.13.2",
-    "react-native-pager-view": "^5.4.25",
+    "react-native-gesture-handler": "^2.16.0-rc.0",
+    "react-native-pager-view": "^6.2.3",
     "react-native-reanimated": "link:../",
-    "react-native-safe-area-context": "^4.7.2",
-    "react-native-screens": "^3.27.0",
-    "react-native-svg": "^13.14.0",
+    "react-native-safe-area-context": "4.10.0-rc.0",
+    "react-native-screens": "git+https://github.com/software-mansion/react-native-screens.git#ddf267a4ce157dc60fa0bb94e8096c4d99f7e878",
+    "react-native-svg": "^15.2.0-rc.0",
     "react-native-web": "~0.18.12"
   },
   "devDependencies": {

app/src/App.tsx

@@ -39,6 +39,10 @@ import { EXAMPLES } from './examples';
 import React from 'react';
 import { useReducedMotion } from 'react-native-reanimated';
 
+function isFabric(): boolean {
+  return !!(global as Record<string, unknown>)._IS_FABRIC;
+}
+
 type RootStackParamList = { [P in keyof typeof EXAMPLES]: undefined } & {
   Home: undefined;
 };
@@ -91,6 +95,7 @@ function HomeScreen({ navigation }: HomeScreenProps) {
           icon={EXAMPLES[name].icon}
           title={EXAMPLES[name].title}
           onPress={() => navigation.navigate(name)}
+          missingOnFabric={EXAMPLES[name].missingOnFabric}
         />
       )}
       renderScrollComponent={(props) => <ScrollView {...props} />}
@@ -104,20 +109,28 @@ interface ItemProps {
   icon?: string;
   title: string;
   onPress: () => void;
+  missingOnFabric?: boolean;
 }
 
-function Item({ icon, title, onPress }: ItemProps) {
+function Item({ icon, title, onPress, missingOnFabric }: ItemProps) {
+  const isDisabled = missingOnFabric && isFabric();
   if (Platform.OS === 'macos') {
     return (
-      <Pressable style={styles.button} onPress={onPress}>
+      <Pressable
+        style={[styles.button, isDisabled && styles.disabledButton]}
+        onPress={onPress}
+        disabled={isDisabled}>
         {icon && <Text style={styles.title}>{icon + '  '}</Text>}
         <Text style={styles.title}>{title}</Text>
       </Pressable>
     );
   }
 
   return (
-    <RectButton style={styles.button} onPress={onPress}>
+    <RectButton
+      style={[styles.button, isDisabled && styles.disabledButton]}
+      onPress={onPress}
+      enabled={!isDisabled}>
       {icon && <Text style={styles.title}>{icon + '  '}</Text>}
       <Text style={styles.title}>{title}</Text>
     </RectButton>
@@ -261,6 +274,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'white',
   },
+  disabledButton: {
+    backgroundColor: 'grey',
+    opacity: 0.5,
+  },
   title: {
     fontSize: 16,
     color: 'black',

app/src/examples/AboutExample.tsx

@@ -68,6 +68,10 @@ export default function AboutExample() {
             <Text style={styles.bold}>RN version:</Text>{' '}
             {getReactNativeVersion()}
           </Text>
+          <Text style={styles.text}>
+            <Text style={styles.bold}>Bridgeless enabled:</Text>{' '}
+            {(global as any)._IS_BRIDGELESS ? 'yes' : 'no'}
+          </Text>
         </>
       )}
     </View>

app/src/examples/CustomHandler/PagerExample.tsx

@@ -5,7 +5,7 @@ import Animated, {
   useDerivedValue,
   useSharedValue,
 } from 'react-native-reanimated';
-import PagerView, { PageScrollState } from 'react-native-pager-view';
+import PagerView from 'react-native-pager-view';
 
 import { AnimatedText } from './AnimatedText';
 import { Pagination } from './Pagination';
@@ -27,7 +27,7 @@ const SLIDES = [
 
 export default function PagerExample() {
   const scrollPosition = useSharedValue(0);
-  const scrollState = useSharedValue<PageScrollState>('idle');
+  const scrollState = useSharedValue<'idle' | 'dragging' | 'settling'>('idle');
   const currentPage = useSharedValue(0);
   const stringifiedCurrentPage = useDerivedValue(() => {
     return `${currentPage.value + 1}`;

app/src/examples/CustomHandler/useAnimatedPagerHandler.ts

@@ -1,6 +1,5 @@
-import { NativeSyntheticEvent } from 'react-native';
 import {
-  PageScrollStateChangedEvent,
+  PageScrollStateChangedNativeEvent,
   PagerViewOnPageScrollEvent,
   PagerViewOnPageSelectedEvent,
 } from 'react-native-pager-view';
@@ -42,18 +41,18 @@ export function useAnimatedPagerScrollStateHandler<
 >(
   handlers: {
     onPageScrollStateChanged: (
-      e: ReanimatedEvent<PageScrollStateChangedEvent>,
+      e: ReanimatedEvent<PageScrollStateChangedNativeEvent>,
       context: TContext
     ) => void;
   },
   dependencies?: Array<unknown>
-): (e: NativeSyntheticEvent<PageScrollStateChangedEvent>) => void {
+): (e: PageScrollStateChangedNativeEvent) => void {
   const { context, doDependenciesDiffer } = useHandler<
-    PageScrollStateChangedEvent,
+    PageScrollStateChangedNativeEvent,
     TContext
   >(handlers, dependencies);
 
-  return useEvent<NativeSyntheticEvent<PageScrollStateChangedEvent>>(
+  return useEvent<PageScrollStateChangedNativeEvent>(
     (event) => {
       'worklet';
       const { onPageScrollStateChanged } = handlers;

app/src/examples/LiquidSwipe/LiquidSwipe.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import Animated, {
   useSharedValue,
-  useAnimatedGestureHandler,
   cancelAnimation,
   interpolate,
   Extrapolation,
   withSpring,
 } from 'react-native-reanimated';
 import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import Weave from './Weave';
 import { initialSideWidth, initialWaveCenter } from './WeaveHelpers';
@@ -34,26 +34,21 @@ export default function LiquidSwipe() {
   const isBack = useSharedValue(false);
   const centerY = useSharedValue(initialWaveCenter);
   const progress = useSharedValue(0);
+  const ctxDragX = useSharedValue(0);
+  const ctxStartY = useSharedValue(0);
 
   const maxDist = width - initialSideWidth;
 
-  type AnimatedGHContext = {
-    dragX: number;
-    startY: number;
-  };
-  const handler = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    AnimatedGHContext
-  >({
-    onStart: (event, ctx) => {
+  const gesture = Gesture.Pan()
+    .onStart((event) => {
       // stop animating progress, this will also place "isBack" value in the
       // final state (we update isBack in progress animation callback)
       cancelAnimation(progress);
-      ctx.dragX = 0;
-      ctx.startY = isBack.value ? event.y : centerY.value;
-    },
-    onActive: (event, ctx) => {
-      centerY.value = ctx.startY + event.translationY;
+      ctxDragX.value = 0;
+      ctxStartY.value = isBack.value ? event.y : centerY.value;
+    })
+    .onChange((event) => {
+      centerY.value = ctxStartY.value + event.translationY;
       if (isBack.value) {
         progress.value = interpolate(
           event.translationX,
@@ -69,29 +64,26 @@ export default function LiquidSwipe() {
           Extrapolation.CLAMP
         );
       }
-    },
-    onEnd: () => {
+    })
+    .onEnd(() => {
       const threshold = isBack.value ? 0.5 : 0.2;
       const goBack = progress.value > threshold;
       centerY.value = withSpring(initialWaveCenter);
       progress.value = withSpring(goBack ? 1 : 0, {}, () => {
         isBack.value = goBack;
       });
-    },
-  });
+    });
 
   return (
-    <View style={styles.container}>
+    <GestureHandlerRootView style={styles.container}>
       <Content
         backgroundColor="white"
         source={assets[0]}
         title1="Online"
         title2="Gambling"
         color="black"
       />
-      <PanGestureHandler
-        onGestureEvent={handler}
-        onHandlerStateChange={handler}>
+      <GestureDetector gesture={gesture}>
         <Animated.View style={StyleSheet.absoluteFill}>
           <Weave progress={progress} centerY={centerY} isBack={isBack}>
             <Content
@@ -104,7 +96,7 @@ export default function LiquidSwipe() {
           </Weave>
           <Button y={centerY} progress={progress} />
         </Animated.View>
-      </PanGestureHandler>
-    </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
   );
 }

app/src/examples/ScreenStackHeaderConfigBackgroundColorExample.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 
 const AnimatedScreenStackHeaderConfig = Animated.createAnimatedComponent(
   Platform.OS === 'web'
-    ? React.forwardRef(ScreenStackHeaderConfig)
+    ? React.forwardRef(ScreenStackHeaderConfig as any)
     : ScreenStackHeaderConfig
 );
 Animated.addWhitelistedNativeProps({ title: true });

app/src/examples/SharedElementTransitions/LayoutAnimation.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, View, StyleSheet } from 'react-native';
+import type { ButtonProps } from 'react-native';
 import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
@@ -9,7 +10,11 @@ import Animated, { SlideInLeft, SlideOutLeft } from 'react-native-reanimated';
 
 const photo = require('./assets/image.jpg');
 const Stack = createNativeStackNavigator();
-const AnimatedButton = Animated.createAnimatedComponent(Button);
+const AnimatedButton = Animated.createAnimatedComponent(
+  React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<Button>) => (
+    <Button {...props} ref={ref} />
+  ))
+);
 
 function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (

app/src/examples/SharedElementTransitions/ManyTags.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, View, Text, StyleSheet } from 'react-native';
+import type { ButtonProps } from 'react-native';
 import { ParamListBase } from '@react-navigation/native';
 import {
   createNativeStackNavigator,
@@ -9,7 +10,11 @@ import Animated from 'react-native-reanimated';
 
 const photo = require('./assets/image.jpg');
 const Stack = createNativeStackNavigator();
-const AnimatedButton = Animated.createAnimatedComponent(Button);
+const AnimatedButton = Animated.createAnimatedComponent(
+  React.forwardRef((props: ButtonProps, ref: React.ForwardedRef<Button>) => (
+    <Button {...props} ref={ref} />
+  ))
+);
 
 function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
   return (