Skip to content

[5.14.5] TextInput with multiline inside Portal causes rapid flicker and infinite onChangeText calls [iOS] #4831

@nahooni0511

Description

@nahooni0511

Current behaviour

Typing in a react-native-paper TextInput with multiline inside a Portal causes rapid flicker and floods onChangeText (dozens of calls per second). Removing either Portal or multiline stops the issue.

Expected behaviour

No flicker; onChangeText fires once per user input.

How to reproduce?

  1. Render a multiline TextInput inside a Portal.
  2. Run iOS
  3. Focus the field and type characters.
import * as React from 'react';
import { Portal, TextInput } from 'react-native-paper';

export default function Repro() {
  const [text, setText] = React.useState('');
  return (
    <Portal>
      <TextInput
        label="Notes"
        mode="outlined"
        multiline
        value={text}
        onChangeText={(t) => {
          console.count('onChangeText'); // spams rapidly
          setText(t);
        }}
        style={{ minHeight: 120 }}
      />
    </Portal>
  );
}

What have you tried so far?

  • Removing multiline → issue gone
  • Removing Portal → issue gone

Your Environment

software version
ios x
android x
react-native 0.81.5
react-native-paper 5.14.5
node x.x.x
npm or yarn x.x.x
expo sdk N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions