Add elevation prop

[Taakn]

Hello,

Would it be possible for you to add the elevation prop on Android? When using Material Design, some buttons have a higher elevation and they appear on top of the picker.

Thanks so much

[xwenliang]

I have no idea if there are ways to change elevation of <View>, both android and ios.
Put picker behind your buttons was the only way i could imagine. Like this:

<View>
    <Button1/>
    <Button2/>
    <Picker/>
</View>

If you have any other good idea, write it here, thanks :D

[Taakn]

Hi @xwenliang no you cannot set prop elevation for both Android and iOS. The issue is that on Android only, when you use Material Kit (https://github.com/xinthink/react-native-material-kit), it sets the elevation (and z-index) to 4 on the buttons, so even though you have:

<View>
    <Button1/>
    <Button2/>
    <Picker/>
</View>

The picker appears below Button1 and Button2. Ideally we should be able to configure the picker such as:

<View>
    <Button1/>
    <Button2/>
    <Picker elevation={5}/>
</View>

So that way it's still above the elevated buttons. It should be just a pass through prop really.
I don't know if I'm being super clear. It works fine on iOS because material kit uses shadows instead of elevation.

Thanks so much

[jimthedev]

Afaik there is no z-index (elevation). Instead, react native specifies that the order in which you add the component will determine the altitude. You can track it here: https://productpains.com/post/react-native/zindex-support/

[afilp]

Hi, I cannot get the Picker to be positioned below my Touchable element (there is a Scroll View below the row where this element is).

When it appears, it starts from there and then aligns its bottom there, making it go outside of the screen.

I have to put it far away and this seems buggy... (as it is not loaded below the text field)

[Taakn]

@jimthedev You can have a look here for elevation, specifically the part that reads:

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

You cannot set z-index directly, however setting elevation sets z-index indirectly. That's what Material Kit does, and why my picker is being displayed underneath my buttons though it's ordered last in my components.

So I'd just like to be able to set a higher elevation to the picker so that it's displayed above my Material Kit Buttons

[jimthedev]

Oh gotcha. Thanks for taking the time to write that out. 👍

[xwenliang]

@Taakn All you need is just a prop named elevation? Or can you give me a PR? Thanks in advance.

[xwenliang]

@af7 Got your point, thanks.

[Taakn]

@xwenliang yes just adding an elevation prop. Besides using Material Kit, this will also give people the ability to create a modal picker on Android. I've never done a PR and I don't want to mess up your code but essentially if you just create a new prop pickerElevation of PropTypes.number and add it like this:

<Animated.View style={[styles.picker, {
    elevation: this.state.pickerElevation,
    width: longSide,
    height: this.state.showMask ? height : this.state.style.height,
    bottom: this.state.slideAnim
}]}>

Then it works. I've tested it on Android and iOS (it has no effect on iOS).

Thanks so much.

[xwenliang]

OK, v2.0.4 with pickerElevation prop published 04946f5 :D

[xwenliang]

@af7 Would you mind to open another issue to paste your issue? Thank you.

[Taakn]

@xwenliang very cool thanks!