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

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:

Screen Shot 2020-02-17 at 15 53 59

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

  1. Pingback: DevSecOps

Comments are closed.

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

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:

Screen Shot 2020-02-17 at 15 53 59

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

Comments are closed.