Question 256437 in React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    setting defaultValue worked for me

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search