iosreact-nativetextinputreact-native-paper

Why IOS Multiline Textinput not works correctly in React native paper Dialog?

I'm beginner in React native, I'm trying to have multiline textinput in dialog (dialog component from react native paper module), it works perfect on Android and Web but it not works on IOS.

There is my code:

      <Dialog
        visible={isDialogVisible}
        onDismiss={() => setIsDialogVisible(false)}>
        <TextInput
          multiline
          style={{
            height: 150,
            borderWidth: 1,
          }}
          value={inputVal}
          onChangeText={(text) => setInputVal(text)}
        />

        <Dialog.Actions>
          <Button onPress={() => setIsDialogVisible(false)}>Done</Button>
        </Dialog.Actions>
      </Dialog>

Also you can see this link for demo:

https://snack.expo.dev/@mohsenkh90/react-native-paper-dialog-with-textinput

Solution

  • It seems that it's a known issue in React Native.

    1. TextInput inside a portal is buggy
    2. When a TextInput is inside a Portal, cursor jumps around on edit

    There is a workaround provide in here : By creating HOC for portal

    or a simple workaround is to pass defaultValue as prop to TextInput instead of value

      <Dialog
    visible={isDialogVisible}
    onDismiss={() => setIsDialogVisible(false)}>
    <TextInput
      multiline
      style={{
        height: 150,
        borderWidth: 1,
      }}
      defaultValue={inputVal}                     //changed the prop
      onChangeText={(text) => setInputVal(text)}
    />

    <Dialog.Actions>
      <Button onPress={() => setIsDialogVisible(false)}>Done</Button>
    </Dialog.Actions>
  </Dialog>

    Ref : https://stackoverflow.com/a/64945998/10657559