React Native Styling

Question

I am trying to understand more about Styling in React Native.

While Dragging a element into bottom container (Yellow), the element goes underneath.

//View

  <View style={styles.container}>
    <View style={styles.itemContainer}>
      <DraggingItem />
    </View>
    <View style={styles.dropContainer}>
           //2nd container
    </View>
  </View>


//STYLING

  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  itemContainer: {
    backgroundColor: 'green',
    height: (window.height*56)/100,
  },

  dropContainer: {
    flex: 1,
    backgroundColor: 'yellow',
    height: (window.height*40)/100,
  },

// ITEM STYLE

 text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    // alignItems: 'center',
    // justifyContent: 'center',
    textAlign: 'center',
    color: "#fff"
  },

  item: {
    backgroundColor: "red",
    width: window.width,
    height: 80,
    borderRadius: 15
  }

Answer 1

you can try zIndex and read more about it hear. if zIndex if your yellow box is bigger that red one, the thing happen like you have in your image. if you don't want it, give red one the bigger zIndex.