fix: TextInput border being cut out (#2786)

callstack · Jun 24, 2021 · d4c594b · d4c594b
1 parent 75abfd0
commit d4c594b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -68,6 +68,7 @@ export type LabelProps = {
   errorColor?: string;
   error?: boolean | null;
   onLayoutAnimatedText: (args: any) => void;
+  roundness: number;
 };
 export type InputLabelProps = {
   parentState: State;