TextInput without label wraps the value of the field

Current behaviour

When using a TextInput component, if I omit the label prop on iOS and then input something longer than the input’s width, the value will wrap onto the next line. Also note I am not using multiline so this isn’t expected behaviour.

Expected behaviour

I should expect the value not to wrap, but instead clip the value of the text input.

Code sample

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState('');

  return (
    <TextInput
      value={text}
      onChangeText={text => setText(text)}
    />
  );
};

export default MyComponent;

Screenshots (if applicable)

What have you tried

Steps to fix: N/A

Steps to reproduce:

• Use a standard paper text input
• Do not define any additional properties for the component, other than what’s needed to change/update text
• Type into the input until the value is longer than the width of the input.
• Tap away from the input (blur) and notice how the value/text wraps (as seen in the screenshot)

Your Environment

software	version
ios	iOS 14.4 (iPhone 11)
android	N/A
react-native	0.63.4
react-native-paper	4.8.1
node	16.0.0
npm	7.10.0
yarn	1.22.5
expo sdk	N/A
react-native-vector-icons	8.0.0

[lmcjt37]

@lukewalczak Looks like it is the exact same issue. textAlign: 'auto' has fixed the wrapping issue and added the expected ellipsis.

Which is great as now I can remove the hack 😅

Happy for this issue to be closed if not needed now.

[lukewalczak]

Hey @lmcjt37, that issue looks similarly to the bug from react-native related to setting textAlign which we are handling within our input due to RTL.

More details: https://github.com/callstack/react-native-paper/issues/2581.