Skip to content

Commit e9249d8

Browse files
efokenefoken
committed
Update dependencies and use native Unistyles components
1 parent 2c0a461 commit e9249d8

File tree

13 files changed

+328
-565
lines changed

13 files changed

+328
-565
lines changed

‎.yarn/patches/react-native-unistyles-npm-3.0.4-aafc14d3f4.patch‎

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

‎@types/react-native-unistyles.d.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
declare module 'react-native-unistyles/components/native/Image' {
2+
export { Image } from 'react-native';
3+
}
4+
5+
declare module 'react-native-unistyles/components/native/Pressable' {
6+
export { Pressable } from 'react-native';
7+
}
8+
9+
declare module 'react-native-unistyles/components/native/ScrollView' {
10+
export { ScrollView } from 'react-native';
11+
}
12+
13+
declare module 'react-native-unistyles/components/native/Text' {
14+
export { Text } from 'react-native';
15+
}
16+
17+
declare module 'react-native-unistyles/components/native/TextInput' {
18+
export { TextInput } from 'react-native';
19+
}
20+
21+
declare module 'react-native-unistyles/components/native/View' {
22+
export { View } from 'react-native';
23+
}

‎app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"react-native-edge-to-edge": "1.6.0",
2828
"react-native-nitro-modules": "0.26.3",
2929
"react-native-svg": "15.12.0",
30-
"react-native-unistyles": "patch:react-native-unistyles@npm%3A3.0.4#~/.yarn/patches/react-native-unistyles-npm-3.0.4-aafc14d3f4.patch",
30+
"react-native-unistyles": "3.0.4",
3131
"react-refresh": "^0.14.2"
3232
},
3333
"devDependencies": {
@@ -36,6 +36,6 @@
3636
"@expo/metro-runtime": "6.0.0-canary-20250713-8f814f8",
3737
"@types/babel__core": "^7.20.5",
3838
"metro-runtime": "0.82.4",
39-
"typescript": "~5.8.3"
39+
"typescript": "~5.9.2"
4040
}
4141
}

‎app/src/App.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ const Card = styled(View)(({ theme }) => ({
4848
boxShadow: '0 0 16px rgba(0, 0, 0, 0.08)',
4949
flexGrow: 1,
5050
padding: theme.space[5],
51-
width: '40%',
51+
width: {
52+
xs: '100%',
53+
md: '40%',
54+
},
5255
}));
5356

