react-native: Why doesn't support zIndex?

I build a component, but i can not set z-index invariant violation: 'zIndex' is not a valid style property. @vjeux


'use strict';

var React = require('react-native');

var {
  ActivityIndicatorIOS,
  StyleSheet,
  Text,
  View
} = React;

var Loading = React.createClass({
  render: function () {
    return (
      <View style={ styles.container }>
        <View style={ styles.loading }>
          <ActivityIndicatorIOS style={ styles.animate } animating={ true }></ActivityIndicatorIOS>
          <Text style={ styles.text }>Loading...</Text>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    zIndex: 1,
    position: 'absolute',
    alignItems: 'center'
  },

  loading: {
    width: 94,
    height: 94,
    padding: 15,
    opacity: .5,
    borderRadius: 4,
    backgroundColor: 'black'
  },

  animate: {
    marginBottom: 15
  },

  text: {
    color: '#FFF'
  }

});

module.exports = Loading;

Thanks!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 19 (11 by maintainers)

Most upvoted comments

I know this is closed, but this is preventing something as simple as a dropdown from being implementable?

The only way I can think of doing one is to have 1 single View at the bottom of all my other views that happens to hold my options, that I move around across the app depending on which drop-down might need it. That seems really hacky.

+34

alexprice1 on Mar 19, 2016

zIndex can be controlled by re-arranging the components when you render. The later views will be drawn above the earlier ones.

This is easier for debugging because you only need to look at the render order, instead of needing to check the render order and the stylesheet.

#559, #131

ericvicenti on Apr 6, 2015

@aleclarson Thank you so much. Seems like I had a pretty big misunderstanding about how zIndex works. 👍

dragdropswap3

booboothefool on Oct 31, 2016

@andrewnoh zIndex only affects the order of siblings.

In your scenario, you need to change zIndex on the green boxes, instead of the draggable boxes (assuming the green box is the draggable box’s parent).

aleclarson on Oct 31, 2016

Can you add it to https://productpains.com/product/react-native/, so that we can track it and see how popular this is. Thanks!

vjeux on Nov 2, 2015

Yes, however, I still run into this issue. Between my top-most layer and my bottom-most layer of the component tree, there are multiple components in-between that are bound to be positioned absolute or fixed. For example, tab navigation on the left or bottom of the app must be pinned there to prevent movement, generally using fixed.

Therefore, applying position: absolute + the highest zIndex value known within the app, to a component at the bottom layer, is NOT forcing the component to render at the top (especially above the aforementioned tab navigation). Because instead, it binds to the first position: absolute or fixed layer it finds on its way up the tree. Does that help clarify?

joncursi on Oct 28, 2016

d64368b adds zIndex to iOS 3d3b067 adds zIndex to Android

aleclarson on Oct 28, 2016