From b19d66c9e07337d8867a44ad934a7ef08b6f8847 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Wed, 1 Sep 2021 14:19:18 -0400
Subject: [PATCH 1/2] Remove extra wrapper view from GenericTouchable

---
 src/components/touchables/GenericTouchable.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/touchables/GenericTouchable.tsx b/src/components/touchables/GenericTouchable.tsx
index 83cfae8762..9cd767ddc5 100644
--- a/src/components/touchables/GenericTouchable.tsx
+++ b/src/components/touchables/GenericTouchable.tsx
@@ -3,8 +3,6 @@ import { Component } from 'react';
 import {
   Animated,
   Platform,
-  StyleProp,
-  ViewStyle,
   TouchableWithoutFeedbackProps,
 } from 'react-native';
 
@@ -18,6 +16,8 @@ import {
 import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
 import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
 
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
 /**
  * Each touchable is a states' machine which preforms transitions.
  * On very beginning (and on the very end or recognition) touchable is
@@ -46,8 +46,6 @@ export interface GenericTouchableProps extends TouchableWithoutFeedbackProps {
   nativeID?: string;
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
 }
 
 interface InternalProps {
@@ -263,8 +261,8 @@ export default class GenericTouchable extends Component<
     };
 
     return (
-      <BaseButton
-        style={this.props.containerStyle}
+      <AnimatedBaseButton
+        style={this.props.style}
         onHandlerStateChange={
           // TODO: not sure if it can be undefined instead of null
           this.props.disabled ? undefined : this.onHandlerStateChange
@@ -274,11 +272,10 @@ export default class GenericTouchable extends Component<
         shouldActivateOnStart={this.props.shouldActivateOnStart}
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}
+        {...coreProps}
         {...this.props.extraButtonProps}>
-        <Animated.View {...coreProps} style={this.props.style}>
-          {this.props.children}
-        </Animated.View>
-      </BaseButton>
+        {this.props.children}
+      </AnimatedBaseButton>
     );
   }
 }

From d8f9bbbd17c89707bcf4f70d8c4a55eedf2c403f Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Thu, 2 Sep 2021 18:58:01 +0000
Subject: [PATCH 2/2] Split layout props in GenericTouchable instead of using
 containerStyle

---
 .../touchables/GenericTouchable.tsx           | 22 ++++---
 src/components/touchables/splitStyleProp.ts   | 61 +++++++++++++++++++
 2 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 src/components/touchables/splitStyleProp.ts

diff --git a/src/components/touchables/GenericTouchable.tsx b/src/components/touchables/GenericTouchable.tsx
index 9cd767ddc5..a5026b9e2b 100644
--- a/src/components/touchables/GenericTouchable.tsx
+++ b/src/components/touchables/GenericTouchable.tsx
@@ -4,6 +4,7 @@ import {
   Animated,
   Platform,
   TouchableWithoutFeedbackProps,
+  StyleSheet,
 } from 'react-native';
 
 import { State } from '../../State';
@@ -15,8 +16,7 @@ import {
 } from '../../handlers/gestureHandlerCommon';
 import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
 import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
-
-const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+import splitStyleProp from './splitStyleProp';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -259,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 (
-      <AnimatedBaseButton
-        style={this.props.style}
+      <BaseButton
+        style={outer}
         onHandlerStateChange={
           // TODO: not sure if it can be undefined instead of null
           this.props.disabled ? undefined : this.onHandlerStateChange
@@ -272,10 +273,17 @@ export default class GenericTouchable extends Component<
         shouldActivateOnStart={this.props.shouldActivateOnStart}
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}
-        {...coreProps}
         {...this.props.extraButtonProps}>
-        {this.props.children}
-      </AnimatedBaseButton>
+        <Animated.View {...coreProps} style={[styles.innerView, inner]}>
+          {this.props.children}
+        </Animated.View>
+      </BaseButton>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  innerView: {
+    flexGrow: 1,
+  },
+});
diff --git a/src/components/touchables/splitStyleProp.ts b/src/components/touchables/splitStyleProp.ts
new file mode 100644
index 0000000000..1acee639e0
--- /dev/null
+++ b/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 };
+}