Skip to content

Commit aea1f8e

Browse files
committed
feat: upgrade to reanimated v4 (#20)
1 parent f794512 commit aea1f8e

File tree

5 files changed

+94
-79
lines changed

5 files changed

+94
-79
lines changed

CONTRIBUTING.md

Lines changed: 45 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,97 +6,83 @@ We want this community to be friendly and respectful to each other. Please follo
66

77
## Development workflow
88

9+
> [!IMPORTANT]
10+
> Scripts in this project are designed to be run in a bash environment using [Yarn](https://yarnpkg.com/) and [Corepack](https://yarnpkg.com/corepack). If you are using a different shell, you may need to adjust the commands accordingly.
11+
912
This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
1013

1114
- The library package in the root directory.
1215
- An example app in the `example/` directory.
1316

1417
To get started with the project, run `yarn` in the root directory to install the required dependencies for each package:
1518

16-
```sh
17-
yarn init -2
18-
yarn
19-
yarn build
20-
```
21-
19+
> [!NOTE]
20+
> If you do not have Yarn v3/4 installed, you can install it via [Corepack](https://yarnpkg.com/corepack) by running: `npm install -g corepack`
2221
> Since the project relies on Yarn workspaces, you cannot use [`npm`](https://github.com/npm/cli) for development.
2322
24-
The [example app](/example/) demonstrates usage of the library.
25-
26-
It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Most changes to the library's code will be reflected in the example app without a rebuild, but changes to the Metro, Babel or compiler sections will require a rebuild.
27-
28-
You can rebuild the library by running:
29-
3023
```sh
31-
yarn build
24+
yarn init -2 # We require Yarn 4
25+
yarn clean # Install dependencies, rebuild the project and example app
26+
yarn example ios # Or yarn example android
3227
```
3328

34-
There is no rebuild watch command, as if you are changing code that requires a rebuild, you will also need to restart the example app server to observe any changes.
29+
Once the example app is built, you can use
3530

3631
```sh
37-
# Alias for yarn build && yarn example debug
38-
yarn build:debug
39-
40-
# Alias for yarn build && yarn example start
41-
yarn build:start
42-
43-
# Tips:
44-
45-
## Quickly rebuild and refresh the simulator
46-
yarn build:debug --ios
47-
yarn build:debug --android
48-
yarn build:debug --web
32+
yarn example start # Start Expo CLI
33+
yarn example start:build # Rebuild the project and start Expo CLI
34+
yarn example start:debug # Rebuild the project and start Expo CLI with debug logging
4935
```
5036

51-
### Building the example app
37+
## Example app
5238

53-
The example app is built using a canary version of the Expo SDK, which requires a development build. Before running the example app on a device or simulator, you need to build the app using the following command:
54-
55-
```sh
56-
yarn example expo prebuild
57-
58-
yarn example ios
59-
# Or
60-
yarn example android
61-
```
62-
63-
### Running the example app
39+
The [example app](/example/) demonstrates usage of the library.
6440

65-
You can use various commands from the root directory to work with the project.
41+
It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Most changes to the library's code will be reflected in the example app without a rebuild, but changes to the Metro, Babel or compiler sections will require a rebuild.
6642

67-
To start the CLI:
43+
You can rebuild the library by running:
6844

6945
```sh
70-
yarn example start
46+
yarn build
7147
```
7248

73-
To start the CLI wih debugging enabled:
49+
**There is no rebuild watch command.** The example app should fast refresh with most code changes, but certain changes (like those to the Metro transformer or Babel plugin) will require a rebuild of the library and example app. For this reason, we recommend using the `start:*` commands to rebuild the library and start the example app server in one command.
7450

7551
```sh
76-
yarn example debug
52+
yarn example start # Start Expo CLI
53+
yarn example start:build # Rebuild the project and start Expo CLI
54+
yarn example start:debug # Rebuild the project and start Expo CLI with debug logging
7755
```
7856

79-
To rebuild the example app on Android:
57+
The `yarn example start` commands are aliases for `expo start`. They accept the same arguments as `expo start`, so you can pass any Expo CLI options to them.
58+
59+
For example, to open the example app on a specific platform, you can use:
8060

8161
```sh
82-
yarn example android
62+
yarn start --ios
63+
yarn start --android
64+
yarn start --web
65+
66+
yarn start:build --ios
67+
yarn start:build --android
68+
yarn start:build --web
8369
```
8470

85-
To rebuild the example app on iOS:
71+
> [!TIP]
72+
> `start:build` and `start:debug` will clear the cache before starting the Expo CLI. If you are experiencing issue with `yarn example start` not reflecting your changes, try running `yarn example start:build` or `yarn example start:debug`.
8673
87-
```sh
88-
yarn example ios
89-
```
74+
### Rebuilding the example app
9075

91-
To run the example app on Web:
76+
The example app is built using a canary version of the Expo SDK, which requires a development build. Before running the example app on a device or simulator, you need to build the app using the following command:
9277

9378
```sh
94-
yarn example web
79+
yarn example expo prebuild # Rerun the Expo prebuild command
80+
yarn example ios # Or yarn example android
9581
```
9682

9783
### Testing
9884

99-
Remember to add tests for your change if possible. Run the unit tests by:
85+
Remember to add tests for your pull request if possible. Run the unit tests by:
10086

10187
```sh
10288
yarn test
@@ -110,7 +96,7 @@ yarn test
11096
Run the example via the command line with the `debug` script to enable debugging:
11197

11298
```sh
113-
yarn example debug
99+
yarn example start:debug
114100
```
115101

116102
This will print parsed CSS and style objects to the console, which can help you understand how the library processes CSS files.
@@ -163,7 +149,8 @@ yarn release
163149

164150
The `package.json` file contains various scripts for common tasks:
165151

166-
- `yarn`: setup project by installing dependencies.
152+
- `yarn`: install dependencies.
153+
- `yarn clean`: setup project by installing dependencies and rebuilding the project and example app
167154
- `yarn typecheck`: type-check files with TypeScript.
168155
- `yarn lint`: lint files with ESLint.
169156
- `yarn test`: run unit tests with Jest.
@@ -183,6 +170,10 @@ When you're sending a pull request:
183170
- Follow the pull request template when opening a pull request.
184171
- For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.
185172

173+
_Do not create pull requests for these reasons:_
174+
175+
- Changing the scripts to work in non-bash environments
176+
186177
## Development notes
187178

188179
### Metro Transformer

README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,25 @@ export default function App() {
172172

173173
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
174174

175+
To quickly get started with the project, you can run:
176+
177+
```sh
178+
yarn init -2 # We require Yarn 4
179+
yarn clean # Install dependencies, rebuild the project and example app
180+
yarn example ios # Or yarn example android
181+
```
182+
183+
Once the example app is built, you can use
184+
185+
```sh
186+
yarn example start # Start Expo CLI
187+
yarn example start:build # Rebuild the project and start Expo CLI
188+
yarn example start:debug # Rebuild the project and start Expo CLI with debug logging
189+
```
190+
191+
> [!TIP]
192+
> `start:build` and `start:debug` will clear the cache before starting the Expo CLI. If you are experiencing issue with `yarn example start` not reflecting your changes, try running `yarn example start:build` or `yarn example start:debug`.
193+
175194
## License
176195

177196
MIT

example/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"main": "index.js",
55
"scripts": {
66
"start": "expo start",
7+
"build": "expo start --clear",
78
"debug": "DEBUG='react-native-css:*' expo start --clear",
89
"android": "expo run:android",
910
"ios": "expo run:ios",
@@ -19,9 +20,9 @@
1920
"react": "19.1.0",
2021
"react-dom": "19.1.0",
2122
"react-native": "0.80.1",
22-
"react-native-reanimated": "~4.0.0-nightly-20250720-bdf9f39ee",
23+
"react-native-reanimated": "4.0.1",
2324
"react-native-web": "~0.20.0",
24-
"react-native-worklets": "0.4.0-nightly-20250720-bdf9f39ee",
25+
"react-native-worklets": "0.4.1",
2526
"react-refresh": "^0.17.0"
2627
},
2728
"devDependencies": {

package.json

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,21 @@
7272
"configs"
7373
],
7474
"scripts": {
75-
"test": "NODE_OPTIONS=\"${NODE_OPTIONS:-} --experimental-vm-modules\" jest",
76-
"lint": "eslint",
77-
"typecheck": "tsc --noEmit",
7875
"build": "bob build",
79-
"build:debug": "yarn build && yarn example debug",
80-
"build:start": "yarn build && yarn example start",
81-
"prepublishOnly": "bob build",
82-
"prepare": "bob build",
76+
"clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +; yarn install --immutable --immutable-cache --check-cache; yarn build; yes | yarn example expo prebuild --clean",
77+
"clean:android": "yarn clean && yarn example android",
78+
"clean:ios": "yarn clean && yarn example ios",
8379
"example": "yarn workspace react-native-css-example",
80+
"lint": "eslint",
81+
"prepare": "bob build",
82+
"prepublishOnly": "bob build",
8483
"release": "release-it",
85-
"release:nightly": "release-it 3.0.0-nightly.\"$(git rev-parse --short HEAD)\" --npm.tag=beta"
84+
"release:nightly": "release-it 3.0.0-nightly.\"$(git rev-parse --short HEAD)\" --npm.tag=beta",
85+
"start": "yarn example start",
86+
"start:build": "yarn build && yarn example build",
87+
"start:debug": "yarn build && yarn example debug",
88+
"test": "NODE_OPTIONS=\"${NODE_OPTIONS:-} --experimental-vm-modules\" jest",
89+
"typecheck": "tsc --noEmit"
8690
},
8791
"keywords": [
8892
"react-native",
@@ -154,9 +158,9 @@
154158
"react": "19.1.0",
155159
"react-native": "0.80.1",
156160
"react-native-builder-bob": "^0.40.13",
157-
"react-native-reanimated": "~4.0.0-nightly-20250720-bdf9f39ee",
161+
"react-native-reanimated": "4.0.1",
158162
"react-native-safe-area-context": "5.4.0",
159-
"react-native-worklets": "0.4.0-nightly-20250720-bdf9f39ee",
163+
"react-native-worklets": "0.4.1",
160164
"react-refresh": "^0.17.0",
161165
"react-test-renderer": "^19.1.0",
162166
"release-it": "^19.0.4",

yarn.lock

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10889,9 +10889,9 @@ __metadata:
1088910889
react-native: "npm:0.80.1"
1089010890
react-native-builder-bob: "npm:^0.40.13"
1089110891
react-native-monorepo-config: "npm:^0.1.9"
10892-
react-native-reanimated: "npm:~4.0.0-nightly-20250720-bdf9f39ee"
10892+
react-native-reanimated: "npm:4.0.1"
1089310893
react-native-web: "npm:~0.20.0"
10894-
react-native-worklets: "npm:0.4.0-nightly-20250720-bdf9f39ee"
10894+
react-native-worklets: "npm:0.4.1"
1089510895
react-refresh: "npm:^0.17.0"
1089610896
languageName: unknown
1089710897
linkType: soft
@@ -10933,9 +10933,9 @@ __metadata:
1093310933
react: "npm:19.1.0"
1093410934
react-native: "npm:0.80.1"
1093510935
react-native-builder-bob: "npm:^0.40.13"
10936-
react-native-reanimated: "npm:~4.0.0-nightly-20250720-bdf9f39ee"
10936+
react-native-reanimated: "npm:4.0.1"
1093710937
react-native-safe-area-context: "npm:5.4.0"
10938-
react-native-worklets: "npm:0.4.0-nightly-20250720-bdf9f39ee"
10938+
react-native-worklets: "npm:0.4.1"
1093910939
react-refresh: "npm:^0.17.0"
1094010940
react-test-renderer: "npm:^19.1.0"
1094110941
release-it: "npm:^19.0.4"
@@ -10980,18 +10980,18 @@ __metadata:
1098010980
languageName: node
1098110981
linkType: hard
1098210982

10983-
"react-native-reanimated@npm:~4.0.0-nightly-20250720-bdf9f39ee":
10984-
version: 4.0.0-nightly-20250720-bdf9f39ee
10985-
resolution: "react-native-reanimated@npm:4.0.0-nightly-20250720-bdf9f39ee"
10983+
"react-native-reanimated@npm:4.0.1":
10984+
version: 4.0.1
10985+
resolution: "react-native-reanimated@npm:4.0.1"
1098610986
dependencies:
1098710987
react-native-is-edge-to-edge: "npm:^1.2.1"
1098810988
semver: "npm:7.7.2"
1098910989
peerDependencies:
1099010990
"@babel/core": ^7.0.0-0
1099110991
react: "*"
1099210992
react-native: "*"
10993-
react-native-worklets: 0.4.0-nightly-20250720-bdf9f39ee
10994-
checksum: 10c0/d6e83f94b575323efc41f1d8e64e2030328a22075767ef9f9e0350abcc3aa4aae57853c05151c10ed77a93d75e9a6a8bf2a98d2d204ede17f69c071f700a924e
10993+
react-native-worklets: ">=0.3.0"
10994+
checksum: 10c0/bbf9d715f0305a586181b34fab6cb81ca3f2f737314efb02c7ce4bbbced54da388c2ccc6730450fa6be8fce4083ff29fe990a9a9accf6e4f9f7d4f9cc2a742ab
1099510995
languageName: node
1099610996
linkType: hard
1099710997

@@ -11024,9 +11024,9 @@ __metadata:
1102411024
languageName: node
1102511025
linkType: hard
1102611026

11027-
"react-native-worklets@npm:0.4.0-nightly-20250720-bdf9f39ee":
11028-
version: 0.4.0-nightly-20250720-bdf9f39ee
11029-
resolution: "react-native-worklets@npm:0.4.0-nightly-20250720-bdf9f39ee"
11027+
"react-native-worklets@npm:0.4.1":
11028+
version: 0.4.1
11029+
resolution: "react-native-worklets@npm:0.4.1"
1103011030
dependencies:
1103111031
"@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0"
1103211032
"@babel/plugin-transform-class-properties": "npm:^7.0.0-0"
@@ -11042,7 +11042,7 @@ __metadata:
1104211042
"@babel/core": ^7.0.0-0
1104311043
react: "*"
1104411044
react-native: "*"
11045-
checksum: 10c0/1760062310b9e298bce51c9f7a8f51011880a5d676feec2e5c4a0f2390725f749d9aa24228a7f9bd579ada2785db14572e0d31cbd53fcccf51a8207d78205b3c
11045+
checksum: 10c0/cd54b322ea7c205ea2ea540a7e24e3a3c3bea75b57c4fe7e3c3fb8f7840290b66d2dbad763cf3987234396f8d4f5bd304601d7cd4f7adbf637529fa573822572
1104611046
languageName: node
1104711047
linkType: hard
1104811048

0 commit comments

Comments
 (0)