Fix inner styling of Pressable

src/components/Pressable/Pressable.tsx

@@ -18,6 +18,9 @@ import {
   isTouchWithinInset,
   adaptTouchEvent,
   addInsets,
+  innerStyleKeys,
+  excludeStyles,
+  extractStyles,
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
@@ -254,8 +257,14 @@ export default function Pressable(props: PressableProps) {
       ? props.children({ pressed: pressedState })
       : props.children;
 
+  // StyleProp<ViewStyle> is a broad umbrella type for objects, recursive arrays and numbers
+  const flattenedStyles = StyleSheet.flatten((styleProp ?? {}) as ViewStyle);
+
+  const innerStyles = extractStyles(flattenedStyles, innerStyleKeys);
+  const outerStyles = excludeStyles(flattenedStyles, innerStyleKeys);
+
   return (
-    <View style={styleProp}>
+    <View style={outerStyles}>
       <GestureDetector gesture={gesture}>
         <NativeButton
           ref={pressableRef}
@@ -267,7 +276,7 @@ export default function Pressable(props: PressableProps) {
             props.android_ripple?.color ?? defaultRippleColor
           )}
           rippleRadius={props.android_ripple?.radius ?? undefined}
-          style={[StyleSheet.absoluteFill, pointerStyle]}>
+          style={[StyleSheet.absoluteFill, pointerStyle, innerStyles]}>
           {childrenProp}
           {__DEV__ ? (
             <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />

src/components/Pressable/utils.ts

@@ -1,4 +1,4 @@
-import { Insets } from 'react-native';
+import { Insets, ViewStyle } from 'react-native';
 import { LongPressGestureHandlerEventPayload } from '../../handlers/GestureHandlerEventPayload';
 import {
   TouchData,
@@ -119,12 +119,80 @@ const adaptTouchEvent = (event: GestureTouchEvent): PressableEvent => {
   };
 };
 
+type StylePropKeys = (keyof ViewStyle)[];
+
+const innerStyleKeys = [
+  'alignContent',
+  'alignItems',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexWrap',
+  'rowGap',
+  'gap',
+  'columnGap',
+  'justifyContent',
+  'overflow',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'start',
+  'end',
+
+  /**
+   * @platform ios
+   */
+  'direction',
+] as StylePropKeys;
+
+const extractStyles = (from: ViewStyle, keys: StylePropKeys): ViewStyle => {
+  if (!from) {
+    return {} as ViewStyle;
+  }
+
+  const extractedData = {} as Record<string, unknown>;
+
+  for (const key of keys) {
+    if (from[key] !== undefined) {
+      extractedData[key] = from[key];
+    }
+  }
+
+  return extractedData as ViewStyle;
+};
+
+const excludeStyles = (from: ViewStyle, keys: StylePropKeys): ViewStyle => {
+  if (!from) {
+    return {} as ViewStyle;
+  }
+
+  const exclusiveData = { ...from };
+
+  for (const key of keys) {
+    if (exclusiveData[key] !== undefined) {
+      exclusiveData[key] = undefined;
+    }
+  }
+
+  return exclusiveData;
+};
+
 export {
+  innerStyleKeys,
+  StylePropKeys,
   numberAsInset,
   addInsets,
   touchToPressEvent,
   changeToTouchData,
   isTouchWithinInset,
   adaptStateChangeEvent,
   adaptTouchEvent,
+  extractStyles,
+  excludeStyles,
 };