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

https://user-images.githubusercontent.com/820620/208227235-24b2475a-9987-4b7b-8772-b19d1fe01e4b.mp4