From 92a7edba7f779e39a83496c399a76d22b3f7ba35 Mon Sep 17 00:00:00 2001 From: Hein Rutjes Date: Thu, 16 Apr 2020 11:05:24 +0200 Subject: [PATCH] Add Android shadowColor prop Add Android box-shadow tests Fix compile errors --- .../BoxShadow/BoxShadowExample.android.js | 121 ++++++++++++++++++ RNTester/js/utils/RNTesterList.android.js | 4 + .../react/uimanager/BaseViewManager.java | 12 ++ .../uimanager/BaseViewManagerInterface.java | 6 +- .../facebook/react/uimanager/ViewProps.java | 1 + 5 files changed, 142 insertions(+), 2 deletions(-) create mode 100644 RNTester/js/examples/BoxShadow/BoxShadowExample.android.js 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";