Description:
presentationStylefor 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:
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.