From 7ae5c209004634b4a49aa7b6faf2be5248931029 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Fri, 8 Dec 2023 14:34:18 +0100
Subject: [PATCH 01/13] Draft working solution on Android

---
 example/src/App.tsx                           |   2 +
 example/src/release_tests/complexUI/index.tsx | 143 ++++++++++++++++++
 src/components/GestureButtons.tsx             |  24 ++-
 src/components/splitStyleProp.ts              |  71 +++++++++
 4 files changed, 233 insertions(+), 7 deletions(-)
 create mode 100644 example/src/release_tests/complexUI/index.tsx
 create mode 100644 src/components/splitStyleProp.ts

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 67a0c3a718..fd2037eb42 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -48,6 +48,7 @@ import HoverableIcons from './new_api/hoverable_icons';
 import VelocityTest from './new_api/velocityTest';
 
 import EmptyExample from './empty/EmptyExample';
+import ComplexUI from './release_tests/complexUI';
 
 interface Example {
   name: string;
@@ -115,6 +116,7 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Fling', component: Fling },
       { name: 'Combo', component: ComboWithGHScroll },
       { name: 'Touchables', component: TouchablesIndex as React.ComponentType },
+      { name: 'Complex UI', component: ComplexUI },
     ],
   },
   {
diff --git a/example/src/release_tests/complexUI/index.tsx b/example/src/release_tests/complexUI/index.tsx
new file mode 100644
index 0000000000..7daf9f54b5
--- /dev/null
+++ b/example/src/release_tests/complexUI/index.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  SafeAreaView,
+  Dimensions,
+  Image,
+  Pressable,
+} from 'react-native';
+import GestureHandlerRootView from '../../../../src/components/GestureHandlerRootView';
+import { ScrollView } from '../../../../src/components/GestureComponents';
+import { RectButton } from '../../../../src/components/GestureButtons';
+
+export default function ComplexUI() {
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <SafeAreaView style={styles.container}>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <Avatars />
+          <View style={styles.paddedContainer}>
+            {/* <Habits /> */}
+            <Gallery />
+            <Gallery />
+            <Gallery />
+            <Gallery />
+            <Gallery />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </GestureHandlerRootView>
+  );
+}
+const colors = ['#782AEB', '#38ACDD', '#57B495', '#FF6259', '#FFD61E'];
+
+function Avatars() {
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      {colors.map((color) => (
+        <RectButton
+          key={color}
+          style={[styles.avatars, { backgroundColor: color }]}>
+          <Text style={styles.avatarLabel}>{color.slice(1, 3)}</Text>
+        </RectButton>
+      ))}
+    </ScrollView>
+  );
+}
+
+function Gallery() {
+  return (
+    <View style={[styles.container, styles.gap, styles.marginBottom]}>
+      <RectButton style={styles.fullWidthButton} />
+      <View style={[styles.row, styles.gap]}>
+        <RectButton style={styles.leftButton} />
+        <RectButton style={styles.rightButton} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  marginBottom: {
+    marginBottom: 20,
+  },
+  paddedContainer: {
+    padding: 16,
+  },
+  heading: {
+    fontSize: 40,
+    fontWeight: 'bold',
+    marginBottom: 24,
+    color: 'black',
+  },
+  gap: {
+    gap: 10,
+  },
+  listItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 20,
+    backgroundColor: '#232736',
+    marginVertical: 4,
+    borderRadius: 20,
+    marginBottom: 8,
+  },
+  listItemLabel: {
+    fontSize: 20,
+    flex: 1,
+    color: 'white',
+    marginLeft: 20,
+  },
+  listItemIcon: {
+    fontSize: 32,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  avatars: {
+    width: 90,
+    height: 90,
+    borderWidth: 2,
+    borderColor: '#001A72',
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 5,
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 30,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarLabel: {
+    color: '#F8F9FF',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  fullWidthButton: {
+    width: '100%',
+    height: 160,
+    backgroundColor: '#FF6259',
+    borderTopRightRadius: 30,
+    borderTopLeftRadius: 30,
+    borderWidth: 1,
+  },
+  leftButton: {
+    flex: 1,
+    height: 160,
+    backgroundColor: '#FFD61E',
+    borderBottomLeftRadius: 30,
+    borderWidth: 5,
+  },
+  rightButton: {
+    flex: 1,
+    backgroundColor: '#782AEB',
+    height: 160,
+    borderBottomRightRadius: 30,
+    borderWidth: 8,
+  },
+});
diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index 475f68db49..ccce1a5adb 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   StyleProp,
   ViewStyle,
+  View,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -20,6 +21,7 @@ import {
   NativeViewGestureHandlerPayload,
   NativeViewGestureHandlerProps,
 } from '../handlers/NativeViewGestureHandler';
+import { splitStyleProp } from './splitStyleProp';
 
 export interface RawButtonProps extends NativeViewGestureHandlerProps {
   /**
@@ -218,15 +220,23 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   };
 
   render() {
-    const { rippleColor, ...rest } = this.props;
+    const { rippleColor, style, ...rest } = this.props;
+
+    const { restStyles, innerStyles, borders, bothStyles } =
+      splitStyleProp(style);
 
     return (
-      <RawButton
-        rippleColor={processColor(rippleColor)}
-        {...rest}
-        onGestureEvent={this.onGestureEvent}
-        onHandlerStateChange={this.onHandlerStateChange}
-      />
+      <View style={[borders, bothStyles, { overflow: 'hidden' }]}>
+        <View style={[innerStyles, bothStyles]}>
+          <RawButton
+            rippleColor={processColor(rippleColor)}
+            style={[restStyles, bothStyles]}
+            {...rest}
+            onGestureEvent={this.onGestureEvent}
+            onHandlerStateChange={this.onHandlerStateChange}
+          />
+        </View>
+      </View>
     );
   }
 }
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
new file mode 100644
index 0000000000..a5e4e7fdda
--- /dev/null
+++ b/src/components/splitStyleProp.ts
@@ -0,0 +1,71 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+const BORDERS: { [key in keyof ViewStyle]?: true } = {
+  borderWidth: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+};
+
+const INNER_STYLES: { [key in keyof ViewStyle]?: true } = {
+  alignSelf: true,
+  bottom: true,
+  display: true,
+  end: true,
+  flexBasis: true,
+  flexGrow: true,
+  flexShrink: true,
+  left: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  position: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
+};
+
+const BOTH_STYLES: { [key in keyof ViewStyle]?: true } = {
+  flex: true,
+};
+
+export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {
+  const resolvedStyle = StyleSheet.flatten(style ?? {});
+
+  const borders: Record<string, unknown> = {};
+  const innerStyles: Record<string, unknown> = {};
+  const bothStyles: Record<string, unknown> = {};
+  const restStyles: Record<string, unknown> = {};
+
+  Object.entries(resolvedStyle).forEach(([key, value]) => {
+    if ((BORDERS as { [key: string]: true | undefined })[key] === true) {
+      borders[key] = value;
+    } else if (
+      (BOTH_STYLES as { [key: string]: true | undefined })[key] === true
+    ) {
+      bothStyles[key] = value;
+    } else if (
+      (INNER_STYLES as { [key: string]: true | undefined })[key] === true
+    ) {
+      innerStyles[key] = value;
+    } else {
+      restStyles[key] = value;
+    }
+  });
+
+  return { borders, restStyles, innerStyles, bothStyles };
+}

From abd333acccdb417a3b551e6eb51af90028aaf528 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Fri, 8 Dec 2023 15:09:58 +0100
Subject: [PATCH 02/13] Adjust postion

---
 src/components/splitStyleProp.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index a5e4e7fdda..3197a79a07 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -1,6 +1,7 @@
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 const BORDERS: { [key in keyof ViewStyle]?: true } = {
+  borderColor: true,
   borderWidth: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
@@ -20,27 +21,29 @@ const BORDERS: { [key in keyof ViewStyle]?: true } = {
 
 const INNER_STYLES: { [key in keyof ViewStyle]?: true } = {
   alignSelf: true,
-  bottom: true,
   display: true,
-  end: true,
   flexBasis: true,
   flexGrow: true,
   flexShrink: true,
-  left: true,
   maxHeight: true,
   maxWidth: true,
   minHeight: true,
   minWidth: true,
-  position: true,
-  right: true,
-  start: true,
-  top: true,
+
   width: true,
   zIndex: true,
 };
 
 const BOTH_STYLES: { [key in keyof ViewStyle]?: true } = {
   flex: true,
+
+  position: true,
+  left: true,
+  right: true,
+  top: true,
+  bottom: true,
+  start: true,
+  end: true,
 };
 
 export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {

From 2cbef8487bf0ea8848420b7f3b0714cff2fa3be9 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Fri, 8 Dec 2023 15:57:40 +0100
Subject: [PATCH 03/13] It kinda works

---
 src/components/GestureButtons.tsx | 42 ++++++++++++++++++++++++++++---
 src/components/splitStyleProp.ts  | 21 +++++++++++-----
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index ccce1a5adb..419b0aef67 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -222,12 +222,48 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   render() {
     const { rippleColor, style, ...rest } = this.props;
 
-    const { restStyles, innerStyles, borders, bothStyles } =
+    const { restStyles, innerStyles, borders, bothStyles, outerStyles } =
       splitStyleProp(style);
 
+    const { borderWidth } = outerStyles;
+    const outerBorders = { ...borders };
+
+    if (outerBorders.borderRadius !== undefined && borderWidth !== undefined) {
+      outerBorders.borderRadius += borderWidth;
+    }
+
+    if (
+      outerBorders.borderTopLeftRadius !== undefined &&
+      borderWidth !== undefined
+    ) {
+      outerBorders.borderTopLeftRadius += borderWidth;
+    }
+
+    if (
+      outerBorders.borderTopRightRadius !== undefined &&
+      borderWidth !== undefined
+    ) {
+      outerBorders.borderTopRightRadius += borderWidth;
+    }
+
+    if (
+      outerBorders.borderBottomLeftRadius !== undefined &&
+      borderWidth !== undefined
+    ) {
+      outerBorders.borderBottomLeftRadius += borderWidth;
+    }
+
+    if (
+      outerBorders.borderBottomRightRadius !== undefined &&
+      borderWidth !== undefined
+    ) {
+      outerBorders.borderBottomRightRadius += borderWidth;
+    }
+
     return (
-      <View style={[borders, bothStyles, { overflow: 'hidden' }]}>
-        <View style={[innerStyles, bothStyles]}>
+      <View style={[outerStyles, bothStyles, outerBorders]}>
+        <View
+          style={[innerStyles, bothStyles, borders, { overflow: 'hidden' }]}>
           <RawButton
             rippleColor={processColor(rippleColor)}
             style={[restStyles, bothStyles]}
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index 3197a79a07..d3e404e18f 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -1,12 +1,8 @@
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-const BORDERS: { [key in keyof ViewStyle]?: true } = {
+const OUTER_STYLES: { [key in keyof ViewStyle]?: true } = {
   borderColor: true,
   borderWidth: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
 
   margin: true,
   marginBottom: true,
@@ -19,6 +15,14 @@ const BORDERS: { [key in keyof ViewStyle]?: true } = {
   marginVertical: true,
 };
 
+const BORDERS: { [key in keyof ViewStyle]?: true } = {
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+};
+
 const INNER_STYLES: { [key in keyof ViewStyle]?: true } = {
   alignSelf: true,
   display: true,
@@ -50,6 +54,7 @@ export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {
   const resolvedStyle = StyleSheet.flatten(style ?? {});
 
   const borders: Record<string, unknown> = {};
+  const outerStyles: Record<string, unknown> = {};
   const innerStyles: Record<string, unknown> = {};
   const bothStyles: Record<string, unknown> = {};
   const restStyles: Record<string, unknown> = {};
@@ -57,6 +62,10 @@ export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {
   Object.entries(resolvedStyle).forEach(([key, value]) => {
     if ((BORDERS as { [key: string]: true | undefined })[key] === true) {
       borders[key] = value;
+    } else if (
+      (OUTER_STYLES as { [key: string]: true | undefined })[key] === true
+    ) {
+      outerStyles[key] = value;
     } else if (
       (BOTH_STYLES as { [key: string]: true | undefined })[key] === true
     ) {
@@ -70,5 +79,5 @@ export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {
     }
   });
 
-  return { borders, restStyles, innerStyles, bothStyles };
+  return { borders, restStyles, innerStyles, bothStyles, outerStyles };
 }

From aa19f0d0f4384e87d21af6e42da36e6a71e6a883 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 11 Dec 2023 11:52:14 +0100
Subject: [PATCH 04/13] Incorporate borderWidth to height and width

---
 example/src/release_tests/complexUI/index.tsx | 23 ++++---
 src/components/GestureButtons.tsx             | 63 +++++++++----------
 src/components/splitStyleProp.ts              |  4 +-
 3 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/example/src/release_tests/complexUI/index.tsx b/example/src/release_tests/complexUI/index.tsx
index 7daf9f54b5..2271337187 100644
--- a/example/src/release_tests/complexUI/index.tsx
+++ b/example/src/release_tests/complexUI/index.tsx
@@ -10,16 +10,20 @@ import {
 } from 'react-native';
 import GestureHandlerRootView from '../../../../src/components/GestureHandlerRootView';
 import { ScrollView } from '../../../../src/components/GestureComponents';
-import { RectButton } from '../../../../src/components/GestureButtons';
+import {
+  BorderlessButton,
+  RectButton,
+} from '../../../../src/components/GestureButtons';
+
+const MyButton = RectButton;
 
 export default function ComplexUI() {
   return (
     <GestureHandlerRootView style={styles.container}>
       <SafeAreaView style={styles.container}>
-        <ScrollView showsVerticalScrollIndicator={false}>
+        <ScrollView>
           <Avatars />
           <View style={styles.paddedContainer}>
-            {/* <Habits /> */}
             <Gallery />
             <Gallery />
             <Gallery />
@@ -37,11 +41,11 @@ function Avatars() {
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false}>
       {colors.map((color) => (
-        <RectButton
+        <MyButton
           key={color}
           style={[styles.avatars, { backgroundColor: color }]}>
           <Text style={styles.avatarLabel}>{color.slice(1, 3)}</Text>
-        </RectButton>
+        </MyButton>
       ))}
     </ScrollView>
   );
@@ -50,10 +54,13 @@ function Avatars() {
 function Gallery() {
   return (
     <View style={[styles.container, styles.gap, styles.marginBottom]}>
-      <RectButton style={styles.fullWidthButton} />
+      <MyButton style={styles.fullWidthButton} />
       <View style={[styles.row, styles.gap]}>
-        <RectButton style={styles.leftButton} />
-        <RectButton style={styles.rightButton} />
+        <MyButton
+          style={styles.leftButton}
+          onPress={() => console.log('xDDD')}
+        />
+        <MyButton style={styles.rightButton} />
       </View>
     </View>
   );
diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index 419b0aef67..9111dae0cb 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -132,11 +132,18 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   private lastActive: boolean;
   private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
   private longPressDetected: boolean;
+  private ref: React.RefObject<View>;
 
   constructor(props: BaseButtonProps) {
     super(props);
     this.lastActive = false;
     this.longPressDetected = false;
+    // this.state = {
+    //   width: 0,
+    //   height: 0,
+    // };
+
+    // this.ref = React.createRef();
   }
 
   private handleEvent = ({
@@ -194,6 +201,12 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     this.lastActive = active;
   };
 
+  // componentDidMount() {
+  //   this.ref.current?.measure((width: number, height: number) => {
+  //     this.setState({ width, height });
+  //   });
+  // }
+
   private onLongPress = () => {
     this.longPressDetected = true;
     this.props.onLongPress?.();
@@ -228,45 +241,31 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     const { borderWidth } = outerStyles;
     const outerBorders = { ...borders };
 
-    if (outerBorders.borderRadius !== undefined && borderWidth !== undefined) {
-      outerBorders.borderRadius += borderWidth;
-    }
-
-    if (
-      outerBorders.borderTopLeftRadius !== undefined &&
-      borderWidth !== undefined
-    ) {
-      outerBorders.borderTopLeftRadius += borderWidth;
-    }
-
-    if (
-      outerBorders.borderTopRightRadius !== undefined &&
-      borderWidth !== undefined
-    ) {
-      outerBorders.borderTopRightRadius += borderWidth;
-    }
-
-    if (
-      outerBorders.borderBottomLeftRadius !== undefined &&
-      borderWidth !== undefined
-    ) {
-      outerBorders.borderBottomLeftRadius += borderWidth;
-    }
+    const updateBorderRadius = (prop: keyof typeof outerBorders) => {
+      if (outerBorders[prop] !== undefined && borderWidth !== undefined) {
+        outerBorders[prop] += borderWidth;
+      }
+    };
 
-    if (
-      outerBorders.borderBottomRightRadius !== undefined &&
-      borderWidth !== undefined
-    ) {
-      outerBorders.borderBottomRightRadius += borderWidth;
-    }
+    updateBorderRadius('borderRadius');
+    updateBorderRadius('borderTopLeftRadius');
+    updateBorderRadius('borderTopRightRadius');
+    updateBorderRadius('borderBottomLeftRadius');
+    updateBorderRadius('borderBottomRightRadius');
 
     return (
       <View style={[outerStyles, bothStyles, outerBorders]}>
         <View
-          style={[innerStyles, bothStyles, borders, { overflow: 'hidden' }]}>
+          style={[
+            { overflow: 'hidden', flexGrow: 1 },
+            innerStyles,
+            bothStyles,
+            borders,
+          ]}>
           <RawButton
             rippleColor={processColor(rippleColor)}
-            style={[restStyles, bothStyles]}
+            style={[{ flexGrow: 1 }, restStyles, bothStyles]}
+            // style={style}
             {...rest}
             onGestureEvent={this.onGestureEvent}
             onHandlerStateChange={this.onHandlerStateChange}
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index d3e404e18f..ef33bd345f 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -13,6 +13,9 @@ const OUTER_STYLES: { [key in keyof ViewStyle]?: true } = {
   marginStart: true,
   marginTop: true,
   marginVertical: true,
+
+  width: true,
+  height: true,
 };
 
 const BORDERS: { [key in keyof ViewStyle]?: true } = {
@@ -34,7 +37,6 @@ const INNER_STYLES: { [key in keyof ViewStyle]?: true } = {
   minHeight: true,
   minWidth: true,
 
-  width: true,
   zIndex: true,
 };
 

From c6b6bd3dc7d6aa90ef47ff42907a414ef5ca45ba Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 11 Dec 2023 16:01:49 +0100
Subject: [PATCH 05/13] Refactor splitStyleProp

---
 src/components/GestureButtons.tsx |  37 +-----
 src/components/splitStyleProp.ts  | 196 +++++++++++++++++++-----------
 2 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index 9111dae0cb..c856dee0cc 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -132,18 +132,11 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   private lastActive: boolean;
   private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
   private longPressDetected: boolean;
-  private ref: React.RefObject<View>;
 
   constructor(props: BaseButtonProps) {
     super(props);
     this.lastActive = false;
     this.longPressDetected = false;
-    // this.state = {
-    //   width: 0,
-    //   height: 0,
-    // };
-
-    // this.ref = React.createRef();
   }
 
   private handleEvent = ({
@@ -235,36 +228,14 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   render() {
     const { rippleColor, style, ...rest } = this.props;
 
-    const { restStyles, innerStyles, borders, bothStyles, outerStyles } =
-      splitStyleProp(style);
-
-    const { borderWidth } = outerStyles;
-    const outerBorders = { ...borders };
-
-    const updateBorderRadius = (prop: keyof typeof outerBorders) => {
-      if (outerBorders[prop] !== undefined && borderWidth !== undefined) {
-        outerBorders[prop] += borderWidth;
-      }
-    };
-
-    updateBorderRadius('borderRadius');
-    updateBorderRadius('borderTopLeftRadius');
-    updateBorderRadius('borderTopRightRadius');
-    updateBorderRadius('borderBottomLeftRadius');
-    updateBorderRadius('borderBottomRightRadius');
+    const { outerStyles, innerStyles, restStyles } = splitStyleProp(style);
 
     return (
-      <View style={[outerStyles, bothStyles, outerBorders]}>
-        <View
-          style={[
-            { overflow: 'hidden', flexGrow: 1 },
-            innerStyles,
-            bothStyles,
-            borders,
-          ]}>
+      <View style={outerStyles}>
+        <View style={innerStyles}>
           <RawButton
             rippleColor={processColor(rippleColor)}
-            style={[{ flexGrow: 1 }, restStyles, bothStyles]}
+            style={restStyles}
             // style={style}
             {...rest}
             onGestureEvent={this.onGestureEvent}
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index ef33bd345f..3692cf8f8d 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -1,85 +1,143 @@
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-const OUTER_STYLES: { [key in keyof ViewStyle]?: true } = {
-  borderColor: true,
-  borderWidth: true,
+const STYLE_GROUPS = {
+  borderRadiiStyles: [
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+  ],
+  outerStyles: [
+    'borderColor',
+    'borderWidth',
+    'margin',
+    'marginBottom',
+    'marginEnd',
+    'marginHorizontal',
+    'marginLeft',
+    'marginRight',
+    'marginStart',
+    'marginTop',
+    'marginVertical',
+    'width',
+    'height',
+  ],
+  innerStyles: [
+    'alignSelf',
+    'display',
+    'flexBasis',
+    'flexGrow',
+    'flexShrink',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'zIndex',
+  ],
+  applyToAllStyles: [
+    'flex',
+    'position',
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'start',
+    'end',
+  ],
+} as const;
 
-  margin: true,
-  marginBottom: true,
-  marginEnd: true,
-  marginHorizontal: true,
-  marginLeft: true,
-  marginRight: true,
-  marginStart: true,
-  marginTop: true,
-  marginVertical: true,
+const groupByStyle = (styles: ViewStyle) => {
+  const borderRadiiStyles = {} as ViewStyle;
+  const outerStyles = {} as ViewStyle;
+  const innerStyles = {} as ViewStyle;
+  const applyToAllStyles = {} as ViewStyle;
+  const restStyles = {} as ViewStyle;
 
-  width: true,
-  height: true,
-};
+  Object.keys(styles).forEach((key) => {
+    if (STYLE_GROUPS.borderRadiiStyles.includes(key)) {
+      borderRadiiStyles[key] = styles[key];
+    } else if (STYLE_GROUPS.outerStyles.includes(key)) {
+      outerStyles[key] = styles[key];
+    } else if (STYLE_GROUPS.innerStyles.includes(key)) {
+      innerStyles[key] = styles[key];
+    } else if (STYLE_GROUPS.applyToAllStyles.includes(key)) {
+      applyToAllStyles[key] = styles[key];
+    } else {
+      restStyles[key] = styles[key];
+    }
+  });
 
-const BORDERS: { [key in keyof ViewStyle]?: true } = {
-  borderRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
+  return {
+    borderRadiiStyles,
+    outerStyles,
+    innerStyles,
+    applyToAllStyles,
+    restStyles,
+  };
 };
 
-const INNER_STYLES: { [key in keyof ViewStyle]?: true } = {
-  alignSelf: true,
-  display: true,
-  flexBasis: true,
-  flexGrow: true,
-  flexShrink: true,
-  maxHeight: true,
-  maxWidth: true,
-  minHeight: true,
-  minWidth: true,
+// to remain the same curvature of both inner and outer corners
+// https://twitter.com/lilykonings/status/1567317037126680576
+const shrinkBorderRadiiByBorderWidth = (
+  borderRadiiStyles: ViewStyle,
+  borderWidth: number
+) => {
+  const newBorderRadiiStyles = { ...borderRadiiStyles };
 
-  zIndex: true,
-};
-
-const BOTH_STYLES: { [key in keyof ViewStyle]?: true } = {
-  flex: true,
+  STYLE_GROUPS.borderRadiiStyles.forEach((borderRadiusType) => {
+    if (newBorderRadiiStyles.hasOwnProperty(borderRadiusType)) {
+      newBorderRadiiStyles[borderRadiusType] -= borderWidth;
+    }
+  });
 
-  position: true,
-  left: true,
-  right: true,
-  top: true,
-  bottom: true,
-  start: true,
-  end: true,
+  return newBorderRadiiStyles;
 };
 
-export function splitStyleProp<T extends ViewStyle>(style?: StyleProp<T>): any {
+export function splitStyleProp<T extends ViewStyle>(
+  style?: StyleProp<T>
+): {
+  outerStyles: T;
+  innerStyles: T;
+  restStyles: T;
+} {
   const resolvedStyle = StyleSheet.flatten(style ?? {});
 
-  const borders: Record<string, unknown> = {};
-  const outerStyles: Record<string, unknown> = {};
-  const innerStyles: Record<string, unknown> = {};
-  const bothStyles: Record<string, unknown> = {};
-  const restStyles: Record<string, unknown> = {};
+  let outerStyles = {} as T;
+  let innerStyles = { overflow: 'hidden', flexGrow: 1 } as T;
+  let restStyles = { flexGrow: 1 } as T;
 
-  Object.entries(resolvedStyle).forEach(([key, value]) => {
-    if ((BORDERS as { [key: string]: true | undefined })[key] === true) {
-      borders[key] = value;
-    } else if (
-      (OUTER_STYLES as { [key: string]: true | undefined })[key] === true
-    ) {
-      outerStyles[key] = value;
-    } else if (
-      (BOTH_STYLES as { [key: string]: true | undefined })[key] === true
-    ) {
-      bothStyles[key] = value;
-    } else if (
-      (INNER_STYLES as { [key: string]: true | undefined })[key] === true
-    ) {
-      innerStyles[key] = value;
-    } else {
-      restStyles[key] = value;
-    }
-  });
+  const styleGroups = groupByStyle(resolvedStyle);
+
+  outerStyles = {
+    ...outerStyles,
+    ...styleGroups.borderRadiiStyles,
+    ...styleGroups.applyToAllStyles,
+    ...styleGroups.outerStyles,
+  };
+  innerStyles = {
+    ...innerStyles,
+    ...styleGroups.applyToAllStyles,
+    ...styleGroups.innerStyles,
+  };
+  restStyles = {
+    ...restStyles,
+    ...styleGroups.restStyles,
+    ...styleGroups.applyToAllStyles,
+  };
+
+  // if borderWidth was specified it adjusts border radii
+  //  to remain the same curvature for both inner and outer views
+  if (styleGroups.outerStyles.borderWidth != null) {
+    const { borderWidth } = styleGroups.outerStyles;
+
+    const innerBorderRadiiStyles = shrinkBorderRadiiByBorderWidth(
+      { ...styleGroups.borderRadiiStyles },
+      borderWidth
+    );
+
+    innerStyles = { ...innerStyles, ...innerBorderRadiiStyles };
+  }
 
-  return { borders, restStyles, innerStyles, bothStyles, outerStyles };
+  return { outerStyles, innerStyles, restStyles };
 }

From cbe8ffcb4726a255fffb660a1407df64a30d5106 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 11 Dec 2023 16:59:58 +0100
Subject: [PATCH 06/13] Add comment

---
 src/components/splitStyleProp.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index 3692cf8f8d..bf48907be3 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -77,7 +77,8 @@ const groupByStyle = (styles: ViewStyle) => {
   };
 };
 
-// to remain the same curvature of both inner and outer corners
+// if borderWidth was specified it will adjust the border radii
+// to remain the same curvature for both inner and outer views
 // https://twitter.com/lilykonings/status/1567317037126680576
 const shrinkBorderRadiiByBorderWidth = (
   borderRadiiStyles: ViewStyle,

From c2afdc7bf110ab86e191a6ebec6f03155a3c2cc5 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 12 Dec 2023 11:14:15 +0100
Subject: [PATCH 07/13] I lost a battle with Typescript

---
 src/components/splitStyleProp.ts | 106 ++++++++++++++++---------------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index bf48907be3..af0f5f0de5 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -1,50 +1,50 @@
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 const STYLE_GROUPS = {
-  borderRadiiStyles: [
-    'borderRadius',
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomLeftRadius',
-    'borderBottomRightRadius',
-  ],
-  outerStyles: [
-    'borderColor',
-    'borderWidth',
-    'margin',
-    'marginBottom',
-    'marginEnd',
-    'marginHorizontal',
-    'marginLeft',
-    'marginRight',
-    'marginStart',
-    'marginTop',
-    'marginVertical',
-    'width',
-    'height',
-  ],
-  innerStyles: [
-    'alignSelf',
-    'display',
-    'flexBasis',
-    'flexGrow',
-    'flexShrink',
-    'maxHeight',
-    'maxWidth',
-    'minHeight',
-    'minWidth',
-    'zIndex',
-  ],
-  applyToAllStyles: [
-    'flex',
-    'position',
-    'left',
-    'right',
-    'top',
-    'bottom',
-    'start',
-    'end',
-  ],
+  borderRadiiStyles: {
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+  } as const,
+  outerStyles: {
+    borderColor: true,
+    borderWidth: true,
+    margin: true,
+    marginBottom: true,
+    marginEnd: true,
+    marginHorizontal: true,
+    marginLeft: true,
+    marginRight: true,
+    marginStart: true,
+    marginTop: true,
+    marginVertical: true,
+    width: true,
+    height: true,
+  } as const,
+  innerStyles: {
+    alignSelf: true,
+    display: true,
+    flexBasis: true,
+    flexGrow: true,
+    flexShrink: true,
+    maxHeight: true,
+    maxWidth: true,
+    minHeight: true,
+    minWidth: true,
+    zIndex: true,
+  } as const,
+  applyToAllStyles: {
+    flex: true,
+    position: true,
+    left: true,
+    right: true,
+    top: true,
+    bottom: true,
+    start: true,
+    end: true,
+  } as const,
 } as const;
 
 const groupByStyle = (styles: ViewStyle) => {
@@ -55,15 +55,20 @@ const groupByStyle = (styles: ViewStyle) => {
   const restStyles = {} as ViewStyle;
 
   Object.keys(styles).forEach((key) => {
-    if (STYLE_GROUPS.borderRadiiStyles.includes(key)) {
+    if (key in STYLE_GROUPS.borderRadiiStyles) {
+      // @ts-ignore I can't
       borderRadiiStyles[key] = styles[key];
-    } else if (STYLE_GROUPS.outerStyles.includes(key)) {
+    } else if (key in STYLE_GROUPS.outerStyles) {
+      // @ts-ignore figure out
       outerStyles[key] = styles[key];
-    } else if (STYLE_GROUPS.innerStyles.includes(key)) {
+    } else if (key in STYLE_GROUPS.innerStyles) {
+      // @ts-ignore how to
       innerStyles[key] = styles[key];
-    } else if (STYLE_GROUPS.applyToAllStyles.includes(key)) {
+    } else if (key in STYLE_GROUPS.applyToAllStyles) {
+      // @ts-ignore fix these
       applyToAllStyles[key] = styles[key];
     } else {
+      // @ts-ignore types
       restStyles[key] = styles[key];
     }
   });
@@ -86,8 +91,9 @@ const shrinkBorderRadiiByBorderWidth = (
 ) => {
   const newBorderRadiiStyles = { ...borderRadiiStyles };
 
-  STYLE_GROUPS.borderRadiiStyles.forEach((borderRadiusType) => {
-    if (newBorderRadiiStyles.hasOwnProperty(borderRadiusType)) {
+  Object.keys(STYLE_GROUPS.borderRadiiStyles).forEach((borderRadiusType) => {
+    if (borderRadiusType in newBorderRadiiStyles) {
+      // @ts-ignore it's fine
       newBorderRadiiStyles[borderRadiusType] -= borderWidth;
     }
   });

From 4c30ea4cd49aa6f328fb5044d397c6c11751e3c9 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 12 Dec 2023 11:16:33 +0100
Subject: [PATCH 08/13] Rename example

---
 example/src/App.tsx                                          | 4 ++--
 .../release_tests/{complexUI => roundedButtons}/index.tsx    | 5 +----
 2 files changed, 3 insertions(+), 6 deletions(-)
 rename example/src/release_tests/{complexUI => roundedButtons}/index.tsx (97%)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index fd2037eb42..ddf35567ff 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -19,6 +19,7 @@ import Fling from './release_tests/fling';
 import NestedTouchables from './release_tests/nestedTouchables';
 import NestedButtons from './release_tests/nestedButtons';
 import NestedGestureHandlerRootViewWithModal from './release_tests/nestedGHRootViewWithModal';
+import RoundedButtons from './release_tests/roundedButtons';
 import { PinchableBox } from './recipes/scaleAndRotate';
 import PanAndScroll from './recipes/panAndScroll';
 import { BottomSheet } from './showcase/bottomSheet';
@@ -48,7 +49,6 @@ import HoverableIcons from './new_api/hoverable_icons';
 import VelocityTest from './new_api/velocityTest';
 
 import EmptyExample from './empty/EmptyExample';
-import ComplexUI from './release_tests/complexUI';
 
 interface Example {
   name: string;
@@ -116,7 +116,7 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Fling', component: Fling },
       { name: 'Combo', component: ComboWithGHScroll },
       { name: 'Touchables', component: TouchablesIndex as React.ComponentType },
-      { name: 'Complex UI', component: ComplexUI },
+      { name: 'Rounded buttons', component: RoundedButtons },
     ],
   },
   {
diff --git a/example/src/release_tests/complexUI/index.tsx b/example/src/release_tests/roundedButtons/index.tsx
similarity index 97%
rename from example/src/release_tests/complexUI/index.tsx
rename to example/src/release_tests/roundedButtons/index.tsx
index 2271337187..6c9fd6748f 100644
--- a/example/src/release_tests/complexUI/index.tsx
+++ b/example/src/release_tests/roundedButtons/index.tsx
@@ -10,10 +10,7 @@ import {
 } from 'react-native';
 import GestureHandlerRootView from '../../../../src/components/GestureHandlerRootView';
 import { ScrollView } from '../../../../src/components/GestureComponents';
-import {
-  BorderlessButton,
-  RectButton,
-} from '../../../../src/components/GestureButtons';
+import { RectButton } from '../../../../src/components/GestureButtons';
 
 const MyButton = RectButton;
 

From 453c160cce3f00f8e76aa002e40562fcd5c1d663 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 12 Dec 2023 11:21:25 +0100
Subject: [PATCH 09/13] Ignore ts error, remove console log

---
 example/src/release_tests/roundedButtons/index.tsx | 5 +----
 src/components/GestureButtons.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/example/src/release_tests/roundedButtons/index.tsx b/example/src/release_tests/roundedButtons/index.tsx
index 6c9fd6748f..fe49f17865 100644
--- a/example/src/release_tests/roundedButtons/index.tsx
+++ b/example/src/release_tests/roundedButtons/index.tsx
@@ -53,10 +53,7 @@ function Gallery() {
     <View style={[styles.container, styles.gap, styles.marginBottom]}>
       <MyButton style={styles.fullWidthButton} />
       <View style={[styles.row, styles.gap]}>
-        <MyButton
-          style={styles.leftButton}
-          onPress={() => console.log('xDDD')}
-        />
+        <MyButton style={styles.leftButton} />
         <MyButton style={styles.rightButton} />
       </View>
     </View>
diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index c856dee0cc..886b636bf0 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -235,8 +235,8 @@ export class BaseButton extends React.Component<BaseButtonProps> {
         <View style={innerStyles}>
           <RawButton
             rippleColor={processColor(rippleColor)}
+            // @ts-ignore TODO: fix this type
             style={restStyles}
-            // style={style}
             {...rest}
             onGestureEvent={this.onGestureEvent}
             onHandlerStateChange={this.onHandlerStateChange}

From f11887dcc743b052b46ba3f613e33a0e604a0c8e Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Tue, 12 Dec 2023 11:47:27 +0100
Subject: [PATCH 10/13] Remove dead code

---
 src/components/GestureButtons.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index 886b636bf0..4bfba22cca 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -194,12 +194,6 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     this.lastActive = active;
   };
 
-  // componentDidMount() {
-  //   this.ref.current?.measure((width: number, height: number) => {
-  //     this.setState({ width, height });
-  //   });
-  // }
-
   private onLongPress = () => {
     this.longPressDetected = true;
     this.props.onLongPress?.();

From 5ef713820eaa3ade0f712503af2e06c4c2010a7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= <tomasz.zelawski@swmansion.com>
Date: Thu, 14 Dec 2023 13:33:52 +0100
Subject: [PATCH 11/13] murder TS

---
 src/components/GestureButtons.tsx |  3 +-
 src/components/splitStyleProp.ts  | 61 ++++++++++++++++++++-----------
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/GestureButtons.tsx b/src/components/GestureButtons.tsx
index 4bfba22cca..35a5f2c08d 100644
--- a/src/components/GestureButtons.tsx
+++ b/src/components/GestureButtons.tsx
@@ -65,6 +65,7 @@ export interface RawButtonProps extends NativeViewGestureHandlerProps {
    * Set this to true if you don't want the system to play sound when the button is pressed.
    */
   touchSoundDisabled?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 export interface BaseButtonProps extends RawButtonProps {
@@ -86,7 +87,6 @@ export interface BaseButtonProps extends RawButtonProps {
    * method.
    */
   onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
   testID?: string;
 
   /**
@@ -229,7 +229,6 @@ export class BaseButton extends React.Component<BaseButtonProps> {
         <View style={innerStyles}>
           <RawButton
             rippleColor={processColor(rippleColor)}
-            // @ts-ignore TODO: fix this type
             style={restStyles}
             {...rest}
             onGestureEvent={this.onGestureEvent}
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index af0f5f0de5..ee217843f5 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -47,31 +47,50 @@ const STYLE_GROUPS = {
   } as const,
 } as const;
 
-const groupByStyle = (styles: ViewStyle) => {
-  const borderRadiiStyles = {} as ViewStyle;
-  const outerStyles = {} as ViewStyle;
-  const innerStyles = {} as ViewStyle;
-  const applyToAllStyles = {} as ViewStyle;
-  const restStyles = {} as ViewStyle;
-
-  Object.keys(styles).forEach((key) => {
+type BorderRadiiKey = keyof typeof STYLE_GROUPS.borderRadiiStyles;
+type OuterKey = keyof typeof STYLE_GROUPS.outerStyles;
+type InnerKey = keyof typeof STYLE_GROUPS.innerStyles;
+type ApplyToAllKey = keyof typeof STYLE_GROUPS.applyToAllStyles;
+
+type BorderRadiiStyles = Pick<ViewStyle, BorderRadiiKey>;
+type OuterStyles = Pick<ViewStyle, OuterKey>;
+type InnerStyles = Pick<ViewStyle, InnerKey>;
+type ApplyToAllStyles = Pick<ViewStyle, ApplyToAllKey>;
+type RestStyles = Omit<
+  ViewStyle,
+  BorderRadiiKey | OuterKey | InnerKey | ApplyToAllKey
+>;
+
+type GroupedStyles = {
+  borderRadiiStyles: BorderRadiiStyles;
+  outerStyles: OuterStyles;
+  innerStyles: InnerStyles;
+  applyToAllStyles: ApplyToAllStyles;
+  restStyles: RestStyles;
+};
+
+const groupByStyle = (styles: ViewStyle): GroupedStyles => {
+  const borderRadiiStyles = {} as Record<string, unknown>;
+  const outerStyles = {} as Record<string, unknown>;
+  const innerStyles = {} as Record<string, unknown>;
+  const applyToAllStyles = {} as Record<string, unknown>;
+  const restStyles = {} as Record<string, unknown>;
+
+  let key: keyof ViewStyle;
+
+  for (key in styles) {
     if (key in STYLE_GROUPS.borderRadiiStyles) {
-      // @ts-ignore I can't
       borderRadiiStyles[key] = styles[key];
     } else if (key in STYLE_GROUPS.outerStyles) {
-      // @ts-ignore figure out
       outerStyles[key] = styles[key];
     } else if (key in STYLE_GROUPS.innerStyles) {
-      // @ts-ignore how to
       innerStyles[key] = styles[key];
     } else if (key in STYLE_GROUPS.applyToAllStyles) {
-      // @ts-ignore fix these
       applyToAllStyles[key] = styles[key];
     } else {
-      // @ts-ignore types
       restStyles[key] = styles[key];
     }
-  });
+  }
 
   return {
     borderRadiiStyles,
@@ -86,17 +105,17 @@ const groupByStyle = (styles: ViewStyle) => {
 // to remain the same curvature for both inner and outer views
 // https://twitter.com/lilykonings/status/1567317037126680576
 const shrinkBorderRadiiByBorderWidth = (
-  borderRadiiStyles: ViewStyle,
+  borderRadiiStyles: BorderRadiiStyles,
   borderWidth: number
 ) => {
   const newBorderRadiiStyles = { ...borderRadiiStyles };
 
-  Object.keys(STYLE_GROUPS.borderRadiiStyles).forEach((borderRadiusType) => {
-    if (borderRadiusType in newBorderRadiiStyles) {
-      // @ts-ignore it's fine
-      newBorderRadiiStyles[borderRadiusType] -= borderWidth;
-    }
-  });
+  let borderRadiusType: BorderRadiiKey;
+
+  for (borderRadiusType in newBorderRadiiStyles) {
+    newBorderRadiiStyles[borderRadiusType] =
+      (newBorderRadiiStyles[borderRadiusType] as number) - borderWidth;
+  }
 
   return newBorderRadiiStyles;
 };

From 40d0e938c9719e3ce1209d81aecf675abbd83360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= <tomasz.zelawski@swmansion.com>
Date: Thu, 14 Dec 2023 13:48:51 +0100
Subject: [PATCH 12/13] fix CI

---
 example/src/release_tests/roundedButtons/index.tsx | 10 +---------
 src/components/splitStyleProp.ts                   |  2 +-
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/example/src/release_tests/roundedButtons/index.tsx b/example/src/release_tests/roundedButtons/index.tsx
index fe49f17865..8a22f884b7 100644
--- a/example/src/release_tests/roundedButtons/index.tsx
+++ b/example/src/release_tests/roundedButtons/index.tsx
@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  View,
-  StyleSheet,
-  Text,
-  SafeAreaView,
-  Dimensions,
-  Image,
-  Pressable,
-} from 'react-native';
+import { View, StyleSheet, Text, SafeAreaView } from 'react-native';
 import GestureHandlerRootView from '../../../../src/components/GestureHandlerRootView';
 import { ScrollView } from '../../../../src/components/GestureComponents';
 import { RectButton } from '../../../../src/components/GestureButtons';
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index ee217843f5..a4fea98a1b 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -127,7 +127,7 @@ export function splitStyleProp<T extends ViewStyle>(
   innerStyles: T;
   restStyles: T;
 } {
-  const resolvedStyle = StyleSheet.flatten(style ?? {});
+  const resolvedStyle = StyleSheet.flatten((style ?? {}) as ViewStyle);
 
   let outerStyles = {} as T;
   let innerStyles = { overflow: 'hidden', flexGrow: 1 } as T;

From 337bb90b3dc68873cd209982e000cdcfe81b3490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Kapu=C5=9Bciak?=
 <39658211+kacperkapusciak@users.noreply.github.com>
Date: Wed, 10 Jan 2024 16:35:43 +0100
Subject: [PATCH 13/13] Apply suggestions from code review

Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>
---
 example/src/release_tests/roundedButtons/index.tsx | 8 +++++---
 src/components/splitStyleProp.ts                   | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/example/src/release_tests/roundedButtons/index.tsx b/example/src/release_tests/roundedButtons/index.tsx
index 8a22f884b7..9054ee65ca 100644
--- a/example/src/release_tests/roundedButtons/index.tsx
+++ b/example/src/release_tests/roundedButtons/index.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { View, StyleSheet, Text, SafeAreaView } from 'react-native';
-import GestureHandlerRootView from '../../../../src/components/GestureHandlerRootView';
-import { ScrollView } from '../../../../src/components/GestureComponents';
-import { RectButton } from '../../../../src/components/GestureButtons';
+import {
+  GestureHandlerRootView,
+  ScrollView,
+  RectButton,
+} from 'react-native-gesture-handler';
 
 const MyButton = RectButton;
 
diff --git a/src/components/splitStyleProp.ts b/src/components/splitStyleProp.ts
index a4fea98a1b..c47f94628e 100644
--- a/src/components/splitStyleProp.ts
+++ b/src/components/splitStyleProp.ts
@@ -153,7 +153,7 @@ export function splitStyleProp<T extends ViewStyle>(
   };
 
   // if borderWidth was specified it adjusts border radii
-  //  to remain the same curvature for both inner and outer views
+  // to remain the same curvature for both inner and outer views
   if (styleGroups.outerStyles.borderWidth != null) {
     const { borderWidth } = styleGroups.outerStyles;