[blur] BlurView does not support SSR

🐛 Bug Report

Continuing #10808

Summary of Issue

Right now, the blur view does not support SSR environments like NextJS. It has 2 problems

1. It looks like NextJS provide a CSS global on SSR, but that doesn’t include the supports method. This results in a type error like CSS.supports is not a function. We currently only check on CSS, but not on the supports method.

2. Even when guarding this property, there will be an unexpected difference (according to React/Next) if we SSR-render without the style and in the client we render it with the style. And, because of this, it keeps using the SSR style (without blur)

I could think of two alternatives:

1. Render an inline <style> element, using @supports (backdrop-filter: blur(1px)) { ... }. This works pretty nicely because, on both SSR and Client, we get the exact same styling. We leave it up to the browser through CSS to include saturation only when blur is supported. BUT React Native Web dropped support for className, meaning we can’t just link the style 😐

2. Another approach would be rendering null for the component, when rendered in SSR. BUT also this causes a “yo server rendered this, and client rendered that, wtf”-error from React/Next

Both alternatives actually work 😄

Environment - output of expo diagnostics & the platform(s) you’re targeting

  Expo CLI 3.28.2 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.12.0 - ~/.nvm/versions/node/v14.12.0/bin/node
      Yarn: 1.22.5 - /usr/local/bin/yarn
      npm: 7.0.0 - ~/.nvm/versions/node/v14.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.9.3 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.0, DriverKit 20.0, macOS 11.0, tvOS 14.0, watchOS 7.0
      Android SDK:
        API Levels: 21, 26, 28, 29, 30
        Build Tools: 26.0.3, 28.0.3, 29.0.2, 30.0.0, 30.0.2
        System Images: android-21 | Google APIs ARM EABI v7a, android-22 | Intel x86 Atom_64, android-22 | Google APIs ARM EABI v7a, android-23 | Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom
        Android NDK: 21.3.6528147
    IDEs:
      Android Studio: 4.0 AI-193.6911.18.40.6626763
      Xcode: 12.0/12A8189h - /usr/bin/xcodebuild
    npmPackages:
      expo: ~37.0.3 => 37.0.12 
      react: ~16.9.0 => 16.9.0 
      react-dom: ~16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
      react-native-web: ~0.11.7 => 0.11.7 
    Expo Workflow: managed

Reproducible Demo

Steps to Reproduce

• $ npx create-next-app --example with-expo-typescript
• $ yarn add expo-blur
• Copy the Snack example to pages/index.tsx
• $ yarn dev

Expected Behavior vs Actual Behavior

It should work on SSR.

[byCedric]

Hi @nandorojo! Yeah, that makes a lot of sense! I kind-of forgot about the possibility of the data tag 😅 If you have time, go for it, I’d be happy to review the PR 😄

[nandorojo]

@byCedric if the solution I proposed makes sense to you, I could try to PR. In the meantime, I’ll probably patch-package and test that out.