From 1e1236597a1cfbc9838f0cfec14379d493bb2e43 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Wed, 9 Sep 2020 11:49:03 -0700
Subject: [PATCH] [fix] Image SSR hydration warnings

React doesn't currently provide an API for defining SSR-safe IDs, so we have to
suppress the hydration warnings that occur.

The 'useOpaqueIdentifier' hook is intended to support this use case but is not
currently a public API and development has been paused.
https://github.com/facebook/react/pull/17322.

Close #1375
---
 packages/react-native-web/src/exports/Image/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index f166da6da..f56640f2b 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -35,7 +35,7 @@ function createTintColorSVG(tintColor, id) {
   return tintColor && id != null ? (
     <svg style={{ position: 'absolute', height: 0, visibility: 'hidden', width: 0 }}>
       <defs>
-        <filter id={`tint-${id}`}>
+        <filter id={`tint-${id}`} suppressHydrationWarning={true}>
           <feFlood floodColor={`${tintColor}`} key={tintColor} />
           <feComposite in2="SourceAlpha" operator="atop" />
         </filter>
@@ -46,7 +46,6 @@ function createTintColorSVG(tintColor, id) {
 
 function getFlatStyle(style, blurRadius, filterId) {
   const flatStyle = { ...StyleSheet.flatten(style) };
-
   const { filter, resizeMode, shadowOffset, tintColor } = flatStyle;
 
   // Add CSS filters
@@ -284,6 +283,7 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
           { backgroundImage, filter },
           backgroundSize != null && { backgroundSize }
         ]}
+        suppressHydrationWarning={true}
       />
       {hiddenImage}
       {createTintColorSVG(tintColor, filterRef.current)}