Split layout props in GenericTouchable instead of using containerStyle

src/components/touchables/GenericTouchable.tsx

@@ -3,9 +3,8 @@ import { Component } from 'react';
 import {
   Animated,
   Platform,
-  StyleProp,
-  ViewStyle,
   TouchableWithoutFeedbackProps,
+  StyleSheet,
 } from 'react-native';
 
 import { State } from '../../State';
@@ -17,6 +16,7 @@ import {
 } from '../../handlers/gestureHandlerCommon';
 import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
 import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+import splitStyleProp from './splitStyleProp';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -46,8 +46,6 @@ export interface GenericTouchableProps extends TouchableWithoutFeedbackProps {
   nativeID?: string;
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
 }
 
 interface InternalProps {
@@ -261,10 +259,11 @@ export default class GenericTouchable extends Component<
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,
     };
+    const { outer, inner } = splitStyleProp(this.props.style);
 
     return (
       <BaseButton
-        style={this.props.containerStyle}
+        style={outer}
         onHandlerStateChange={
           // TODO: not sure if it can be undefined instead of null
           this.props.disabled ? undefined : this.onHandlerStateChange
@@ -275,10 +274,16 @@ export default class GenericTouchable extends Component<
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}
         {...this.props.extraButtonProps}>
-        <Animated.View {...coreProps} style={this.props.style}>
+        <Animated.View {...coreProps} style={[styles.innerView, inner]}>
           {this.props.children}
         </Animated.View>
       </BaseButton>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  innerView: {
+    flexGrow: 1,
+  },
+});

src/components/touchables/splitStyleProp.ts

@@ -0,0 +1,61 @@
+import { FlexStyle, StyleProp, StyleSheet } from 'react-native';
+
+const OUTER_PROPS: { [key in keyof FlexStyle]?: true } = {
+  alignSelf: true,
+  bottom: true,
+  display: true,
+  end: true,
+  flex: true,
+  flexBasis: true,
+  flexGrow: true,
+  flexShrink: true,
+  height: true,
+  left: true,
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  position: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
+};
+
+/**
+ * Split a style prop between an "outer" and "inner" views in a way that makes it behave
+ * as if it was a single view.
+ *
+ * @example
+ * const { outer, inner } = splitStyleProp(style);
+ * return (
+ *   <View style={outer}>
+ *     <View style={[{ flexGrow: 1 }, inner]} />
+ *   </View>
+ * );
+ */
+export default function splitStyleProp<T extends FlexStyle>(
+  style?: StyleProp<T>
+): { outer: T; inner: T } {
+  const resolvedStyle = StyleSheet.flatten(style);
+  const inner: Record<string, unknown> = {};
+  const outer: Record<string, unknown> = {};
+  Object.entries(resolvedStyle).forEach(([key, value]) => {
+    if ((OUTER_PROPS as { [key: string]: true | undefined })[key] === true) {
+      outer[key] = value;
+    } else {
+      inner[key] = value;
+    }
+  });
+  return { outer: outer as T, inner: inner as T };
+}