Skip to content

Commit b3d32c1

Browse files
patrickkabwepatrickkabwe
committed
feat: add support for React Native Reanimated animated props
Add support for animating NitroText props using React Native Reanimated. This allows text properties (text, fontSize, fontColor, letterSpacing) to be animated directly on the UI thread for smooth, performant animations.
1 parent c3892b2 commit b3d32c1

56 files changed

Lines changed: 783 additions & 282 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/release.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ jobs:
1616
runs-on: ubuntu-latest
1717
permissions:
1818
contents: write
19-
issues: write
20-
pull-requests: write
2119
id-token: write
2220
steps:
2321
- name: Checkout

‎bun.lock‎

Lines changed: 157 additions & 211 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎eslint.config.mjs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,26 @@ export default defineConfig([
6666
},
6767
},
6868
},
69+
{
70+
files: ['scripts/**/*.js'],
71+
languageOptions: {
72+
ecmaVersion: 2024,
73+
sourceType: 'script',
74+
globals: {
75+
console: 'readonly',
76+
process: 'readonly',
77+
require: 'readonly',
78+
module: 'readonly',
79+
__dirname: 'readonly',
80+
__filename: 'readonly',
81+
Buffer: 'readonly',
82+
global: 'readonly',
83+
},
84+
},
85+
rules: {
86+
'@typescript-eslint/no-require-imports': 'off',
87+
},
88+
},
6989
{
7090
ignores: [
7191
'node_modules/**',

‎example/babel.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = api => {
1515
},
1616
},
1717
],
18+
'react-native-worklets/plugin',
1819
],
1920
};
20-
};
21+
};

