diff --git a/app/package.json b/app/package.json index 7e35913280b4..9d2c5de205c0 100644 --- a/app/package.json +++ b/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": "git+https://github.com/software-mansion/react-native-gesture-handler.git#6808ca355af71ca2f1f6653b50e389c8b564c8ba", + "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.1", + "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": { diff --git a/app/src/App.tsx b/app/src/App.tsx index 544c6b370054..f82eca92b24a 100644 --- a/app/src/App.tsx +++ b/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)._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) => } @@ -104,12 +109,17 @@ 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 ( - + {icon && {icon + ' '}} {title} @@ -117,7 +127,10 @@ function Item({ icon, title, onPress }: ItemProps) { } return ( - + {icon && {icon + ' '}} {title} @@ -261,6 +274,10 @@ const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: 'white', }, + disabledButton: { + backgroundColor: 'grey', + opacity: 0.5, + }, title: { fontSize: 16, color: 'black', diff --git a/app/src/examples/AboutExample.tsx b/app/src/examples/AboutExample.tsx index b646b6a7bcda..fdd00275100e 100644 --- a/app/src/examples/AboutExample.tsx +++ b/app/src/examples/AboutExample.tsx @@ -6,6 +6,10 @@ function isWeb() { return Platform.OS === 'web'; } +function isBridgeless() { + return (global as Record)._IS_BRIDGELESS; +} + function getPlatform() { if (isWeb()) { return 'web'; @@ -68,6 +72,10 @@ export default function AboutExample() { RN version:{' '} {getReactNativeVersion()} + + Bridgeless enabled:{' '} + {isBridgeless() ? 'yes' : 'no'} + )} diff --git a/app/src/examples/CustomHandler/PagerExample.tsx b/app/src/examples/CustomHandler/PagerExample.tsx index 35ac17c4c05c..264fed1c9d86 100644 --- a/app/src/examples/CustomHandler/PagerExample.tsx +++ b/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('idle'); + const scrollState = useSharedValue<'idle' | 'dragging' | 'settling'>('idle'); const currentPage = useSharedValue(0); const stringifiedCurrentPage = useDerivedValue(() => { return `${currentPage.value + 1}`; diff --git a/app/src/examples/CustomHandler/useAnimatedPagerHandler.ts b/app/src/examples/CustomHandler/useAnimatedPagerHandler.ts index 1716c1182c86..11bdb114d01b 100644 --- a/app/src/examples/CustomHandler/useAnimatedPagerHandler.ts +++ b/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, + e: ReanimatedEvent, context: TContext ) => void; }, dependencies?: Array -): (e: NativeSyntheticEvent) => void { +): (e: PageScrollStateChangedNativeEvent) => void { const { context, doDependenciesDiffer } = useHandler< - PageScrollStateChangedEvent, + PageScrollStateChangedNativeEvent, TContext >(handlers, dependencies); - return useEvent>( + return useEvent( (event) => { 'worklet'; const { onPageScrollStateChanged } = handlers; diff --git a/app/src/examples/LiquidSwipe/LiquidSwipe.tsx b/app/src/examples/LiquidSwipe/LiquidSwipe.tsx index d60cd4627486..2b4dcf0d3a86 100644 --- a/app/src/examples/LiquidSwipe/LiquidSwipe.tsx +++ b/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 dragX = useSharedValue(0); + const startY = 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; + dragX.value = 0; + startY.value = isBack.value ? event.y : centerY.value; + }) + .onChange((event) => { + centerY.value = startY.value + event.translationY; if (isBack.value) { progress.value = interpolate( event.translationX, @@ -69,19 +64,18 @@ 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 ( - + - +