Skip to content

Commit d54d28a

Browse files
MatiPl01MatiPl01
authored
chore: Bump React Native to 0.85 and Reanimated to 4.4 (#563)
## Summary Bumps the library and the web / fabric / expo example apps to **React Native 0.85.3 + Reanimated 4.4.1** (Expo SDK 56). - **Library** — type and jest-config updates for the Reanimated 4.4 / RN 0.85 changes (`moduleResolution: bundler`, `DerivedValue`, `StyleSheet.absoluteFillObject` removal). - **expo** example uses the Expo Go-compatible Reanimated/Worklets (SDK 56 pins); **fabric** uses the latest. - **paper** stays on the old architecture (RN 0.81.4 + Reanimated 3.19.5); its native build now resolves from its own `node_modules`. Replaces #554 (auto-closed when its branch was renamed from `fix/…` to `deps/…`).
1 parent 8973115 commit d54d28a

23 files changed

Lines changed: 2017 additions & 1350 deletions

File tree

‎.yarn/patches/react-native-reanimated-npm-4.1.3-f13c1e8648.patch‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎example/app/jest.config.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ const config: JestConfigWithTsJest = {
77
fakeTimers: {
88
enableGlobally: true
99
},
10-
moduleDirectories: ['../../node_modules', '<rootDir>'],
10+
moduleDirectories: ['node_modules', '../../node_modules', '<rootDir>'],
1111
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
1212
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths ?? {}, {
1313
prefix: '<rootDir>/'
1414
}),
15-
preset: 'react-native',
15+
preset: '@react-native/jest-preset',
16+
resolver: 'react-native-worklets/jest/resolver.js',
1617
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
1718
transform: {
1819
'^.+\\.jsx?$': [

‎example/app/package.json‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,40 @@
88
"@react-navigation/bottom-tabs": "7.3.10",
99
"@react-navigation/native": "7.0.14",
1010
"@react-navigation/native-stack": "7.2.0",
11-
"@shopify/flash-list": "2.0.3",
12-
"react": "19.1.0",
13-
"react-native": "0.81.4",
14-
"react-native-gesture-handler": "2.28.0",
11+
"@shopify/flash-list": "2.3.1",
12+
"react": "19.2.3",
13+
"react-native": "0.85.3",
14+
"react-native-gesture-handler": "2.31.1",
1515
"react-native-haptic-feedback": "2.3.3",
16-
"react-native-reanimated": "patch:react-native-reanimated@npm%3A4.1.3#~/.yarn/patches/react-native-reanimated-npm-4.1.3-f13c1e8648.patch",
17-
"react-native-safe-area-context": "5.3.0",
18-
"react-native-screens": "4.15.4",
16+
"react-native-reanimated": "4.4.1",
17+
"react-native-safe-area-context": "5.7.0",
18+
"react-native-screens": "4.25.2",
1919
"react-native-sortables": "workspace:*",
20-
"react-native-svg": "15.12.1",
21-
"react-native-worklets": "0.5.0"
20+
"react-native-svg": "15.15.4",
21+
"react-native-worklets": "0.9.1"
2222
},
2323
"devDependencies": {
2424
"@babel/core": "^7.25.2",
2525
"@babel/preset-env": "^7.25.3",
2626
"@babel/runtime": "^7.25.0",
2727
"@gorhom/portal": "^1.0.14",
28-
"@react-native-community/cli": "19.1.2",
29-
"@react-native-community/cli-platform-android": "20.0.0",
30-
"@react-native-community/cli-platform-ios": "20.0.0",
31-
"@react-native/babel-preset": "0.81.4",
32-
"@react-native/metro-config": "0.81.4",
28+
"@react-native-community/cli": "20.1.0",
29+
"@react-native-community/cli-platform-android": "20.1.0",
30+
"@react-native-community/cli-platform-ios": "20.1.0",
31+
"@react-native/babel-preset": "0.85.3",
32+
"@react-native/jest-preset": "0.85.3",
33+
"@react-native/metro-config": "0.85.3",
3334
"@testing-library/react-hooks": "^8.0.1",
3435
"@testing-library/react-native": "^12.5.1",
35-
"@types/react": "^19.1.0",
36+
"@types/react": "^19.2.0",
3637
"@types/react-test-renderer": "^19.1.0",
3738
"babel-plugin-module-resolver": "^5.0.2",
3839
"eslint": "^9.28.0",
3940
"jest": "^29.7.0",
4041
"lint-staged": "^15.5.0",
4142
"madge": "^8.0.0",
4243
"prettier": "^3.3.2",
43-
"react-test-renderer": "19.1.0",
44+
"react-test-renderer": "19.2.3",
4445
"typescript": "^5.8.3"
4546
},
4647
"lint-staged": {

‎example/app/src/components/inputs/TabSelector.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useCallback } from 'react';
2-
import type { ViewStyle } from 'react-native';
2+
import type { StyleProp, ViewStyle } from 'react-native';
33
import { StyleSheet, TouchableOpacity, View } from 'react-native';
4+
import type { AnimatedStyle } from 'react-native-reanimated';
45
import Animated, {
56
interpolateColor,
67
runOnUI,
@@ -74,7 +75,7 @@ export default function TabSelector<T extends number | string>({
7475
type TabProps<T> = {
7576
isSelected: boolean;
7677
tab: T;
77-
style: ViewStyle;
78+
style: StyleProp<AnimatedStyle<ViewStyle>>;
7879
onSelectTab: (tab: T) => void;
7980
onMeasureWidth: (width: number) => void;
8081
};

‎example/app/src/components/misc/ActionSheetDropdown.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -368,8 +368,12 @@ function Backdrop({ handleClose }: BackdropProps): JSX.Element {
368368

369369
const styles = StyleSheet.create({
370370
backdrop: {
371-
...StyleSheet.absoluteFillObject,
372-
backgroundColor: 'rgba(0, 0, 0, 0.2)'
371+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
372+
bottom: 0,
373+
left: 0,
374+
position: 'absolute',
375+
right: 0,
376+
top: 0
373377
},
374378
scrollBarThumb: {
375379
backgroundColor: 'rgba(0, 0, 0, 0.5)',

‎example/app/src/examples/SortableFlex/features/AutoScrollExample.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function ScrollViewExample() {
7373
}
7474

7575
function FlatListExample() {
76-
const scrollableRef = useAnimatedRef<Animated.FlatList<string>>();
76+
const scrollableRef = useAnimatedRef<FlatList<string>>();
7777

7878
return (
7979
<AnimatedFlatList
@@ -139,10 +139,10 @@ function FlashListExample() {
139139

140140
type CategoriesSectionProps = {
141141
scrollableRef:
142-
| AnimatedRef<Animated.FlatList>
143142
| AnimatedRef<Animated.ScrollView>
144143
// eslint-disable-next-line @typescript-eslint/no-explicit-any
145-
| AnimatedRef<FlashListRef<any>>;
144+
| AnimatedRef<FlashListRef<any>>
145+
| AnimatedRef<FlatList<string>>;
146146
};
147147

148148
function ManyCategories({ scrollableRef }: CategoriesSectionProps) {

‎example/app/src/examples/SortableGrid/features/AutoScrollExample.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function ScrollViewExample() {
7474
}
7575

7676
function FlatListExample() {
77-
const scrollableRef = useAnimatedRef<Animated.FlatList<string>>();
77+
const scrollableRef = useAnimatedRef<FlatList<string>>();
7878

7979
return (
8080
<AnimatedFlatList
@@ -140,10 +140,10 @@ function FlashListExample() {
140140

141141
type CardsSectionProps = {
142142
scrollableRef:
143-
| AnimatedRef<Animated.FlatList>
144143
| AnimatedRef<Animated.ScrollView>
145144
// eslint-disable-next-line @typescript-eslint/no-explicit-any
146-
| AnimatedRef<FlashListRef<any>>;
145+
| AnimatedRef<FlashListRef<any>>
146+
| AnimatedRef<FlatList<string>>;
147147
};
148148

149149
function ManyCards({ scrollableRef }: CardsSectionProps) {

‎example/expo/babel.config.cjs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Don't edit this file directly if you don't have to.
3+
* Modify the babel config file in the project root directory.
4+
*/
5+
const path = require('path');
6+
7+
const appDir = path.resolve(__dirname, '../app');
8+
9+
module.exports = function (api) {
10+
api.cache(true);
11+
return {
12+
presets: ['babel-preset-expo'],
13+
plugins: [
14+
'@babel/plugin-transform-export-namespace-from',
15+
[
16+
'module-resolver',
17+
{
18+
root: ['./'],
19+
extensions: ['.ts', '.tsx', '.svg', '.json'],
20+
// This needs to be mirrored in ../app/tsconfig.json
21+
alias: {
22+
'@': path.join(appDir, 'src')
23+
}
24+
}
25+
],
26+
'react-native-worklets/plugin'
27+
]
28+
};
29+
};

‎example/expo/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
"name": "example-expo",
33
"version": "1.0.0",
44
"dependencies": {
5-
"expo": "54.0.20",
6-
"expo-status-bar": "~3.0.8",
7-
"react": "19.1.0",
8-
"react-native": "0.81.5",
9-
"react-native-gesture-handler": "~2.28.0",
10-
"react-native-reanimated": "~4.1.1",
11-
"react-native-worklets": "0.5.1"
5+
"expo": "56.0.9",
6+
"expo-status-bar": "~56.0.4",
7+
"react": "19.2.3",
8+
"react-native": "0.85.3",
9+
"react-native-gesture-handler": "~2.31.1",
10+
"react-native-reanimated": "4.3.1",
11+
"react-native-worklets": "0.8.3"
1212
},
1313
"devDependencies": {
1414
"@babel/core": "^7.25.2",
15-
"@types/react": "~19.1.10",
15+
"@types/react": "~19.2.0",
1616
"typescript": "~5.9.2"
1717
},
1818
"installConfig": {

‎example/fabric/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "example-fabric",
33
"version": "1.0.0",
44
"dependencies": {
5-
"react-native": "0.81.4",
5+
"react-native": "0.85.3",
66
"react-native-sortables": "workspace:*"
77
},
88
"installConfig": {

0 commit comments

Comments
 (0)