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

Question

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

score 1 · Accepted Answer · answered Aug 20 '23 at 07:57

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

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

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

1 Answers1