callstack / callstack/react-native-paper

TextInput : Text going multiple lines when I unselect it in IOS

Open
#4,523 10 comments 3 reactions 0 assignees View on GitHub
bug TextInput
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
I am getting an issue in the react native paper Text input component when I add multiline functionality, which means making their value true, then it works fine, but when I make their value false or do not add the multiline key, then when I enter long text and unselect the Textfield the text expand to multiple lines. it only happens in iOS, in Android, it works fine as expected.

### Expected behaviour
if i add multiline functionality then they need to show text in multi-lines but when I make the value of multiline false then not need to take and show text in multi-line

### Code
```
import {SafeAreaView, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import {TextInput} from 'react-native-paper';

const App = () => {
const [surname, setSurName] = useState('');
const [forename, setForeName] = useState('');

return (

setSurName(value)}
outlineColor={'blue'}
activeOutlineColor={'black'}
label={'Surname'}
placeholder="Enter Surname"
placeholderTextColor={'grey'}
mode="outlined"
multiline={true}
/>
setForeName(value)}
outlineColor={'blue'}
activeOutlineColor={'black'}
label={'Forename'}
placeholder="Enter Forename"
placeholderTextColor={'grey'}
mode="outlined"
multiline={false}
/>

);
};

export default App;
const styles = StyleSheet.create({
inputfield: {
marginHorizontal: 20,
marginVertical: 20,
},
});

```

### Preview
image

### Your Environment

| software | version
| --------------------- | -------
| ios | 17.2
| react-native | 0.74.0
| react-native-paper | ^5.12.5

Contributor guide

Open the contributing guide

Research direction

The entry point is the react-native-paper TextInput shown in the reproduction, with multiline toggled true or false on iOS. Start by reproducing the blur behavior with the supplied example on iOS and compare it with Android. Done means a false or omitted multiline prop remains single-line after entering long text and unselecting the field, with regression coverage for the behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.