‎example/ios/Podfile.lock‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2399,6 +2399,98 @@ PODS:
23992399
- React-perflogger (= 0.81.4)
24002400
- React-utils (= 0.81.4)
24012401
- SocketRocket
2402+
- RNReanimated (4.2.1):
2403+
- boost
2404+
- DoubleConversion
2405+
- fast_float
2406+
- fmt
2407+
- glog
2408+
- hermes-engine
2409+
- RCT-Folly
2410+
- RCT-Folly/Fabric
2411+
- RCTRequired
2412+
- RCTTypeSafety
2413+
- React-Core
2414+
- React-debug
2415+
- React-Fabric
2416+
- React-featureflags
2417+
- React-graphics
2418+
- React-hermes
2419+
- React-ImageManager
2420+
- React-jsi
2421+
- React-NativeModulesApple
2422+
- React-RCTFabric
2423+
- React-renderercss
2424+
- React-rendererdebug
2425+
- React-utils
2426+
- ReactCodegen
2427+
- ReactCommon/turbomodule/bridging
2428+
- ReactCommon/turbomodule/core
2429+
- RNReanimated/reanimated (= 4.2.1)
2430+
- RNWorklets
2431+
- SocketRocket
2432+
- Yoga
2433+
- RNReanimated/reanimated (4.2.1):
2434+
- boost
2435+
- DoubleConversion
2436+
- fast_float
2437+
- fmt
2438+
- glog
2439+
- hermes-engine
2440+
- RCT-Folly
2441+
- RCT-Folly/Fabric
2442+
- RCTRequired
2443+
- RCTTypeSafety
2444+
- React-Core
2445+
- React-debug
2446+
- React-Fabric
2447+
- React-featureflags
2448+
- React-graphics
2449+
- React-hermes
2450+
- React-ImageManager
2451+
- React-jsi
2452+
- React-NativeModulesApple
2453+
- React-RCTFabric
2454+
- React-renderercss
2455+
- React-rendererdebug
2456+
- React-utils
2457+
- ReactCodegen
2458+
- ReactCommon/turbomodule/bridging
2459+
- ReactCommon/turbomodule/core
2460+
- RNReanimated/reanimated/apple (= 4.2.1)
2461+
- RNWorklets
2462+
- SocketRocket
2463+
- Yoga
2464+
- RNReanimated/reanimated/apple (4.2.1):
2465+
- boost
2466+
- DoubleConversion
2467+
- fast_float
2468+
- fmt
2469+
- glog
2470+
- hermes-engine
2471+
- RCT-Folly
2472+
- RCT-Folly/Fabric
2473+
- RCTRequired
2474+
- RCTTypeSafety
2475+
- React-Core
2476+
- React-debug
2477+
- React-Fabric
2478+
- React-featureflags
2479+
- React-graphics
2480+
- React-hermes
2481+
- React-ImageManager
2482+
- React-jsi
2483+
- React-NativeModulesApple
2484+
- React-RCTFabric
2485+
- React-renderercss
2486+
- React-rendererdebug
2487+
- React-utils
2488+
- ReactCodegen
2489+
- ReactCommon/turbomodule/bridging
2490+
- ReactCommon/turbomodule/core
2491+
- RNWorklets
2492+
- SocketRocket
2493+
- Yoga
24022494
- RNScreens (4.18.0):
24032495
- boost
24042496
- DoubleConversion
@@ -2458,6 +2550,95 @@ PODS:
24582550
- ReactCommon/turbomodule/core
24592551
- SocketRocket
24602552
- Yoga
2553+
- RNWorklets (0.7.1):
2554+
- boost
2555+
- DoubleConversion
2556+
- fast_float
2557+
- fmt
2558+
- glog
2559+
- hermes-engine
2560+
- RCT-Folly
2561+
- RCT-Folly/Fabric
2562+
- RCTRequired
2563+
- RCTTypeSafety
2564+
- React-Core
2565+
- React-debug
2566+
- React-Fabric
2567+
- React-featureflags
2568+
- React-graphics
2569+
- React-hermes
2570+
- React-ImageManager
2571+
- React-jsi
2572+
- React-NativeModulesApple
2573+
- React-RCTFabric
2574+
- React-renderercss
2575+
- React-rendererdebug
2576+
- React-utils
2577+
- ReactCodegen
2578+
- ReactCommon/turbomodule/bridging
2579+
- ReactCommon/turbomodule/core
2580+
- RNWorklets/worklets (= 0.7.1)
2581+
- SocketRocket
2582+
- Yoga
2583+
- RNWorklets/worklets (0.7.1):
2584+
- boost
2585+
- DoubleConversion
2586+
- fast_float
2587+
- fmt
2588+
- glog
2589+
- hermes-engine
2590+
- RCT-Folly
2591+
- RCT-Folly/Fabric
2592+
- RCTRequired
2593+
- RCTTypeSafety
2594+
- React-Core
2595+
- React-debug
2596+
- React-Fabric
2597+
- React-featureflags
2598+
- React-graphics
2599+
- React-hermes
2600+
- React-ImageManager
2601+
- React-jsi
2602+
- React-NativeModulesApple
2603+
- React-RCTFabric
2604+
- React-renderercss
2605+
- React-rendererdebug
2606+
- React-utils
2607+
- ReactCodegen
2608+
- ReactCommon/turbomodule/bridging
2609+
- ReactCommon/turbomodule/core
2610+
- RNWorklets/worklets/apple (= 0.7.1)
2611+
- SocketRocket
2612+
- Yoga
2613+
- RNWorklets/worklets/apple (0.7.1):
2614+
- boost
2615+
- DoubleConversion
2616+
- fast_float
2617+
- fmt
2618+
- glog
2619+
- hermes-engine
2620+
- RCT-Folly
2621+
- RCT-Folly/Fabric
2622+
- RCTRequired
2623+
- RCTTypeSafety
2624+
- React-Core
2625+
- React-debug
2626+
- React-Fabric
2627+
- React-featureflags
2628+
- React-graphics
2629+
- React-hermes
2630+
- React-ImageManager
2631+
- React-jsi
2632+
- React-NativeModulesApple
2633+
- React-RCTFabric
2634+
- React-renderercss
2635+
- React-rendererdebug
2636+
- React-utils
2637+
- ReactCodegen
2638+
- ReactCommon/turbomodule/bridging
2639+
- ReactCommon/turbomodule/core
2640+
- SocketRocket
2641+
- Yoga
24612642
- SocketRocket (0.7.1)
24622643
- Yoga (0.0.0)
24632644

