From fdc88bf1e0227cd1daaa2a853e6ca29ac6835234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?= Date: Mon, 27 Jan 2025 18:21:56 +0100 Subject: [PATCH] Some progress --- apps/common-app/src/App.tsx | 29 +++++++++++-------- .../appearance/colors/ColorProperties.tsx | 20 +++++++++++++ apps/web-example/metro.config.js | 8 ++++- apps/web-example/tsconfig.json | 1 - .../CSS/config/PropertyInterpolatorsConfig.h | 1 + .../css/managers/CSSAnimationsManager.web.ts | 1 - .../src/css/platform/native/config.ts | 2 +- .../src/css/platform/web/config.ts | 8 ++--- .../src/propsAllowlists.ts | 3 +- 9 files changed, 52 insertions(+), 21 deletions(-) diff --git a/apps/common-app/src/App.tsx b/apps/common-app/src/App.tsx index 17a8dba4bfcb..f6ccee1beff4 100644 --- a/apps/common-app/src/App.tsx +++ b/apps/common-app/src/App.tsx @@ -7,7 +7,7 @@ import { NavigationContainer, } from '@react-navigation/native'; import { useCallback, useEffect, useState } from 'react'; -import { ActivityIndicator, Linking, Platform, View } from 'react-native'; +import { ActivityIndicator, Linking, View } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { SafeAreaProvider } from 'react-native-safe-area-context'; @@ -116,7 +116,11 @@ function useNavigationState() { >(); const updateNavigationState = useCallback((state?: NavigationState) => { - AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch(noop); + if (IS_WEB) { + localStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)); + } else { + AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch(noop); + } }, []); useEffect(() => { @@ -124,16 +128,17 @@ function useNavigationState() { try { const initialUrl = await Linking.getInitialURL(); - if ( - Platform.OS !== 'web' && - Platform.OS !== 'macos' && - initialUrl === null - ) { - // Only restore state if there's no deep link and we're not on web - const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY); - // Erase the state immediately after fetching it. - // This prevents the app to boot on the screen that previously crashed. - updateNavigationState(); + if (!IS_MACOS && (IS_WEB || initialUrl === null)) { + const savedStateString = IS_WEB + ? localStorage.getItem(PERSISTENCE_KEY) + : await AsyncStorage.getItem(PERSISTENCE_KEY); + + if (!IS_WEB) { + // Erase the state immediately after fetching it. + // This prevents the app to boot on the screen that previously crashed. + updateNavigationState(); + } + const state = savedStateString ? (JSON.parse(savedStateString) as NavigationState) : undefined; diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx index af18731dfb65..41a1d140cffd 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx @@ -296,6 +296,26 @@ function OtherColors() { shadowRadius: spacing.sm, }} /> + (BLACK)}, {"borderBlockColor", value(BLACK)}, // Other + {"outlineColor", value(BLACK)}, {"shadowColor", value(BLACK)}, {"overlayColor", value(BLACK)}, {"tintColor", value(BLACK)}, diff --git a/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts b/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts index 08a629b3d48e..03e7cd485166 100644 --- a/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts +++ b/packages/react-native-reanimated/src/css/managers/CSSAnimationsManager.web.ts @@ -129,7 +129,6 @@ export default class CSSAnimationsManager { const rule = processedAnimation.keyframesRule; if (rule.processedKeyframes) { // We always call insert as it will insert animation only if it doesn't exist - console.log('insertCSSAnimation', rule.name, rule.processedKeyframes); insertCSSAnimation(rule.name, rule.processedKeyframes); } newAttachedAnimations[rule.processedKeyframes] = processedAnimation; diff --git a/packages/react-native-reanimated/src/css/platform/native/config.ts b/packages/react-native-reanimated/src/css/platform/native/config.ts index cb403494fbb1..8aab9877b24f 100644 --- a/packages/react-native-reanimated/src/css/platform/native/config.ts +++ b/packages/react-native-reanimated/src/css/platform/native/config.ts @@ -124,7 +124,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig = { borderStartColor: colorAttributes, borderBlockColor: colorAttributes, // Other - outlineColor: false, // TODO + outlineColor: colorAttributes, shadowColor: colorAttributes, overlayColor: IS_ANDROID ? colorAttributes : false, tintColor: colorAttributes, diff --git a/packages/react-native-reanimated/src/css/platform/web/config.ts b/packages/react-native-reanimated/src/css/platform/web/config.ts index 4528aaf06aa4..31ba459ef9b7 100644 --- a/packages/react-native-reanimated/src/css/platform/web/config.ts +++ b/packages/react-native-reanimated/src/css/platform/web/config.ts @@ -125,7 +125,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig = { borderStartColor: { as: 'borderLeftColor' }, borderBlockColor: colorAttributes, // Other - outlineColor: false, // TODO + outlineColor: colorAttributes, shadowColor: boxShadowBuilder, overlayColor: colorAttributes, tintColor: colorAttributes, @@ -178,9 +178,9 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig = { borderStyle: true, // OUTLINES - outlineOffset: false, // TODO - outlineStyle: false, // TODO - outlineWidth: false, // TODO + outlineOffset: 'px', + outlineStyle: true, + outlineWidth: 'px', // TRANSFORMS transformOrigin: { process: processTransformOrigin }, diff --git a/packages/react-native-reanimated/src/propsAllowlists.ts b/packages/react-native-reanimated/src/propsAllowlists.ts index d3b9d789908f..d2b916bc7679 100644 --- a/packages/react-native-reanimated/src/propsAllowlists.ts +++ b/packages/react-native-reanimated/src/propsAllowlists.ts @@ -22,6 +22,8 @@ export const PropsAllowlists: AllowlistsHolder = { /* ios styles */ shadowOpacity: true, shadowRadius: true, + outlineColor: true, + shadowColor: true, /* legacy android transform properties */ scaleX: true, scaleY: true, @@ -124,7 +126,6 @@ export const PropsAllowlists: AllowlistsHolder = { /* text color */ color: true, tintColor: true, - shadowColor: true, textShadowColor: true, placeholderTextColor: true, textDecorationColor: true,