diff --git a/RNTester/js/examples/BoxShadow/BoxShadowExample.android.js b/RNTester/js/examples/BoxShadow/BoxShadowExample.android.js
new file mode 100644
index 000000000000..381f93e0121b
--- /dev/null
+++ b/RNTester/js/examples/BoxShadow/BoxShadowExample.android.js
@@ -0,0 +1,121 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+'use strict';
+
+const React = require('react');
+const {StyleSheet, View} = require('react-native');
+
+const styles = StyleSheet.create({
+ wrapper: {
+ flexDirection: 'row',
+ },
+ box: {
+ width: 100,
+ height: 100,
+ backgroundColor: 'white',
+ marginRight: 10,
+ },
+ elevation1: {
+ elevation: 1,
+ },
+ elevation2: {
+ elevation: 3,
+ },
+ elevation3: {
+ elevation: 10,
+ },
+ shadowColor1: {
+ shadowColor: 'red',
+ },
+ shadowColor2: {
+ shadowColor: 'blue',
+ },
+ shadowColor3: {
+ shadowColor: '#00FF0080',
+ },
+ shadowShaped: {
+ borderRadius: 50,
+ },
+ border: {
+ borderWidth: 5,
+ borderColor: '#EEE',
+ },
+});
+
+exports.title = 'Box Shadow';
+exports.description =
+ 'Demonstrates some of the shadow styles available to Views.';
+exports.examples = [
+ {
+ title: 'Basic elevation',
+ description: 'elevation: 1, 3, 6',
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Fractional elevation',
+ description: 'elevation: 0.1, 0.5, 1.5',
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Colored shadow',
+ description: "shadowColor: 'red', 'blue', '#00FF0080'",
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Shaped shadow',
+ description: 'borderRadius: 50',
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Borders',
+ description: 'borderWidth: 5',
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ },
+];
diff --git a/RNTester/js/utils/RNTesterList.android.js b/RNTester/js/utils/RNTesterList.android.js
index 66962af51543..0e01adf9f0cb 100644
--- a/RNTester/js/utils/RNTesterList.android.js
+++ b/RNTester/js/utils/RNTesterList.android.js
@@ -144,6 +144,10 @@ const APIExamples: Array = [
key: 'BorderExample',
module: require('../examples/Border/BorderExample'),
},
+ {
+ key: 'BoxShadowExample',
+ module: require('../examples/BoxShadow/BoxShadowExample'),
+ },
{
key: 'ClipboardExample',
module: require('../examples/Clipboard/ClipboardExample'),
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
index ef39975d4936..7f7e076f9f51 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -95,6 +95,18 @@ public void setElevation(@NonNull T view, float elevation) {
ViewCompat.setElevation(view, PixelUtil.toPixelFromDIP(elevation));
}
+ @Override
+ @ReactProp(
+ name = ViewProps.SHADOW_COLOR,
+ defaultInt = Color.BLACK,
+ customType = "Color")
+ public void setShadowColor(@NonNull T view, int shadowColor) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+ view.setOutlineAmbientShadowColor(shadowColor);
+ view.setOutlineSpotShadowColor(shadowColor);
+ }
+ }
+
@Override
@ReactProp(name = ViewProps.Z_INDEX)
public void setZIndex(@NonNull T view, float zIndex) {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
index fb194e213699..053967048ea7 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
@@ -13,8 +13,8 @@
import com.facebook.react.bridge.ReadableMap;
/**
- * This is an interface that should be implemented by view managers supporting the base view
- * properties such as backgroundColor, opacity, etc.
+ * This is an interface that should be implemented by view managers supporting
+ * the base view properties such as backgroundColor, opacity, etc.
*/
public interface BaseViewManagerInterface {
void setAccessibilityActions(T view, @Nullable ReadableArray accessibilityActions);
@@ -43,6 +43,8 @@ public interface BaseViewManagerInterface {
void setElevation(T view, float elevation);
+ void setShadowColor(T view, int shadowColor);
+
void setImportantForAccessibility(T view, @Nullable String importantForAccessibility);
void setNativeId(T view, @Nullable String nativeId);
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
index 19926020b8a7..6d30dffddd26 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -139,6 +139,7 @@ public class ViewProps {
public static final String TRANSFORM = "transform";
public static final String ELEVATION = "elevation";
+ public static final String SHADOW_COLOR = "shadowColor";
public static final String Z_INDEX = "zIndex";
public static final String RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
public static final String ACCESSIBILITY_LABEL = "accessibilityLabel";