feat: add web support via CSS transitions (#3)

* feat: add web support via CSS transitions

Implement EaseView.web.tsx that uses CSS transitions for timing animations,
CSS @Keyframes for loop animations, and a timing approximation for springs.
React Native's .web.tsx resolution automatically picks this up on web.

* feat(example): add Expo for web support

Install expo and web dependencies (react-dom, react-native-web,
@expo/metro-runtime) to enable running the example app on web
via `npx expo start --web`.

* chore(example): expo web setup - fix web entry config

* fix(web): use StyleSheet.flatten to resolve RN style IDs/arrays

The web EaseView receives RN StyleSheet numeric IDs and style arrays,
but was trying to spread them directly as React.CSSProperties. Spreading
an array gives {0: id} which caused:
  TypeError: Failed to set an indexed property [0] on CSSStyleDeclaration

Fix: use StyleSheet.flatten() to resolve any RN StyleProp to a plain
object before spreading into computedStyle.

* refactor(web): use View from react-native instead of raw div

Replace the raw <div> with react-native View which:
- Handles StyleSheet flattening automatically (no more manual flattenStyle)
- Accepts StyleProp<ViewStyle> natively
- Converts RN transform arrays to CSS transforms via react-native-web
- Properly handles all RN style types (numeric IDs, arrays, objects)

CSS transitions and keyframe animations are applied imperatively via
the DOM ref, since View does not expose those as style props.

Also removes accidentally committed .playwright-cli artifacts.

* fix(web): don't override style border-radius/backgroundColor in loop keyframes

Only include border-radius and background-color in CSS @Keyframes
when the user explicitly sets them in animate/initialAnimate props.
Previously, IDENTITY defaults (borderRadius: 0) were always included,
which overrode values set via the style prop (e.g. pulse's borderRadius: 30).

* fix(web): remove will-change hint to fix overflow:hidden clipping

will-change: transform causes the element to be promoted to its own
GPU compositing layer, which can escape parent overflow:hidden clipping
in some browsers. CSS animations already get GPU-promoted automatically,
so the hint is unnecessary.

* fix(example): use useWindowDimensions for banner width on web

BANNER_WIDTH was computed at module load time using Dimensions.get('window')
which bakes in the build-time window width on static web exports. Switched
to useWindowDimensions() hook so the banner correctly sizes to the actual
viewport width at render time.

* fix(web): add dom lib to tsconfig, fix viewRef type, fix app registration for native

* fix(example): remove duplicate gradle-plugin includeBuild for Android CI

* fix(example): fix Android build - deduplicate gradle-plugin includeBuild

* fix(example): fix Android CI - use expo autolinking for gradle-plugin includeBuild

* fix(example): restore gradle-plugin includeBuild in pluginManagement for settings plugin

Author: janicduplessis

.gitignore

@@ -84,3 +84,5 @@ android/generated
 
 # React Native Nitro Modules
 nitrogen/
+.playwright-cli/
+*.png

example/.gitignore

@@ -0,0 +1,5 @@
+
+# Expo
+.expo
+dist/
+web-build/

example/android/app/build.gradle

@@ -52,6 +52,11 @@ react {
 
     /* Autolinking */
     autolinkLibrariesWithApp()
+    //
+    // Added by install-expo-modules
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", rootDir.getAbsoluteFile().getParentFile().getAbsolutePath(), "android", "absolute"].execute(null, rootDir).text.trim())
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli')"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
 }
 
 /**

example/android/app/src/main/java/ease/example/MainActivity.kt

@@ -1,4 +1,5 @@
 package ease.example
+import expo.modules.ReactActivityDelegateWrapper
 
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
@@ -18,5 +19,5 @@ class MainActivity : ReactActivity() {
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
    */
   override fun createReactActivityDelegate(): ReactActivityDelegate =
-      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+      ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled))
 }

example/android/app/src/main/java/ease/example/MainApplication.kt

@@ -1,4 +1,7 @@
 package ease.example
+import android.content.res.Configuration
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ExpoReactHostFactory
 
 import android.app.Application
 import com.facebook.react.PackageList
@@ -10,7 +13,7 @@ import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 class MainApplication : Application(), ReactApplication {
 
   override val reactHost: ReactHost by lazy {
-    getDefaultReactHost(
+    ExpoReactHostFactory.getDefaultReactHost(
       context = applicationContext,
       packageList =
         PackageList(this).packages.apply {
@@ -23,5 +26,11 @@ class MainApplication : Application(), ReactApplication {
   override fun onCreate() {
     super.onCreate()
     loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
   }
 }

example/android/build.gradle

@@ -19,3 +19,4 @@ buildscript {
 }
 
 apply plugin: "com.facebook.react.rootproject"
+apply plugin: "expo-root-project"

example/android/settings.gradle

@@ -1,6 +1,19 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin")
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+plugins { id("com.facebook.react.settings")
+id("expo-autolinking-settings")
+}
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand) }
 rootProject.name = 'ease.example'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+expoAutolinking.useExpoModules()
+expoAutolinking.useExpoVersionCatalog()

example/app.json

@@ -1,4 +1,19 @@
 {
   "name": "EaseExample",
-  "displayName": "EaseExample"
-}
+  "displayName": "EaseExample",
+  "expo": {
+    "name": "EaseExample",
+    "slug": "ease-example",
+    "version": "1.0.0",
+    "web": {
+      "bundler": "metro",
+      "output": "single",
+      "entry": "./index.js"
+    },
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}

example/babel.config.js

@@ -6,7 +6,7 @@ const root = path.resolve(__dirname, '..');
 
 module.exports = getConfig(
   {
-    presets: ['module:@react-native/babel-preset'],
+    presets: ['babel-preset-expo'],
     plugins: ['react-native-worklets/plugin'],
   },
   { root, pkg },

example/index.js

@@ -1,5 +1,9 @@
-import { AppRegistry } from 'react-native';
+import { AppRegistry, Platform } from 'react-native';
 import App from './src/App';
-import { name as appName } from './app.json';
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent('EaseExample', () => App);
+
+if (Platform.OS === 'web') {
+  const rootTag = document.getElementById('root');
+  AppRegistry.runApplication('EaseExample', { rootTag });
+}