Giters

react-native-modal / react-native-modal

An enhanced, animated, customizable Modal for React Native.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Safe area view content being pushed down

thomas-forbes opened this issue · comments

commented

Environment

System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1
Memory: 301.36 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS5
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Platforms

Only tested on iOS

Versions

  • iOS: 15.5
  • react-native-modal: ^13.0.1
  • react-native: 0.68.2
  • react: 17.0.2

Description

When using this package and a safe area view with the slide up animation the text goes up normally but when it reaches the top it looks like its being pushed down to accommodate the safe area view. Its quite noticeable if you look hard at the title and scrub the video. When using the built-in modal this doesn't happen. It also seems to be less of an issue the slower the speed.

Built in modal

RPReplay_Final1661497304.mp4

react-native-modal

RPReplay_Final1661497343.mp4

Slow react-native-modal

RPReplay_Final1661497376.mp4

Reproducible Demo

    <Modal
      isVisible={modalVis}
      style={tw`m-0`}
      // animationInTiming={5000}
    >
      <SafeAreaView style={tw`w-full h-full bg-[#14191f]`}>
        <ScrollView contentContainerStyle={tw`h-full`}>
          <View
            style={tw`flex-col justify-between items-center my-5 mx-5 h-11/12 w-11/12`}
          >
            ...
          </View>
        </ScrollView>
      </SafeAreaView>
    </Modal>

Styles are using Tailwind CSS (https://github.com/jaredh159/tailwind-react-native-classnames)

commented

@thomas-forbes Have you found a solution for that. I have the same problem where I am trying to use insets inside the modal, and they are fix for Android, however the inset change in IOS as te screen slide up or slide down to close it. I tried using SafeAreaProvider wrapped inside the Modal with SafeAreaView or useSafeAreaInsets for the content or using the built in SafeAreaView and in both case it does the same...