Dialog shifts vertically multiple times when app is backgrounded then foregrounded.

[dchhetri]

Environment

System:
OS: macOS 12.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 1.43 GB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: 2022.02.07.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Platforms

Verified only on iOS

Versions

• Android:
• iOS: 16.2
• react-native-dialog: 9.3.0
• react-native: 0.70.5
• react: 18.1.0

Description

The dialog renders with keyboardVerticalOffset vertical offset. I then background the app. Then foreground the app. I see the dialog now has shifted even more vertically than the original vertical offset.

It is worth noting that the shift happens only once. Multiple background then foreground doesn't continue to shift the dialog higher.

The full component code

const PromptDialog = (props: PromptDialogProps) => {
  const { title, description, placeholder, visible, onCancel, onSave } = props
  const [inputText, setInputText] = useState("")
  return (
    <Dialog.Container visible={visible} keyboardVerticalOffset={400}>
      <Dialog.Title>{title}</Dialog.Title>
      <Dialog.Description>{description}</Dialog.Description>
      <Dialog.Input
        placeholder={placeholder}
        value={inputText}
        onChangeText={setInputText}
        autoFocus={true}
      />
      <Dialog.Button label="Cancel" onPress={onCancel} />
      <Dialog.Button label="Save" onPress={() => onSave(inputText)} />
    </Dialog.Container>
  )
}

It causes the dialog to shift up even more after backgrounding then foregrounding. Demo below.

Reproducible Demo

RPReplay_Final1671255213.mp4