From fb2e2f2f583ec18c64c8bf51abbc5756a8d3fca1 Mon Sep 17 00:00:00 2001
From: Bruno Castro <bruno.castro@codeminer42.com>
Date: Tue, 22 Jun 2021 21:24:55 -0300
Subject: [PATCH] fix: TextInput border being cut out

---
 example/src/Examples/TextInputExample.tsx          | 11 ++++++++++-
 src/components/TextInput/Label/LabelBackground.tsx |  3 +--
 src/components/TextInput/TextInputFlat.tsx         |  1 +
 src/components/TextInput/TextInputOutlined.tsx     |  1 +
 src/components/TextInput/types.tsx                 |  1 +
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index aeab399ce8..d366137cf4 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -116,7 +116,7 @@ const TextInputExample = () => {
   return (
     <TextInputAvoidingView>
       <ScreenWrapper
-        style={styles.container}
+        contentContainerStyle={styles.container}
         keyboardShouldPersistTaps={'always'}
         removeClippedSubviews={false}
       >
@@ -435,6 +435,15 @@ const TextInputExample = () => {
             }}
           />
         </View>
+        <View style={styles.inputContainerStyle}>
+          <TextInput
+            mode="outlined"
+            theme={{
+              roundness: 25,
+            }}
+            label="Custom rounded input"
+          />
+        </View>
       </ScreenWrapper>
     </TextInputAvoidingView>
   );
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
index facf30838d..e91037ddf3 100644
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ b/src/components/TextInput/Label/LabelBackground.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
 import AnimatedText from '../../Typography/AnimatedText';
-import { useTheme } from '../../../core/theming';
 
 import type { LabelBackgroundProps } from '../types';
 
@@ -15,6 +14,7 @@ const LabelBackground = ({
     hasActiveOutline,
     label,
     backgroundColor,
+    roundness,
   },
   labelStyle,
 }: LabelBackgroundProps) => {
@@ -23,7 +23,6 @@ const LabelBackground = ({
     inputRange: [0, 1],
     outputRange: [hasFocus ? 1 : 0, 0],
   });
-  const { roundness } = useTheme();
 
   const labelTranslationX = {
     transform: [
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
index 0de59671be..b002387169 100644
--- a/src/components/TextInput/TextInputFlat.tsx
+++ b/src/components/TextInput/TextInputFlat.tsx
@@ -277,6 +277,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
       activeColor,
       placeholderColor,
       errorColor,
+      roundness: theme.roundness,
     };
     const affixTopPosition = {
       [AdornmentSide.Left]: leftAffixTopPosition,
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 0ecabb2457..758f9760fe 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -213,6 +213,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
       backgroundColor: backgroundColor as ColorValue,
       errorColor,
       labelTranslationXOffset,
+      roundness: theme.roundness,
     };
 
     const minHeight = (height ||
diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
index 204ed68617..b45f817aa0 100644
--- a/src/components/TextInput/types.tsx
+++ b/src/components/TextInput/types.tsx
@@ -68,6 +68,7 @@ export type LabelProps = {
   errorColor?: string;
   error?: boolean | null;
   onLayoutAnimatedText: (args: any) => void;
+  roundness: number;
 };
 export type InputLabelProps = {
   parentState: State;