Some progress

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,24 +116,29 @@ 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(() => {
     const restoreState = async () => {
       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;

apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/appearance/colors/ColorProperties.tsx

@@ -296,6 +296,26 @@ function OtherColors() {
             shadowRadius: spacing.sm,
           }}
         />
+        <ViewExample
+          title="outlineColor"
+          animation={{
+            animationName: {
+              from: {
+                outlineColor: 'red',
+              },
+              to: {
+                outlineColor: 'cyan',
+              },
+            },
+            ...sharedConfig,
+          }}
+          style={{
+            backgroundColor: colors.primary,
+            outlineOffset: spacing.xs,
+            outlineStyle: 'solid',
+            outlineWidth: spacing.xs,
+          }}
+        />
         <ImageExample
           labelTypes={['iOS', 'Android']}
           source={splashImage}

apps/web-example/metro.config.js

@@ -11,17 +11,23 @@ const escape = require('escape-string-regexp');
 const projectRoot = __dirname;
 // This can be replaced with `find-yarn-workspace-root`
 const monorepoRoot = path.resolve(projectRoot, '../..');
+const libraryRoot = path.resolve(monorepoRoot, './packages/react-native-reanimated');
 
 const config = getDefaultConfig(projectRoot);
 // 1. Watch all files within the monorepo
-config.watchFolders = [monorepoRoot];
+config.watchFolders = [monorepoRoot, libraryRoot];
 // 2. Let Metro know where to resolve packages and in what order
 // @ts-expect-error
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, 'node_modules'),
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
+config.resolver.extraNodeModules = {
+  ...config.resolver.extraNodeModules,
+  'react-native-reanimated': path.resolve(libraryRoot, 'src'),
+};
+
 const hasReactNative = require.resolve('react-native/package.json', {
   paths: [projectRoot],
 });

apps/web-example/tsconfig.json

@@ -5,7 +5,6 @@
     "baseUrl": "../..",
     "paths": {
       "@/*": ["./apps/common-app/src/*"]
-      // "react-native-reanimated": ["./packages/react-native-reanimated/src"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx"]

packages/react-native-reanimated/Common/cpp/reanimated/CSS/config/PropertyInterpolatorsConfig.h

@@ -143,6 +143,7 @@ const InterpolatorFactoriesRecord PROPERTY_INTERPOLATORS_CONFIG = []() {
       {"borderStartColor", value<CSSColor>(BLACK)},
       {"borderBlockColor", value<CSSColor>(BLACK)},
       // Other
+      {"outlineColor", value<CSSColor>(BLACK)},
       {"shadowColor", value<CSSColor>(BLACK)},
       {"overlayColor", value<CSSColor>(BLACK)},
       {"tintColor", value<CSSColor>(BLACK)},

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;

packages/react-native-reanimated/src/css/platform/native/config.ts

@@ -124,7 +124,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   borderStartColor: colorAttributes,
   borderBlockColor: colorAttributes,
   // Other
-  outlineColor: false, // TODO
+  outlineColor: colorAttributes,
   shadowColor: colorAttributes,
   overlayColor: IS_ANDROID ? colorAttributes : false,
   tintColor: colorAttributes,

packages/react-native-reanimated/src/css/platform/web/config.ts

@@ -125,7 +125,7 @@ export const PROPERTIES_CONFIG: StyleBuilderConfig<PlainStyle> = {
   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<PlainStyle> = {
   borderStyle: true,
 
   // OUTLINES
-  outlineOffset: false, // TODO
-  outlineStyle: false, // TODO
-  outlineWidth: false, // TODO
+  outlineOffset: 'px',
+  outlineStyle: true,
+  outlineWidth: 'px',
 
   // TRANSFORMS
   transformOrigin: { process: processTransformOrigin },

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,