@@ -2536,7 +2717,9 @@ DEPENDENCIES:
25362717
- ReactAppDependencyProvider (from `build/generated/ios`)
25372718
- ReactCodegen (from `build/generated/ios`)
25382719
- ReactCommon/turbomodule/core (from `../../node_modules/react-native/ReactCommon`)
2720+
- RNReanimated (from `../../node_modules/react-native-reanimated`)
25392721
- RNScreens (from `../../node_modules/react-native-screens`)
2722+
- RNWorklets (from `../../node_modules/react-native-worklets`)
25402723
- SocketRocket (~> 0.7.1)
25412724
- Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
25422725

@@ -2692,8 +2875,12 @@ EXTERNAL SOURCES:
26922875
:path: build/generated/ios
26932876
ReactCommon:
26942877
:path: "../../node_modules/react-native/ReactCommon"
2878+
RNReanimated:
2879+
:path: "../../node_modules/react-native-reanimated"
26952880
RNScreens:
26962881
:path: "../../node_modules/react-native-screens"
2882+
RNWorklets:
2883+
:path: "../../node_modules/react-native-worklets"
26972884
Yoga:
26982885
:path: "../../node_modules/react-native/ReactCommon/yoga"
26992886

@@ -2771,7 +2958,9 @@ SPEC CHECKSUMS:
27712958
ReactAppDependencyProvider: 433ddfb4536948630aadd5bd925aff8a632d2fe3
27722959
ReactCodegen: adf5027f30e34c68b5a09f0b68acb3e5ef9e1a5d
27732960
ReactCommon: 394c6b92765cf6d211c2c3f7f6bc601dffb316a6
2961+
RNReanimated: 1c7f0655a2bbff21ccc6eae5e312553e95391172
27742962
RNScreens: d821082c6dd1cb397cc0c98b026eeafaa68be479
2963+
RNWorklets: 5f22ce2288933878d14039193604c346d6ae0fbd
27752964
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
27762965
Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
27772966

‎example/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@
1616
"react": "19.1.0",
1717
"react-native": "0.81.4",
1818
"react-native-nitro-modules": "^0.31.9",
19+
"react-native-reanimated": "^4.2.1",
1920
"react-native-safe-area-context": "^5.5.2",
20-
"react-native-screens": "^4.18.0"
21+
"react-native-screens": "^4.18.0",
22+
"react-native-worklets": "^0.7.1"
2123
},
2224
"devDependencies": {
2325
"@babel/core": "^7.25.2",
@@ -34,6 +36,6 @@
3436
"babel-plugin-module-resolver": "^5.0.2"
3537
},
3638
"engines": {
37-
"node": ">=20"
39+
"node": ">=22"
3840
}
39-
}
41+
}

‎example/src/App.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2+
import { NavigationContainer } from '@react-navigation/native';
13
import React from 'react';
24
import { Text } from 'react-native';
3-
import { NavigationContainer } from '@react-navigation/native';
4-
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5-
import { PlainTextScreen } from './screens/PlainTextScreen';
5+
import { AnimationScreen } from './screens/AnimationScreen';
66
import { HtmlScreen } from './screens/HtmlScreen';
7+
import ManScreen from './screens/ManSo';
78
import { PerformanceScreen } from './screens/PerformanceScreen';
9+
import { PlainTextScreen } from './screens/PlainTextScreen';
810

911
const Tab = createBottomTabNavigator();
1012

@@ -27,6 +29,17 @@ function MyTabs() {
2729
),
2830
}}
2931
/>
32+
<Tab.Screen
33+
name="Animation"
34+
component={AnimationScreen}
35+
options={{
36+
tabBarLabel: 'Animation',
37+
tabBarIcon: ({ color, size }) => (
38+
<Text style={{ fontSize: size }}>🏠</Text>
39+
),
40+
}}
41+
/>
42+
3043
<Tab.Screen
3144
name="HTML"
3245
component={HtmlScreen}
@@ -37,6 +50,17 @@ function MyTabs() {
3750
),
3851
}}
3952
/>
53+
54+
<Tab.Screen
55+
name="ManSo"
56+
component={ManScreen}
57+
options={{
58+
tabBarLabel: 'ManSo',
59+
tabBarIcon: ({ color, size }) => (
60+
<Text style={{ fontSize: size }}>📄</Text>
61+
),
62+
}}
63+
/>
4064
<Tab.Screen
4165
name="Performance"
4266
component={PerformanceScreen}

0 commit comments

Comments
 (0)