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,13 @@ export default function Pressable(props: PressableProps) {
       ? props.children({ pressed: pressedState })
       : props.children;
 
+  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 +275,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,72 @@ const adaptTouchEvent = (event: GestureTouchEvent): PressableEvent => {
   };
 };
 
+type StylePropKeys = (keyof ViewStyle)[];
+
+// Source:
+// - From ViewStyle extracted FlexStyle sub-interface which contains all of the box-model manipulating props.
+// - From FlexStyle handpicked those styles, which act on the inner part of the box-model.
+const innerStyleKeys = [
+  'alignContent',
+  'alignItems',
+  'flexBasis',
+  'flexDirection',
+  'flexWrap',
+  'rowGap',
+  'gap',
+  'columnGap',
+  'justifyContent',
+  'overflow',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'start',
+  'end',
+  'direction', // iOS only
+] as StylePropKeys;
+
+const extractStyles = (from: ViewStyle, keys: StylePropKeys): ViewStyle => {
+  if (!from) {
+    return {} as ViewStyle;
+  }
+
+  return Object.fromEntries(
+    keys
+      .map((key) => [key, from[key]])
+      .filter(([_key, value]) => value !== undefined)
+  ) as ViewStyle;
+};
+
+const excludeStyles = (from: ViewStyle, keys: StylePropKeys): ViewStyle => {
+  if (!from) {
+    return {} as ViewStyle;
+  }
+
+  const exclusiveData = { ...from };
+
+  keys
+    .filter((key) => exclusiveData[key] !== undefined)
+    .forEach((key) => (exclusiveData[key] = undefined));
+
+  return exclusiveData;
+};
+
 export {
+  innerStyleKeys,
+  StylePropKeys,
   numberAsInset,
   addInsets,
   touchToPressEvent,
   changeToTouchData,
   isTouchWithinInset,
   adaptStateChangeEvent,
   adaptTouchEvent,
+  extractStyles,
+  excludeStyles,
 };