Skip to content

Commit db7a154

Browse files
Dave MillerFacebook Github Bot 2
Dave Miller
authored and
Facebook Github Bot 2
committed
Open source Modal
Summary: This open sources an internal Modal View Reviewed By: mkonicek Differential Revision: D3065229 fb-gh-sync-id: 763996aef375883d94f70e617bfc7835a9cecb6f shipit-source-id: 763996aef375883d94f70e617bfc7835a9cecb6f
1 parent c76523f commit db7a154

14 files changed

Lines changed: 569 additions & 7 deletions

File tree

‎Examples/UIExplorer/ModalExample.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ var React = require('react-native');
1919
var {
2020
Modal,
2121
StyleSheet,
22-
SwitchIOS,
22+
Switch,
2323
Text,
2424
TouchableHighlight,
2525
View,
@@ -96,7 +96,9 @@ var ModalExample = React.createClass({
9696
<Modal
9797
animated={this.state.animated}
9898
transparent={this.state.transparent}
99-
visible={this.state.modalVisible}>
99+
visible={this.state.modalVisible}
100+
onRequestClose={() => {this._setModalVisible(false)}}
101+
>
100102
<View style={[styles.container, modalBackgroundStyle]}>
101103
<View style={[styles.innerContainer, innerContainerTransparentStyle]}>
102104
<Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
@@ -111,12 +113,12 @@ var ModalExample = React.createClass({
111113

112114
<View style={styles.row}>
113115
<Text style={styles.rowTitle}>Animated</Text>
114-
<SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
116+
<Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
115117
</View>
116118

117119
<View style={styles.row}>
118120
<Text style={styles.rowTitle}>Transparent</Text>
119-
<SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
121+
<Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
120122
</View>
121123

122124
<Button onPress={this._setModalVisible.bind(this, true)}>

‎Examples/UIExplorer/UIExplorerList.android.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
3131
key: 'ListViewExample',
3232
module: require('./ListViewExample'),
3333
},
34+
{
35+
key: 'ModalExample',
36+
module: require('./ModalExample'),
37+
},
3438
{
3539
key: 'PickerAndroidExample',
3640
module: require('./PickerAndroidExample'),

‎Libraries/Modal/Modal.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ var RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
3131
* Navigator instead of Modal. With a top-level Navigator, you have more control
3232
* over how to present the modal scene over the rest of your app by using the
3333
* configureScene property.
34-
*
35-
* This component is only available in iOS at this time.
3634
*/
3735
class Modal extends React.Component {
3836
render(): ?ReactElement {

‎ReactAndroid/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ android {
231231
sourceSets.main {
232232
jni.srcDirs = []
233233
jniLibs.srcDir "$buildDir/react-ndk/exported"
234-
res.srcDirs = ['src/main/res/devsupport', 'src/main/res/shell']
234+
res.srcDirs = ['src/main/res/devsupport', 'src/main/res/shell', 'src/main/res/views/modal']
235235
java {
236236
srcDirs = ['src/main/java', 'src/main/libraries/soloader']
237237
exclude 'com/facebook/react/processing'

‎ReactAndroid/src/main/java/com/facebook/react/views/modal/BUCK‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
include_defs('//ReactAndroid/DEFS')
2+
3+
android_library(
4+
name = 'modal',
5+
srcs = glob(['*.java']),
6+
deps = [
7+
react_native_target('res:modal'),
8+
react_native_target('java/com/facebook/react/bridge:bridge'),
9+
react_native_target('java/com/facebook/react/common:common'),
10+
react_native_target('java/com/facebook/csslayout:csslayout'),
11+
react_native_target('java/com/facebook/react/touch:touch'),
12+
react_native_target('java/com/facebook/react/uimanager:uimanager'),
13+
react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
14+
react_native_target('java/com/facebook/react/views/view:view'),
15+
react_native_dep('third-party/java/infer-annotations:infer-annotations'),
16+
react_native_dep('third-party/java/jsr-305:jsr-305'),
17+
],
18+
visibility = [
19+
'PUBLIC',
20+
],
21+
)
22+
23+
project_config(
24+
src_target = ':modal',
25+
)

‎ReactAndroid/src/main/java/com/facebook/react/views/modal/ModalHostShadowNode.java‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
package com.facebook.react.views.modal;
11+
12+
import android.annotation.TargetApi;
13+
import android.content.Context;
14+
import android.graphics.Point;
15+
import android.view.Display;
16+
import android.view.Surface;
17+
import android.view.WindowManager;
18+
19+
import com.facebook.react.uimanager.LayoutShadowNode;
20+
21+
/**
22+
* We implement the Modal by using an Android Dialog. That will fill the entire window of the
23+
* application. To get layout to work properly, we need to layout all the elements within the
24+
* Modal as if they can fill the entire window. To do that, we need to explicitly set the
25+
* styleWidth and styleHeight on the LayoutShadowNode to be the window size. This will then cause
26+
* the children to layout as if they can fill the window.
27+
*
28+
* To get that we use information from the WindowManager and default Display. We don't use
29+
* DisplayMetricsHolder because it returns values that include the status bar. We only want the
30+
* values of what will actually be shown on screen.
31+
*/
32+
class ModalHostShadowNode extends LayoutShadowNode {
33+
34+
private final Point mMinPoint = new Point();
35+
private final Point mMaxPoint = new Point();
36+
/**
37+
* Once we have all the properties for the we need to measure the window and set the style
38+
* width and height appropriately so that layout is done properly for the view assuming it
39+
* fills the entire window instead of the place it is in the view tree
40+
*/
41+
@Override
42+
@TargetApi(16)
43+
public void onAfterUpdateTransaction() {
44+
super.onAfterUpdateTransaction();
45+
46+
Context context = getThemedContext();
47+
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
48+
Display display = wm.getDefaultDisplay();
49+
// getCurrentSizeRange will return the min and max width and height that the window can be
50+
display.getCurrentSizeRange(mMinPoint, mMaxPoint);
51+
52+
int width, height;
53+
int rotation = display.getRotation();
54+
if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180) {
55+
// If we are vertical the width value comes from min width and height comes from max height
56+
width = mMinPoint.x;
57+
height = mMaxPoint.y;
58+
} else {
59+
// If we are horizontal the width value comes from max width and height comes from min height
60+
width = mMaxPoint.x;
61+
height = mMinPoint.y;
62+
}
63+
setStyleWidth(width);
64+
setStyleHeight(height);
65+
}
66+
}

‎ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostManager.java‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
package com.facebook.react.views.modal;
11+
12+
import java.util.Map;
13+
14+
import android.content.DialogInterface;
15+
16+
import com.facebook.react.common.MapBuilder;
17+
import com.facebook.react.common.SystemClock;
18+
import com.facebook.react.uimanager.LayoutShadowNode;
19+
import com.facebook.react.uimanager.ThemedReactContext;
20+
import com.facebook.react.uimanager.UIManagerModule;
21+
import com.facebook.react.uimanager.ViewGroupManager;
22+
import com.facebook.react.uimanager.annotations.ReactProp;
23+
import com.facebook.react.uimanager.events.EventDispatcher;
24+
25+
/**
26+
* View manager for {@link ReactModalHostView} components.
27+
*/
28+
public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView> {
29+
30+
private static final String REACT_CLASS = "RCTModalHostView";
31+
32+
@Override
33+
public String getName() {
34+
return REACT_CLASS;
35+
}
36+
37+
@Override
38+
protected ReactModalHostView createViewInstance(ThemedReactContext reactContext) {
39+
return new ReactModalHostView(reactContext);
40+
}
41+
42+
@Override
43+
public LayoutShadowNode createShadowNodeInstance() {
44+
return new ModalHostShadowNode();
45+
}
46+
47+
@Override
48+
public Class<? extends LayoutShadowNode> getShadowNodeClass() {
49+
return ModalHostShadowNode.class;
50+
}
51+
52+
@Override
53+
public void onDropViewInstance(ReactModalHostView view) {
54+
super.onDropViewInstance(view);
55+
view.dismiss();
56+
}
57+
58+
@ReactProp(name = "animated")
59+
public void setAnimated(ReactModalHostView view, boolean animated) {
60+
view.setAnimated(animated);
61+
}
62+
63+
@ReactProp(name = "transparent")
64+
public void setTransparent(ReactModalHostView view, boolean transparent) {
65+
view.setTransparent(transparent);
66+
}
67+
68+
@Override
69+
protected void addEventEmitters(
70+
ThemedReactContext reactContext,
71+
final ReactModalHostView view) {
72+
final EventDispatcher dispatcher =
73+
reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
74+
view.setOnRequestCloseListener(
75+
new ReactModalHostView.OnRequestCloseListener() {
76+
@Override
77+
public void onRequestClose(DialogInterface dialog) {
78+
dispatcher.dispatchEvent(new RequestCloseEvent(view.getId(), SystemClock.nanoTime()));
79+
}
80+
});
81+
view.setOnShowListener(
82+
new DialogInterface.OnShowListener() {
83+
@Override
84+
public void onShow(DialogInterface dialog) {
85+
dispatcher.dispatchEvent(new ShowEvent(view.getId(), SystemClock.nanoTime()));
86+
}
87+
});
88+
}
89+
90+
@Override
91+
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
92+
return MapBuilder.<String, Object>builder()
93+
.put(RequestCloseEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRequestClose"))
94+
.put(ShowEvent.EVENT_NAME, MapBuilder.of("registrationName", "onShow"))
95+
.build();
96+
}
97+
98+
@Override
99+
protected void onAfterUpdateTransaction(ReactModalHostView view) {
100+
super.onAfterUpdateTransaction(view);
101+
view.showOrUpdate();
102+
}
103+
}

0 commit comments

Comments
 (0)