react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

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

Open IsmailParacha opened this issue 1 year ago • 9 comments

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

image

Your Environment

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

IsmailParacha avatar Oct 09 '24 07:10 IsmailParacha

@seb-zabielski

IsmailJanParacha avatar Oct 14 '24 07:10 IsmailJanParacha

Workaround fix: Set contentStyle={{ paddingTop: 12, paddingBottom: 12 }}.

(paddingVertical doesn't work.)

Image

SyLiz avatar Nov 01 '24 07:11 SyLiz

Didn't help for me, even with this padding still see this issue

AlexanderBich avatar Nov 06 '24 11:11 AlexanderBich

And it seems like all the versions starting from 5.0.0 suffer from it

AlexanderBich avatar Nov 06 '24 11:11 AlexanderBich

Workaround fix: Set contentStyle={{ paddingTop: 12, paddingBottom: 12 }}.

(paddingVertical doesn't work.)

Image

working for me

IsmailJanParacha avatar Nov 13 '24 12:11 IsmailJanParacha

I have the same issue. A workaround that works for me: style={{textAlign: 'auto'}}

mluksha avatar Dec 03 '24 08:12 mluksha

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.

uloco avatar Apr 04 '25 11:04 uloco

I have the same issue. A workaround that works for me: style={{textAlign: 'auto'}}

This solutation works for me on version "4.12.5"

IKTANIM avatar Jun 17 '25 03:06 IKTANIM

Not fixed yet. v5.14.5

A workaround that works for me: contentStyle={{ textAlign: undefined }}

bs-farhan-shaikh avatar Oct 28 '25 11:10 bs-farhan-shaikh