[core] Fix small issue in the Touchable component on web

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-material/core",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Modular and customizable Material Design UI components for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

core/src/Touchable.tsx

@@ -43,11 +43,6 @@ interface RippleProps {
 
 const styles = StyleSheet.create({
   container: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
     overflow: "hidden",
   },
   ripple: {
@@ -133,21 +128,20 @@ const Touchable: React.FC<TouchableProps> = ({
       android_ripple={!ripple ? { color: underlayColor } : undefined}
       onPressIn={ripple ? handleOnPressIn : onPressIn}
       onLayout={ripple ? handleOnLayout : onLayout}
-      style={[Platform.select({ web: { cursor: 'pointer' } }), style]}
+      style={[Platform.OS === 'web' && { cursor: 'pointer' }, style]}
       {...rest}
     >
       {children}
-      {ripple && ripples.length > 0 && (
-        <View style={[
-          styles.container,
-          rippleContainerStyle,
-          rippleContainerBorderRadius ? { borderRadius: rippleContainerBorderRadius } : undefined,
-        ]}>
-          {ripples.map((ripple) => (
-            <Animated.View key={ripple.key} style={[styles.ripple, ripple.style, { backgroundColor: underlayColor }]} />
-          ))}
-        </View>
-      )}
+      <View style={[
+        styles.container,
+        StyleSheet.absoluteFill,
+        rippleContainerStyle,
+        rippleContainerBorderRadius ? { borderRadius: rippleContainerBorderRadius } : undefined,
+      ]}>
+        {ripples.map((ripple) => (
+          <Animated.View key={ripple.key} style={[styles.ripple, ripple.style, { backgroundColor: underlayColor }]} />
+        ))}
+      </View>
     </Pressable>
   );
 };

example/package.json

@@ -20,7 +20,7 @@
     "react-dom": "17.0.1",
     "react-native": "0.64.2",
     "react-native-safe-area-context": "^3.3.2",
-    "react-native-screens": "^3.9.0",
+    "react-native-screens": "~3.8.0",
     "react-native-web": "0.17.1"
   },
   "devDependencies": {

example/yarn.lock

@@ -5085,11 +5085,6 @@ [email protected]:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-freeze@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.0.tgz#b21c65fe1783743007c8c9a2952b1c8879a77354"
-  integrity sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw==
-
 react-is@^16.13.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5114,12 +5109,11 @@ react-native-safe-area-context@^3.3.2:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed"
   integrity sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q==
 
-react-native-screens@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.9.0.tgz#39b79f0e50b9d68ec822d333bc76e7aaee90f3fd"
-  integrity sha512-TP/kASLQ/2iGCz4/n9CHeveKC9urzbfYXFH+1TfBnqaBwjIszhVuadiIOQ0qWKdSs6qnBR2xPTp9U18sNoc34A==
+react-native-screens@~3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.8.0.tgz#4ec84c55a7b4a4aa9405c812978ca2ba5c0242a4"
+  integrity sha512-lHrnB/elAoMJKv8O12U6BLgeup4lB6ZKJHEOVuG/D72nv/OE9wUusbou6YCB5tp3YbaSpHflPnkFmHA/vCejpw==
   dependencies:
-    react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
 [email protected]: