TextInput : Text going multiple lines when I unselect it in IOS
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 (
<SafeAreaView>
<TextInput
style={styles.inputfield}
value={surname}
onChangeText={value => setSurName(value)}
outlineColor={'blue'}
activeOutlineColor={'black'}
label={'Surname'}
placeholder="Enter Surname"
placeholderTextColor={'grey'}
mode="outlined"
multiline={true}
/>
<TextInput
style={styles.inputfield}
value={forename}
onChangeText={value => setForeName(value)}
outlineColor={'blue'}
activeOutlineColor={'black'}
label={'Forename'}
placeholder="Enter Forename"
placeholderTextColor={'grey'}
mode="outlined"
multiline={false}
/>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
inputfield: {
marginHorizontal: 20,
marginVertical: 20,
},
});
Preview
Your Environment
| software | version |
|---|---|
| ios | 17.2 |
| react-native | 0.74.0 |
| react-native-paper | ^5.12.5 |
@seb-zabielski
Workaround fix: Set contentStyle={{ paddingTop: 12, paddingBottom: 12 }}.
(paddingVertical doesn't work.)
Didn't help for me, even with this padding still see this issue
And it seems like all the versions starting from 5.0.0 suffer from it
Workaround fix: Set contentStyle={{ paddingTop: 12, paddingBottom: 12 }}.
(paddingVertical doesn't work.)
working for me
I have the same issue. A workaround that works for me:
style={{textAlign: 'auto'}}
I am on react-native-paper 5.13.1 (latest version) and this issue still persists. @mluksha your solution did not solve it for me.
I have the same issue. A workaround that works for me:
style={{textAlign: 'auto'}}
This solutation works for me on version "4.12.5"
Not fixed yet. v5.14.5
A workaround that works for me:
contentStyle={{ textAlign: undefined }}