[0.62.0-rc.2] - Modal is always presented as full screen modal presentation style on ios

[owinter86]

Description:

• presentationStyle for the Modal component no longer has any effect on how the react native modal is presented.

React Native version:

    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 279.68 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3, 29.0.2
      System Images: android-22 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.2.1/11B53 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0
    react-native: 0.62.0-rc.2 => 0.62.0-rc.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.
Issues without reproduction steps or code are likely to stall.

import React from 'react';
import {View, StatusBar, ActivityIndicator, Modal, Button} from 'react-native';

const App = () => {
  const [showModal, setShowModal] = React.useState(false);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Button onPress={() => setShowModal(true)} title="Toggle Modal" />
      </View>

      <Modal visible={!!showModal} presentationStyle="formSheet">
        <View
          style={[
            {
              flex: 1,
              backgroundColor: 'green',
              alignItems: 'center',
              justifyContent: 'center',
            },
          ]}>
          <ActivityIndicator color="white" size="large" />
        </View>
      </Modal>
    </>
  );
};

export default App;

Expected Results

Modal component should allow various flavours as described https://facebook.github.io/react-native/docs/modal#presentationstyle

Snack, code example, screenshot, or link to a repository:

[safaiyeh]

Hello @owinter86 Modal was moved here: https://github.com/react-native-community/react-native-modal

Check if the issue persists with the module, if it does open an issue on that repo!

[owinter86]

Hey @safaiyeh this is just a javascript extension to the react native modal see (https://github.com/react-native-community/react-native-modal/blob/2c801c16a5c880196c106ab74deeaf11646708fb/src/modal.tsx#L8), this component was not part of the lean core effort from what I understand. All the native modules for this still exist in react native core, so will need to be fixed there.

[beetlebum]

I'm experiencing the same issue after going from rc1 to rc2, with no changes to react-native-modal

[mysport12]

@owinter86 the modal is always showing as pageSheet not fullScreen. Also see the discussion from this PR... https://github.com/facebook/react-native/pull/27618

[owinter86]

Fixed in RC.3

[defi-bear]

I was. using react-native-loading-spinner-overlay and in that component used Modal and ActivityIndicator, but sometimes the spinner is not showing since the visible param is true.