diff --git a/.changeset/wet-cycles-greet.md b/.changeset/wet-cycles-greet.md new file mode 100644 index 00000000000..ffb61ed19b5 --- /dev/null +++ b/.changeset/wet-cycles-greet.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix: react native text input alignment with prefix diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx index 78c7b31399a..9028ea7e576 100644 --- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.native.tsx @@ -8,6 +8,7 @@ import type { TouchableHighlightProps, GestureResponderEvent, } from 'react-native'; +import { Platform as RNPlatform } from 'react-native'; import type { BaseInputProps } from './BaseInput'; import type { StyledBaseInputProps } from './types'; import { getBaseInputStyles } from './baseInputStyles'; @@ -127,7 +128,10 @@ const getRNInputStyles = ( hasTags: props.hasTags, isDropdownTrigger: props.isDropdownTrigger, }), - lineHeight: undefined, + lineHeight: RNPlatform.select({ + android: makeSize(props.theme.typography.lineHeights[100]), + ios: undefined, + }), textAlignVertical: 'top', height: getInputHeight({ isTextArea: props.isTextArea,