Skip to content

Commit f9c48b9

Browse files
marklawlormarklawlor
committed
refactor: cleanup and update <Text />
1 parent 6202e37 commit f9c48b9

File tree

7 files changed

+93
-60
lines changed

7 files changed

+93
-60
lines changed

‎example/babel.config.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
const path = require('path');
2-
const { getConfig } = require('react-native-builder-bob/babel-config');
3-
const pkg = require('../package.json');
1+
const path = require("path");
2+
const { getConfig } = require("react-native-builder-bob/babel-config");
3+
const pkg = require("../package.json");
44

5-
const root = path.resolve(__dirname, '..');
5+
const root = path.resolve(__dirname, "..");
66

77
module.exports = getConfig(
88
{
9-
presets: ['module:@react-native/babel-preset'],
9+
presets: ["module:@react-native/babel-preset"],
10+
plugins: ["react-native-worklets/plugin"],
1011
},
11-
{ root, pkg }
12+
{ root, pkg },
1213
);

‎example/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"@react-native/new-app-screen": "0.81.1",
1414
"react": "19.1.0",
1515
"react-native": "0.81.1",
16-
"react-native-nitro-modules": "^0.28.1"
16+
"react-native-nitro-modules": "^0.28.1",
17+
"react-native-reanimated": "^4.1.3",
18+
"react-native-worklets": "^0.6.1"
1719
},
1820
"devDependencies": {
1921
"@babel/core": "^7.25.2",

‎example/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ StyleRegistry.addStyleSheet({
1313
d: [
1414
{
1515
color: "red",
16-
transitionProperty: "all",
16+
transitionProperty: "color",
1717
transitionDuration: "5s",
1818
},
1919
],
@@ -31,7 +31,7 @@ StyleRegistry.addStyleSheet({
3131
export default function App() {
3232
return (
3333
<View style={styles.container}>
34-
<Text className="text-red-500" style={{ fontSize: 30 }}>
34+
<Text className="text-red-500" style={{ fontSize: 30 }} disabled>
3535
Multiply: {multiply(3, 7)}
3636
</Text>
3737
</View>

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@
9393
"react-native": "0.82.0",
9494
"react-native-builder-bob": "^0.40.13",
9595
"react-native-nitro-modules": "^0.29.1",
96+
"react-native-reanimated": "^4.1.3",
97+
"react-native-worklets": "^0.6.1",
9698
"release-it": "^19.0.4",
9799
"turbo": "^2.5.6",
98100
"typescript": "^5.9.2",
@@ -101,7 +103,9 @@
101103
"peerDependencies": {
102104
"react": "*",
103105
"react-native": "*",
104-
"react-native-nitro-modules": "^0.29.1"
106+
"react-native-nitro-modules": "^0.29.1",
107+
"react-native-reanimated": "^4.1.3",
108+
"react-native-worklets": "^0.6.1"
105109
},
106110
"workspaces": [
107111
"example"
@@ -167,8 +171,5 @@
167171
"languages": "kotlin-swift",
168172
"type": "nitro-module",
169173
"version": "0.54.3"
170-
},
171-
"dependencies": {
172-
"react-native-reanimated": "^4.1.3"
173174
}
174175
}

‎src/components/Text/Text.native.tsx‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
1-
import { useId } from "react";
2-
import { Text as RNText, type TextProps } from "react-native";
1+
import { useId, type ComponentProps, type Ref } from "react";
2+
import { Text as RNText } from "react-native";
33

4+
import { createAnimatedComponent } from "react-native-reanimated";
5+
6+
import { useElement } from "../../native/useElement";
47
import { useDualRefs } from "../../native/useRef";
58
import { useStyledProps } from "../../native/useStyled";
69
import { StyleRegistry } from "../../specs/StyleRegistry";
710
import { copyComponentProperties, getDeepKeys } from "../../utils";
811

9-
export const Text = copyComponentProperties(RNText, (props: TextProps) => {
10-
const componentId = useId();
11-
12-
const style = useStyledProps(
13-
componentId,
14-
(props as Record<string, string>).className,
15-
props,
16-
);
17-
18-
const ref = useDualRefs(componentId, (props as Record<string, any>).ref);
19-
20-
if (props.style) {
21-
StyleRegistry.updateComponentInlineStyleKeys(
22-
componentId,
23-
getDeepKeys(props.style),
24-
);
25-
}
26-
27-
return (
28-
<RNText
29-
{...style.props}
30-
{...props}
31-
{...style.importantProps}
32-
ref={ref}
33-
style={
34-
style.style || style.importantStyle
35-
? [style.style, props.style, style.importantStyle]
36-
: props.style
37-
}
38-
/>
39-
);
40-
});
12+
const AnimatedText = createAnimatedComponent(RNText);
13+
14+
export const Text = copyComponentProperties(
15+
RNText,
16+
(
17+
p: ComponentProps<typeof AnimatedText> & {
18+
className?: string;
19+
ref?: Ref<RNText>;
20+
},
21+
) => {
22+
const componentId = useId();
23+
const styled = useStyledProps(componentId, p.className, p);
24+
25+
const ref = useDualRefs(componentId, p.ref);
26+
27+
if (p.style) {
28+
StyleRegistry.updateComponentInlineStyleKeys(
29+
componentId,
30+
getDeepKeys(p.style),
31+
);
32+
}
33+
34+
return useElement(AnimatedText, styled, {
35+
...styled.props,
36+
...p,
37+
...styled.importantProps,
38+
ref,
39+
style:
40+
styled.style || styled.importantStyle
41+
? [styled.style, p.style, styled.importantStyle]
42+
: p.style,
43+
});
44+
},
45+
);
4146

4247
export default Text;

‎src/native/useStyled.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,10 @@ export function useStyledProps(
4545
return {};
4646
}
4747

48-
console.log("validAttributeQueries before", validAttributeQueryIds);
49-
5048
const validAttributeQueries = validAttributeQueryIds.split(" ");
5149
// Remove the trailing empty string
5250
validAttributeQueries.pop();
5351

54-
console.log("validAttributeQueries", validAttributeQueries);
55-
5652
return StyleRegistry.registerComponent(
5753
componentId,
5854
rerender,

‎yarn.lock‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -623,7 +623,7 @@ __metadata:
623623
languageName: node
624624
linkType: hard
625625

626-
"@babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
626+
"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.24.7, @babel/plugin-transform-arrow-functions@npm:^7.27.1":
627627
version: 7.27.1
628628
resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1"
629629
dependencies:
@@ -682,7 +682,7 @@ __metadata:
682682
languageName: node
683683
linkType: hard
684684

685-
"@babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
685+
"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.4, @babel/plugin-transform-class-properties@npm:^7.27.1":
686686
version: 7.27.1
687687
resolution: "@babel/plugin-transform-class-properties@npm:7.27.1"
688688
dependencies:
@@ -706,7 +706,7 @@ __metadata:
706706
languageName: node
707707
linkType: hard
708708

709-
"@babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.3":
709+
"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.4, @babel/plugin-transform-classes@npm:^7.28.3":
710710
version: 7.28.4
711711
resolution: "@babel/plugin-transform-classes@npm:7.28.4"
712712
dependencies:
@@ -980,7 +980,7 @@ __metadata:
980980
languageName: node
981981
linkType: hard
982982

983-
"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
983+
"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.7, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
984984
version: 7.27.1
985985
resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
986986
dependencies:
@@ -1040,7 +1040,7 @@ __metadata:
10401040
languageName: node
10411041
linkType: hard
10421042

1043-
"@babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
1043+
"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.24.8, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
10441044
version: 7.27.1
10451045
resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
10461046
dependencies:
@@ -1220,7 +1220,7 @@ __metadata:
12201220
languageName: node
12211221
linkType: hard
12221222

1223-
"@babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
1223+
"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.24.7, @babel/plugin-transform-shorthand-properties@npm:^7.27.1":
12241224
version: 7.27.1
12251225
resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1"
12261226
dependencies:
@@ -1265,7 +1265,7 @@ __metadata:
12651265
languageName: node
12661266
linkType: hard
12671267

1268-
"@babel/plugin-transform-template-literals@npm:^7.27.1":
1268+
"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.27.1":
12691269
version: 7.27.1
12701270
resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
12711271
dependencies:
@@ -1325,7 +1325,7 @@ __metadata:
13251325
languageName: node
13261326
linkType: hard
13271327

1328-
"@babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
1328+
"@babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.24.7, @babel/plugin-transform-unicode-regex@npm:^7.27.1":
13291329
version: 7.27.1
13301330
resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1"
13311331
dependencies:
@@ -1458,7 +1458,7 @@ __metadata:
14581458
languageName: node
14591459
linkType: hard
14601460

1461-
"@babel/preset-typescript@npm:^7.24.7":
1461+
"@babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.24.7":
14621462
version: 7.27.1
14631463
resolution: "@babel/preset-typescript@npm:7.27.1"
14641464
dependencies:
@@ -10617,6 +10617,8 @@ __metadata:
1061710617
react-native-builder-bob: ^0.40.13
1061810618
react-native-monorepo-config: ^0.1.9
1061910619
react-native-nitro-modules: ^0.28.1
10620+
react-native-reanimated: ^4.1.3
10621+
react-native-worklets: ^0.6.1
1062010622
languageName: unknown
1062110623
linkType: soft
1062210624

@@ -10650,6 +10652,7 @@ __metadata:
1065010652
react-native-builder-bob: ^0.40.13
1065110653
react-native-nitro-modules: ^0.29.1
1065210654
react-native-reanimated: ^4.1.3
10655+
react-native-worklets: ^0.6.1
1065310656
release-it: ^19.0.4
1065410657
turbo: ^2.5.6
1065510658
typescript: ^5.9.2
@@ -10658,6 +10661,8 @@ __metadata:
1065810661
react: "*"
1065910662
react-native: "*"
1066010663
react-native-nitro-modules: ^0.29.1
10664+
react-native-reanimated: ^4.1.3
10665+
react-native-worklets: ^0.6.1
1066110666
languageName: unknown
1066210667
linkType: soft
1066310668

@@ -10716,6 +10721,29 @@ __metadata:
1071610721
languageName: node
1071710722
linkType: hard
1071810723

10724+
"react-native-worklets@npm:^0.6.1":
10725+
version: 0.6.1
10726+
resolution: "react-native-worklets@npm:0.6.1"
10727+
dependencies:
10728+
"@babel/plugin-transform-arrow-functions": ^7.0.0-0
10729+
"@babel/plugin-transform-class-properties": ^7.0.0-0
10730+
"@babel/plugin-transform-classes": ^7.0.0-0
10731+
"@babel/plugin-transform-nullish-coalescing-operator": ^7.0.0-0
10732+
"@babel/plugin-transform-optional-chaining": ^7.0.0-0
10733+
"@babel/plugin-transform-shorthand-properties": ^7.0.0-0
10734+
"@babel/plugin-transform-template-literals": ^7.0.0-0
10735+
"@babel/plugin-transform-unicode-regex": ^7.0.0-0
10736+
"@babel/preset-typescript": ^7.16.7
10737+
convert-source-map: ^2.0.0
10738+
semver: 7.7.2
10739+
peerDependencies:
10740+
"@babel/core": ^7.0.0-0
10741+
react: "*"
10742+
react-native: "*"
10743+
checksum: fee8de844ef2286dee9f81a53f9cf309424d26251953c8524204342c8531fef403c625a23632a6bb65ea57409d6f8522a60e02de772322bebb5ff4aa4cccf569
10744+
languageName: node
10745+
linkType: hard
10746+
1071910747
"react-native@npm:0.81.1":
1072010748
version: 0.81.1
1072110749
resolution: "react-native@npm:0.81.1"

0 commit comments

Comments
 (0)