Skip to content

upgrade to React 19, refactor interactions, cleanup data #1754

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Simek merged 1 commit into from
Jul 6, 2025
Merged

upgrade to React 19, refactor interactions, cleanup data #1754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 108 additions & 109 deletions bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

54 changes: 25 additions & 29 deletions common/styleguide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import * as HtmlElements from '@expo/html-elements';
import Link from 'next/link';
import { PropsWithChildren, PropsWithRef, useContext, useRef } from 'react';
import { StyleSheet, TextStyle, View } from 'react-native';
import { useHover, useDimensions, useActive } from 'react-native-web-hooks';
import { PropsWithChildren, useContext, useState } from 'react';
import { StyleSheet, TextStyle, View, useWindowDimensions } from 'react-native';

import CustomAppearanceContext from '../context/CustomAppearanceContext';

Expand All @@ -11,9 +10,7 @@ export const layout = {
};

export const useLayout = () => {
const {
window: { width },
} = useDimensions();
const { width } = useWindowDimensions();
return {
isSmallScreen: width < 800,
isBelowMaxWidth: width < layout.maxWidth,
Expand Down Expand Up @@ -80,13 +77,11 @@ const textStyles = StyleSheet.create({

type TextStyles = TextStyle | TextStyle[];

type TextProps = PropsWithRef<
PropsWithChildren<{
style?: TextStyles;
id?: string;
numberOfLines?: number;
}>
>;
type TextProps = PropsWithChildren<{
style?: TextStyles;
id?: string;
numberOfLines?: number;
}>;

const createTextComponent = (Element: any, textStyle?: TextStyles) => {
const TextComponent = ({ children, style, id, numberOfLines }: TextProps) => {
Expand Down Expand Up @@ -130,8 +125,7 @@ type AProps = PropsWithChildren<{

export const A = ({ href, target = '_blank', children, style, hoverStyle, ...rest }: AProps) => {
const { isDark } = useContext(CustomAppearanceContext);
const linkRef = useRef();
const isHovered = useHover(linkRef);
const [isHovered, setIsHovered] = useState(false);

const linkStyles = getLinkStyles(isDark);
const linkHoverStyles = getLinkHoverStyles(isDark);
Expand All @@ -146,22 +140,22 @@ export const A = ({ href, target = '_blank', children, style, hoverStyle, ...res
...(isHovered && linkHoverStyles),
...(style as any),
...(isHovered && hoverStyle),
}}
ref={linkRef}>
}}>
{children}
</Link>
);
}

return (
<HtmlElements.A
{...rest}
href={href}
target={target}
style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}
ref={linkRef}>
{children}
</HtmlElements.A>
<View onPointerEnter={() => setIsHovered(true)} onPointerLeave={() => setIsHovered(false)}>
<HtmlElements.A
{...rest}
href={href}
hrefAttrs={{ target }}
style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}>
{children}
</HtmlElements.A>
</View>
);
};

Expand All @@ -180,14 +174,16 @@ const getLinkHoverStyles = (isDark: boolean) => ({
});

export const HoverEffect = ({ children }) => {
const ref = useRef();
const isHovered = useHover(ref);
const isActive = useActive(ref);
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);

return (
<View
ref={ref}
style={[isHovered && { opacity: 0.8 }, isActive && { opacity: 0.5 }]}
onPointerEnter={() => setIsHovered(true)}
onPointerLeave={() => setIsHovered(false)}
onPointerDown={() => setIsActive(true)}
onPointerUp={() => setIsActive(false)}
accessible={false}>
{children}
</View>
Expand Down
18 changes: 9 additions & 9 deletions components/Filters/ClearButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { useRef } from 'react';
import { Pressable } from 'react-native';
import { useHover } from 'react-native-web-hooks';
import { useState } from 'react';
import { Pressable, PressableProps } from 'react-native';

import { colors } from '~/common/styleguide';

import { XIcon } from '../Icons';
import Tooltip from '../Tooltip';

type ClearButtonProps = {
onPress: () => void;
};
type ClearButtonProps = Pick<PressableProps, 'onPress'>;

export const ClearButton = ({ onPress }: ClearButtonProps) => {
const xIconRef = useRef();
const isXIconHovered = useHover(xIconRef);
const [isXIconHovered, setIsXIconHovered] = useState(false);
return (
<Tooltip
sideOffset={8}
trigger={
<Pressable ref={xIconRef} onPress={onPress} aria-label="Clear all">
<Pressable
onHoverIn={() => setIsXIconHovered(true)}
onHoverOut={() => setIsXIconHovered(false)}
onPress={onPress}
aria-label="Clear all">
<XIcon fill={isXIconHovered ? colors.primary : colors.white} width={12} height={12} />
</Pressable>
}>
Expand Down
10 changes: 4 additions & 6 deletions components/Sort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { Picker } from '@react-native-picker/picker';
import Router from 'next/router';
import { useContext, useEffect, useRef, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { useHover } from 'react-native-web-hooks';

import { colors, darkColors, P } from '~/common/styleguide';
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
Expand Down Expand Up @@ -57,11 +56,9 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
const [paginationOffset, setPaginationOffset] = useState<number | undefined>(
typeof offset === 'string' ? parseInt(offset, 10) : offset
);
const [isSortIconHovered, setIsSortIconHovered] = useState(false);
const { isDark } = useContext(CustomAppearanceContext);

const sortIconRef = useRef();
const isSortIconHovered = useHover(sortIconRef);

useEffect(() => {
const url = urlWithQuery('/', {
...query,
Expand All @@ -86,7 +83,8 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
sideOffset={8}
trigger={
<Pressable
ref={sortIconRef}
onHoverIn={() => setIsSortIconHovered(true)}
onHoverOut={() => setIsSortIconHovered(false)}
style={sortDirection === 'ascending' && styles.flippedIcon}
aria-label="Toggle sort direction"
onPress={() => {
Expand Down
41 changes: 20 additions & 21 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,43 +17,42 @@
"precommit": "simple-git-hooks && lint-staged"
},
"dependencies": {
"@expo/html-elements": "0.12.2",
"@expo/html-elements": "^0.12.5",
"@expo/match-media": "^0.4.0",
"@radix-ui/react-hover-card": "^1.1.7",
"@radix-ui/react-tooltip": "^1.2.0",
"@react-native-async-storage/async-storage": "^2.1.2",
"@radix-ui/react-hover-card": "^1.1.14",
"@radix-ui/react-tooltip": "^1.2.7",
"@react-native-async-storage/async-storage": "^2.2.0",
"@react-native-picker/picker": "^2.11.1",
"@sentry/react": "^8.46.0",
"@sentry/react": "^9.35.0",
"@vercel/blob": "^0.27.3",
"expo": "^53.0.13",
"expo-font": "~13.3.1",
"expo": "53.0.17",
"expo-font": "~13.3.2",
"lodash": "^4.17.21",
"next": "^15.3.4",
"next": "^15.3.5",
"node-emoji": "^2.2.0",
"react": "^18.3.1",
"react": "19.0.0",
"react-content-loader": "^7.0.2",
"react-dom": "^18.3.1",
"react-dom": "19.0.0",
"react-easy-linkify": "^1.0.8",
"react-native": "0.79.4",
"react-native-safe-area-context": "^5.4.0",
"react-native-svg": "^15.11.2",
"react-native": "0.79.5",
"react-native-safe-area-context": "^5.5.1",
"react-native-svg": "^15.12.0",
"react-native-web": "^0.20.0",
"react-native-web-hooks": "^3.0.2",
"use-debounce": "^10.0.5"
},
"devDependencies": {
"@expo/next-adapter": "^6.0.0",
"@next/bundle-analyzer": "^15.3.4",
"@types/bun": "^1.2.17",
"@types/lodash": "^4.17.19",
"@types/react": "^18.3.12",
"@next/bundle-analyzer": "^15.3.5",
"@types/bun": "^1.2.18",
"@types/lodash": "^4.17.20",
"@types/react": "~19.0.10",
"ajv-cli": "^5.0.0",
"browserslist": "^4.25.1",
"cheerio": "^1.1.0",
"cross-fetch": "^4.1.0",
"dotenv": "^16.4.7",
"eslint": "^9.29.0",
"eslint-config-next": "^15.3.4",
"dotenv": "^17.0.1",
"eslint": "^9.30.1",
"eslint-config-next": "^15.3.5",
"eslint-config-universe": "^15.0.3",
"lint-staged": "^15.5.1",
"next-compose-plugins": "^2.2.1",
Expand Down
4 changes: 3 additions & 1 deletion pages/api/libraries/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {

const relevanceSortedLibraries =
querySearch?.length && (!req.query.order || req.query.order === 'relevance')
? Sorting.relevance([...filteredLibraries])
? sortDirection === 'ascending'
? Sorting.relevance([...filteredLibraries]).reverse()
: Sorting.relevance([...filteredLibraries])
: filteredLibraries;
const filteredAndPaginatedLibraries = take(drop(relevanceSortedLibraries, offset), limit);

Expand Down
41 changes: 13 additions & 28 deletions react-native-libraries.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4335,7 +4335,11 @@
"newArchitecture": false,
"newArchitectureNote": "Microsoft no longer maintains this library and has no plans to add New Architecture support.",
"unmaintained": true,
"alternatives": ["@appzung/react-native-code-push", "@bravemobile/react-native-code-push", "expo-updates"]
"alternatives": [
"@appzung/react-native-code-push",
"@bravemobile/react-native-code-push",
"expo-updates"
]
},
{
"githubUrl": "https://github.com/plmok61/react-navigation-transitions",
Expand Down Expand Up @@ -15942,9 +15946,7 @@
{
"githubUrl": "https://github.com/sjwall/react-native-aria-description/tree/main/lib",
"npmPkg": "react-native-aria-description",
"examples": [
"https://github.com/sjwall/react-native-aria-description/tree/main/example"
],
"examples": ["https://github.com/sjwall/react-native-aria-description/tree/main/example"],
"ios": true,
"android": true,
"web": true,
Expand All @@ -15953,7 +15955,6 @@
},
{
"githubUrl": "https://github.com/primus/eventemitter3",
"npmPkg": "eventemitter3",
"ios": true,
"android": true,
"web": true,
Expand All @@ -15962,7 +15963,6 @@
},
{
"githubUrl": "https://github.com/theboringlok/react-native-place-autocomplete-picker",
"npmPkg": "react-native-place-autocomplete-picker",
"examples": [
"https://github.com/theboringlok/react-native-place-autocomplete-picker/tree/main/example"
],
Expand All @@ -15976,13 +15976,11 @@
},
{
"githubUrl": "https://github.com/superwall/expo-superwall",
"examples": [
"https://github.com/superwall/expo-superwall/tree/main/example"
],
"examples": ["https://github.com/superwall/expo-superwall/tree/main/example"],
"ios": true,
"android": true,
"newArchitecture": true
},
},
{
"githubUrl": "https://github.com/SolankiYogesh/rn-turbo-location-enabler",
"examples": ["https://github.com/SolankiYogesh/rn-turbo-location-enabler/tree/main/example"],
Expand All @@ -15992,19 +15990,15 @@
{
"githubUrl": "https://github.com/Iterable/react-native-sdk",
"npmPkg": "@iterable/react-native-sdk",
"examples": [
"https://github.com/Iterable/react-native-sdk/tree/master/example"
],
"examples": ["https://github.com/Iterable/react-native-sdk/tree/master/example"],
"ios": true,
"android": true,
"newArchitecture": true
},
{
"githubUrl": "https://github.com/Iterable/iterable-expo-plugin",
"npmPkg": "@iterable/expo-plugin",
"examples": [
"https://github.com/Iterable/iterable-expo-plugin/tree/main/example"
],
"examples": ["https://github.com/Iterable/iterable-expo-plugin/tree/main/example"],
"ios": true,
"android": true,
"newArchitecture": false
Expand All @@ -16022,21 +16016,15 @@
{
"githubUrl": "https://github.com/moyasar/moyasar-react-native",
"npmPkg": "react-native-moyasar-sdk",
"examples": [
"https://github.com/moyasar/moyasar-react-native/tree/main/example"
],
"examples": ["https://github.com/moyasar/moyasar-react-native/tree/main/example"],
"ios": true,
"android": true
},
{
"githubUrl": "https://github.com/cornejobarraza/expo-libvlc-player",
"npmPkg": "expo-libvlc-player",
"examples": [
"https://github.com/cornejobarraza/expo-libvlc-player/tree/master/example"
],
"examples": ["https://github.com/cornejobarraza/expo-libvlc-player/tree/master/example"],
"ios": true,
"android": true,
"expoGo": false,
"newArchitecture": true
},
{
Expand All @@ -16056,10 +16044,7 @@
},
{
"githubUrl": "https://github.com/cashfree/react-native-cashfree-pg-sdk",
"npmPkg": "react-native-cashfree-pg-sdk",
"examples": [
"https://github.com/cashfree/react-native-cashfree-pg-sdk/tree/master/example"
],
"examples": ["https://github.com/cashfree/react-native-cashfree-pg-sdk/tree/master/example"],
"ios": true,
"android": true
}
Expand Down