diff --git a/packages/rn-tester/js/examples/Modal/ModalCustomizable.js b/packages/rn-tester/js/examples/Modal/ModalCustomizable.js
new file mode 100644
index 00000000000..2b9c72d37d3
--- /dev/null
+++ b/packages/rn-tester/js/examples/Modal/ModalCustomizable.js
@@ -0,0 +1,343 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import * as React from 'react';
+import {
+ Modal,
+ Picker,
+ Platform,
+ StyleSheet,
+ Switch,
+ Text,
+ TouchableHighlight,
+ View,
+ ScrollView,
+} from 'react-native';
+import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
+
+const Item = Picker.Item;
+
+class Button extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
+ state = {
+ active: false,
+ };
+
+ _onHighlight = () => {
+ this.setState({active: true});
+ };
+
+ _onUnhighlight = () => {
+ this.setState({active: false});
+ };
+
+ render() {
+ const colorStyle = {
+ color: this.state.active ? '#fff' : '#000',
+ };
+ return (
+
+
+ {this.props.children}
+
+
+ );
+ }
+}
+
+const supportedOrientationsPickerValues = [
+ ['portrait'],
+ ['landscape'],
+ ['landscape-left'],
+ ['portrait', 'landscape-right'],
+ ['portrait', 'landscape'],
+ [],
+];
+
+class ModalExample extends React.Component<{...}, $FlowFixMe> {
+ state: $FlowFixMe = {
+ animationType: 'none',
+ modalVisible: false,
+ transparent: false,
+ hardwareAccelerated: false,
+ statusBarTranslucent: false,
+ presentationStyle: 'fullScreen',
+ selectedSupportedOrientation: '0',
+ currentOrientation: 'unknown',
+ action: '',
+ };
+
+ _setModalVisible = visible => {
+ this.setState({modalVisible: visible});
+ };
+
+ _setAnimationType = type => {
+ this.setState({animationType: type});
+ };
+
+ _toggleTransparent = () => {
+ this.setState({transparent: !this.state.transparent});
+ };
+
+ _toggleHardwareAccelerated = () => {
+ this.setState({hardwareAccelerated: !this.state.hardwareAccelerated});
+ };
+
+ _toggleStatusBarTranslucent = () => {
+ this.setState({statusBarTranslucent: !this.state.statusBarTranslucent});
+ };
+
+ renderSwitch(): React.Node {
+ if (Platform.isTV) {
+ return null;
+ }
+ if (Platform.OS === 'android') {
+ return (
+ <>
+ Hardware Accelerated
+
+ Status Bar Translucent
+
+ Transparent
+
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ render(): React.Node {
+ const modalBackgroundStyle = {
+ backgroundColor: this.state.transparent
+ ? 'rgba(0, 0, 0, 0.5)'
+ : '#f5fcff',
+ };
+ const innerContainerTransparentStyle = this.state.transparent
+ ? {backgroundColor: '#fff', padding: 20}
+ : null;
+ const activeButtonStyle = {
+ backgroundColor: '#ddd',
+ };
+
+ return (
+
+ this._setModalVisible(false)}
+ supportedOrientations={
+ supportedOrientationsPickerValues[
+ Number(this.state.selectedSupportedOrientation)
+ ]
+ }
+ onOrientationChange={evt =>
+ this.setState({currentOrientation: evt.nativeEvent.orientation})
+ }
+ onDismiss={() => {
+ if (this.state.action === 'onDismiss') {
+ alert(this.state.action);
+ }
+ }}
+ onShow={() => {
+ if (this.state.action === 'onShow') {
+ alert(this.state.action);
+ }
+ }}>
+
+
+
+ This modal was presented{' '}
+ {this.state.animationType === 'none' ? 'without' : 'with'}{' '}
+ animation.
+
+
+ It is currently displayed in {this.state.currentOrientation}{' '}
+ mode.
+
+
+
+
+
+
+ Animation Type
+
+
+
+
+
+ {this.renderSwitch()}
+ {this.renderPickers()}
+
+
+ );
+ }
+ renderPickers(): React.Node {
+ if (Platform.isTV) {
+ return null;
+ }
+ return (
+
+
+ Presentation style
+
+ this.setState({presentationStyle})
+ }
+ itemStyle={styles.pickerItem}>
+