[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.
facebook/react#17322.

Close #1375

Author: GruTechDev

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)}