In React Native how do I put a view on top of another view with part of it lying outside the bounds of the view behind

Question

I m trying to make a layout as per below with React Native     How do I specify the position of B relative to A   With iOS Interface Builder and autoconstraints  this can very explicitly be done and is a breeze  It s not so obvious how one might achieve this with React Native

User · Answer

import React   Component  from  react   import  StyleSheet  View  from  react-native     export default class App extends Component     render         return           lt View gt    you need to wrap the two Views an another View            lt View style  styles box1  gt  lt  View gt             lt View style  styles box2  gt  lt  View gt          lt  View gt                 const styles   StyleSheet create     box1       height 100      width 100      backgroundColor  red         box2       height 100      width 100      backgroundColor  green       position   absolute       top 10      left 30

User · Answer

add the following to the  floating  view  position   absolute    you may also need to add a top and left value for positioning  see this example  https   rnplay org apps OjzcxQ edit

User · Answer

You can use this OverlayContainer  The trick is to use absolute with 100  size  Check below an example       flow  import React from  react  import   View  StyleSheet   from  react-native   type Props       behind  React Component    front  React Component    under  React Component       Show something on top of other export default class OverlayContainer extends React Component lt Props gt      render         const   behind  front  under     this props      return          lt View style  styles container  gt           lt View style  styles center  gt             lt View style  styles behind  gt               behind             lt  View gt             front           lt  View gt           under         lt  View gt               const styles   StyleSheet create     container        flex  1      alignItems   center       height   100        justifyContent   center          center        width   100        height   100        alignItems   center       justifyContent   center          behind        alignItems   center       justifyContent   center       position   absolute       left  0      top  0      width   100        height   100

User · Answer

The easiest way to achieve this is with a negative margin    const deviceWidth   RN Dimensions get  window   width  a      alignItems   center     backgroundColor   blue     width  deviceWidth     b      marginTop  -16    marginStart  20

User · Answer

You can use react-native-view-overflow plugin for placing a view on top of another  It works like the CSS z-index property   import ViewOverflow from  react-native-view-overflow     lt ViewOverflow   gt       lt View style   styles2 cardBox    marginTop  50     gt       lt View style   styles2 cardItem    gt         lt Text style  styles2 cardHeader  gt userList lt  Text gt       lt  View gt         lt View style   styles2 cardContent   gt           lt Text style  styles2 text  gt overflow   visible  lt  Text gt         lt  View gt         lt View style   styles2 cardItemFooter    gt           lt Text style  styles2 cardTextFooter  gt     lt  Text gt         lt  View gt       lt  View gt     lt  ViewOverflow gt   const styles2   StyleSheet create     cardBox        borderLeftWidth  0      borderTopWidth  0      backgroundColor   transparent       borderWidth  1      borderColor    d0d0d0       width   94        alignSelf   center       height  200      position   relative       borderRadius  15      overflow   visible     doesn t do anything        cardContent        textAlign   right       backgroundColor   transparent       marginTop  15      alignSelf   flex-end       padding  5         cardHeader        color    fff       fontFamily   Vazir       fontSize  12        cardItem        backgroundColor    3c4252       borderRadius  3      position   absolute       top  -10      right  -5      width  50      height  20      paddingRight  5

User · Answer

You can use elevation property for Android if you don t mind the shadow      elevation 1

User · Answer

You can use zIndex for placing a view on top of another  It works like the CSS z-index property - components with a larger zIndex will render on top    You can refer  Layout Props  Snippet            lt ScrollView gt             lt StatusBar backgroundColor  black  barStyle  light-content    gt             lt Image style  styles headerImage  source    uri   http   www artwallpaperhi com thumbnails detail 20140814 cityscapes 20buildings 20hong 20kong www artwallpaperhi com 18 jpg     gt               lt View style  styles back  gt                 lt TouchableOpacity gt                   lt Icons name  arrow-back  size  25  color   ffffff    gt                 lt  TouchableOpacity gt               lt  View gt               lt Image style  styles subHeaderImage  borderRadius  55  source    uri   https   upload wikimedia org wikipedia commons thumb 1 14 Albert Einstein 1947 jpg 220px-Albert Einstein 1947 jpg       gt             lt  Image gt   const styles   StyleSheet create       container            flex  1          backgroundColor   white             headerImage            height  height 150           width  deviceWidth            subHeaderImage            height  110          width  110          marginTop  height 35           marginLeft  width 25           borderColor   white           borderWidth  2          zIndex  5

User · Answer

The above solutions were not working for me  I solved it by creating a View with the same background colour as the parent and added negative margin to move the image upwards     lt ScrollView style    backgroundColor   blue     gt     lt View     style          width   95          paddingLeft   5          marginTop  80        height  800         gt       lt View style    backgroundColor   white     gt          lt Thumbnail square large source   uri  uri   style    marginTop  -30     gt         lt Text gt Some Text lt  Text gt       lt  View gt     lt  View gt   lt  ScrollView gt    and I got the following result

[react-native] In React Native, how do I put a view on top of another view, with part of it lying outside the bounds of the view behind?

Examples related to react-native