From 61483aa15d39576f632010022f61d0f838c38752 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 21 Mar 2016 06:23:36 -0700 Subject: [PATCH] Add support for elevation in DrawerLayoutAndroid Summary:It didn't work for a few reason. First, the drawer view NEEDS to have a background color or no shadow will ever render. Second, we need to use the `setDrawerElevation` method instead of `setElevation` for DrawerLayout. Finally we need to actually pass the style value (maybe we could just pass elevation but I don't really think it can cause any issues) down to the native component as it is not the case at the moment. I also added a default style to elevation of 16 which is the standard for material design according to https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs. I could also default it to 0 so it keeps the same appearance as before but I think it looks better this way. Closes #6022 **Test plan** Tested using the DrawerLayout in the UIExplorer app. Before, elevation 0 screen shot 2016-02-23 at 1 55 42 am After, elevation Closes https://github.com/facebook/react-native/pull/6100 Reviewed By: bestander Differential Revision: D3012242 Pulled By: lexs fb-gh-sync-id: 4967d7ec920f0229d823032ba95c8a3cace329c6 shipit-source-id: 4967d7ec920f0229d823032ba95c8a3cace329c6 --- .../DrawerLayoutAndroid.android.js | 4 +++- .../processing/ReactPropertyProcessor.java | 3 ++- .../java/com/facebook/react/views/drawer/BUCK | 1 + .../drawer/ReactDrawerLayoutManager.java | 24 +++++++++++++++++++ 4 files changed, 30 insertions(+), 2 deletions(-) diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js index 2f4410d523c62b..4be589ab78b3d5 100644 --- a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +++ b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js @@ -156,7 +156,7 @@ var DrawerLayoutAndroid = React.createClass({ drawerWidth={this.props.drawerWidth} drawerPosition={this.props.drawerPosition} drawerLockMode={this.props.drawerLockMode} - style={styles.base} + style={[styles.base, this.props.style]} onDrawerSlide={this._onDrawerSlide} onDrawerOpen={this._onDrawerOpen} onDrawerClose={this._onDrawerClose} @@ -218,6 +218,7 @@ var DrawerLayoutAndroid = React.createClass({ var styles = StyleSheet.create({ base: { flex: 1, + elevation: 16, }, mainSubview: { position: 'absolute', @@ -230,6 +231,7 @@ var styles = StyleSheet.create({ position: 'absolute', top: 0, bottom: 0, + backgroundColor: 'white', }, }); diff --git a/ReactAndroid/src/main/java/com/facebook/react/processing/ReactPropertyProcessor.java b/ReactAndroid/src/main/java/com/facebook/react/processing/ReactPropertyProcessor.java index bc18bf862fe402..42c5711bae18d8 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/processing/ReactPropertyProcessor.java +++ b/ReactAndroid/src/main/java/com/facebook/react/processing/ReactPropertyProcessor.java @@ -578,7 +578,8 @@ public void addProperty(PropertyInfo propertyInfo) throws ReactPropertyException if (checkPropertyExists(name)) { throw new ReactPropertyException( "Module " + mClassName + " has already registered a property named \"" + - name + '"', propertyInfo); + name + "\". If you want to override a property, don't add" + + "the @ReactProp annotation to the property in the subclass", propertyInfo); } mProperties.add(propertyInfo); diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/drawer/BUCK b/ReactAndroid/src/main/java/com/facebook/react/views/drawer/BUCK index 6698d3393e54af..8aea7907e06fe7 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/drawer/BUCK +++ b/ReactAndroid/src/main/java/com/facebook/react/views/drawer/BUCK @@ -10,6 +10,7 @@ android_library( react_native_target('java/com/facebook/react/uimanager:uimanager'), react_native_target('java/com/facebook/react/uimanager/annotations:annotations'), react_native_target('java/com/facebook/react/views/scroll:scroll'), + react_native_dep('libraries/fbcore/src/main/java/com/facebook/common/logging:logging'), react_native_dep('third-party/java/jsr-305:jsr-305'), react_native_dep('third-party/android/support/v4:lib-support-v4'), ], diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayoutManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayoutManager.java index 1926c110abcd5b..0595d0fd07627c 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayoutManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/drawer/ReactDrawerLayoutManager.java @@ -11,15 +11,21 @@ import javax.annotation.Nullable; +import java.lang.reflect.InvocationTargetException; +import java.lang.reflect.Method; import java.util.Map; +import android.os.Build; import android.support.v4.widget.DrawerLayout; import android.view.Gravity; import android.view.View; +import com.facebook.common.logging.FLog; + import com.facebook.react.bridge.JSApplicationIllegalArgumentException; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.common.MapBuilder; +import com.facebook.react.common.ReactConstants; import com.facebook.react.common.SystemClock; import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ThemedReactContext; @@ -89,6 +95,24 @@ public void setDrawerLockMode(ReactDrawerLayout view, @Nullable String drawerLoc } } + @Override + public void setElevation(ReactDrawerLayout view, float elevation) { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { + // Facebook is using an older version of the support lib internally that doesn't support + // setDrawerElevation so we invoke it using reflection. + // TODO: Call the method directly when this is no longer needed. + try { + Method method = ReactDrawerLayout.class.getMethod("setDrawerElevation", float.class); + method.invoke(view, PixelUtil.toPixelFromDIP(elevation)); + } catch (Exception ex) { + FLog.w( + ReactConstants.TAG, + "setDrawerElevation is not available in this version of the support lib.", + ex); + } + } + } + @Override public boolean needsCustomLayoutForChildren() { // Return true, since DrawerLayout will lay out it's own children.