5457
export default function App() {
@@ -58,9 +61,9 @@ export default function App() {
5861

5962
return (
6063
<UniversalProvider>
61-
<View>
64+
<View sx={{ flex: 1 }}>
6265
<StatusBar style="auto" />
63-
<ScrollView>
66+
<ScrollView sx={{ flex: 1 }}>
6467
<Svg
6568
sx={{
6669
aspectRatio: 620 / 472,

‎docs/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
"@react-universal/core": "workspace:*",
1717
"@react-universal/elements": "workspace:*",
1818
"@react-universal/next": "workspace:*",
19-
"@shikijs/rehype": "^3.8.0",
20-
"@types/node": "^22.16.3",
19+
"@shikijs/rehype": "^3.9.2",
20+
"@types/node": "^22.17.0",
2121
"@types/react": "~19.1.9",
22-
"@types/react-dom": "~19.1.6",
23-
"next": "^15.3.5",
22+
"@types/react-dom": "~19.1.7",
23+
"next": "^15.4.5",
2424
"react": "19.1.0",
2525
"react-dom": "19.1.0",
2626
"react-icons": "^5.5.0",
@@ -29,7 +29,7 @@
2929
"remark-directive": "^4.0.0",
3030
"remark-gfm": "^4.0.1",
3131
"scule": "^1.3.0",
32-
"typescript": "~5.8.3",
32+
"typescript": "~5.9.2",
3333
"unified": "^11.0.5",
3434
"velite": "^0.2.4"
3535
}

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"@biomejs/biome": "^2.1.3",
2525
"@chialab/esbuild-plugin-babel": "^0.18.0",
2626
"@emotion/jest": "^11.13.0",
27-
"@manypkg/cli": "^0.25.0",
2827
"@react-native/normalize-colors": "0.80.1",
2928
"@storybook/addon-a11y": "^9.1.1",
3029
"@storybook/react-vite": "^9.1.1",
@@ -43,13 +42,13 @@
4342
"react-native": "0.80.1",
4443
"react-native-edge-to-edge": "1.6.0",
4544
"react-native-nitro-modules": "0.26.3",
46-
"react-native-unistyles": "patch:react-native-unistyles@npm%3A3.0.4#~/.yarn/patches/react-native-unistyles-npm-3.0.4-aafc14d3f4.patch",
45+
"react-native-unistyles": "3.0.4",
4746
"react-test-renderer": "19.1.0",
4847
"sort-package-json": "^3.4.0",
4948
"storybook": "^9.1.1",
5049
"syncpack": "^14.0.0-alpha.19",
5150
"tsup": "^8.5.0",
52-
"typescript": "~5.8.3",
51+
"typescript": "~5.9.2",
5352
"vite": "^7.0.6",
5453
"vitest": "^3.2.4"
5554
},

‎packages/components/src/Popover/Popover.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,8 @@ export const Popover: React.FC<
113113
useEffect(() => {
114114
const hostEl = hostRef.current;
115115
if (hostEl != null) {
116-
// @ts-expect-error: TypeScript DOM types don't have `beforetoggle` event
117116
hostEl.addEventListener('beforetoggle', handleBeforeToggle);
118117
return () => {
119-
// @ts-expect-error: TypeScript DOM types don't have `beforetoggle` event
120118
hostEl.removeEventListener('beforetoggle', handleBeforeToggle);
121119
};
122120
}

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"react-native": "0.80.1",
4242
"react-native-edge-to-edge": "1.6.0",
4343
"react-native-nitro-modules": "0.26.3",
44-
"react-native-unistyles": "patch:react-native-unistyles@npm%3A3.0.4#~/.yarn/patches/react-native-unistyles-npm-3.0.4-aafc14d3f4.patch"
44+
"react-native-unistyles": "3.0.4"
4545
},
4646
"peerDependencies": {
4747
"@types/react": "^19.0.0",

‎packages/core/src/styled.native.tsx‎

Lines changed: 29 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
11
import type { AnyObject } from '@react-universal/utils';
2-
import { isArray, isFunction, isString, noop } from '@react-universal/utils';
3-
import { useRef } from 'react';
4-
import { UnistylesShadowRegistry } from 'react-native-unistyles';
2+
import { isFunction, isObject, isString } from '@react-universal/utils';
3+
import {
4+
Image as RNImage,
5+
Pressable as RNPressable,
6+
ScrollView as RNScrollView,
7+
Text as RNText,
8+
TextInput as RNTextInput,
9+
View as RNView,
10+
} from 'react-native';
11+
import { Image as UnistylesImage } from 'react-native-unistyles/components/native/Image';
12+
import { Pressable as UnistylesPressable } from 'react-native-unistyles/components/native/Pressable';
13+
import { ScrollView as UnistylesScrollView } from 'react-native-unistyles/components/native/ScrollView';
14+
import { Text as UnistylesText } from 'react-native-unistyles/components/native/Text';
15+
import { TextInput as UnistylesTextInput } from 'react-native-unistyles/components/native/TextInput';
16+
import { View as UnistylesView } from 'react-native-unistyles/components/native/View';
517
import { createElement } from './createElement';
618
import { useStyles } from './hooks/useStyles';
719
import type { CreateStyledComponent, StyledOptions } from './styled.types';
820
import type { StyleInterpolation, StyleProp } from './types';
9-
import { passRef } from './utils/passRef';
1021

1122
export function defaultShouldForwardProp(prop: string) {
1223
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
1324
}
1425

15-
function maybeWarnAboutMultipleUnistyles(style: AnyObject, displayName = 'Unknown') {
16-
if (process.env.NODE_ENV !== 'production' && isArray(style)) {
17-
const unistylesKeys = Object.keys(style).filter((key) => key.startsWith('unistyles_'));
18-
19-
if (unistylesKeys.length > 1) {
20-
console.warn(
21-
`React Universal: We detected style object with ${unistylesKeys.length} Unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`,
22-
);
23-
}
24-
}
25-
}
26+
const componentsMap = new Map<React.ComponentType<any>, React.ComponentType<any>>([
27+
[RNImage, UnistylesImage],
28+
[RNPressable, UnistylesPressable],
29+
[RNScrollView, UnistylesScrollView],
30+
[RNText, UnistylesText],
31+
[RNTextInput, UnistylesTextInput],
32+
[RNView, UnistylesView],
33+
]);
2634

2735
export function styled<T extends React.ComponentClass<React.ComponentProps<T>>>(
2836
component: T,
@@ -58,7 +66,11 @@ export function styled<T extends React.ComponentType<React.ComponentProps<T>>>(
5866
style?: StyleProp<AnyObject>;
5967
}
6068
> = ({ ref, style, ...props }) => {
61-
const Component = shouldUseAs ? (props.as ?? component) : component;
69+
const _component = shouldUseAs ? (props.as ?? component) : component;
70+
71+
const Component = isObject(_component)
72+
? (componentsMap.get(_component) ?? _component)
73+
: _component;
6274

6375
const _style = useStyles(styles, { ...props, id, skipSx });
6476

@@ -73,38 +85,7 @@ export function styled<T extends React.ComponentType<React.ComponentProps<T>>>(
7385
}
7486
}
7587

76-
const scrollViewRef = useRef<any>(null);
77-
78-
// newProps.ref = ref;
79-
newProps.ref = (node: T) => {
80-
maybeWarnAboutMultipleUnistyles(_style, component.displayName);
81-
82-
// https://github.com/facebook/react-native/issues/51878
83-
// Tested with ScrollView, Animated ScrollView and Reanimated ScrollView
84-
if (component.displayName === 'ScrollView') {
85-
if (node != null) {
86-
scrollViewRef.current = node as any;
87-
} else {
88-
// @ts-expect-error: `remove` is hidden from types
89-
UnistylesShadowRegistry.remove(scrollViewRef.current);
90-
scrollViewRef.current = null;
91-
return noop;
92-
}
93-
}
94-
95-
return passRef(
96-
node,
97-
ref as React.Ref<T>,
98-
() => {
99-
// @ts-expect-error: `add` is hidden from types
100-
UnistylesShadowRegistry.add(node, _style);
101-
},
102-
() => {
103-
// @ts-expect-error: `remove` is hidden from types
104-
UnistylesShadowRegistry.remove(node);
105-
},
106-
);
107-
};
88+
newProps.ref = ref;
10889
newProps.style = isFunction(style) ? (state: any) => [_style, style(state)] : [_style, style];
10990

11091
return createElement(Component, newProps);

‎packages/next/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"next-themes": "^0.4.6"
4242
},
4343
"devDependencies": {
44-
"next": "^15.3.5",
44+
"next": "^15.4.5",
4545
"react": "19.1.0",
4646
"react-dom": "19.1.0"
4747
},

0 commit comments

Comments
 (0)