Overlapping and Positioning Elements in React Native

Question

I'm trying to overlap elements as shown in the wireframe, as well as position them.

I've tried - position: 'relative' and the element disappears - position: 'absolute' but alignItems: 'center' does nothing

Can anyone help identify what's missing?

Wireframe of Wishlist (ignore the different header; it was from an old version)

This is what I get instead, even after using flex

I've attached code from all the separate .js files, and left out all import and export statements.

Thank you!

----------- in WishlistDetail.js------------

// Each Item on The Wishlist
const WishlistDetail = () => {
  return (
    <View>
      <WishlistCard>
        <WishlistThumbnail />
        <WishlistThumbnailFilter />
        <WishlistPrice />
        <WishlistItemDetail />
      </WishlistCard>
    </View>
  );
};


---------- in WishlistCard.js------------------


// Creating WishlistCard
const WishlistCard = (props) => {
  return (
      <View style={styles.containerStyle}>
        {props.children}
      </View>
  );
};

// WishlistCard Style
const styles = StyleSheet.create({
  containerStyle: {
    borderWidth: 0.75,
    backgroundColor: 'white',
    borderColor: 'rgb(217, 217, 217)',
    height: 125                                         // ******* not too sure
  }
});

---------- in WishlistThumbnail.js------------------

const WishlistThumbnail = () => {
    const { wishlistThumbnailStyle } = styles;
    return (
      <View>
        <Image
          style={wishlistThumbnailStyle}
          source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
        />
      </View>
    );
};

// All Styling
const styles = StyleSheet.create({
    wishlistThumbnailStyle: {
      height: 95,
      width: 95,
      padding: 20,
      position: 'absolute',
      justifyContent: 'center'
    }
});


---------- in WishlistThumbnailFilter.js------------------

// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
  return (
    <View style={styles.wishlistThumbnailFilterStyle} />
  );
};

// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
  wishlistThumbnailFilterStyle: {
    width: 160,
    borderTopColor: 'rgba(13, 13, 13, 0.05)',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopWidth: 250,
    borderLeftWidth: 0,
    borderRightWidth: 90
  }
});

---------- in WishlistPrice.js------------------

const WishlistPrice = () => {
  const { textStyle, viewStyle } = styles;
  return (
                                                                    //INSERT PRICE HERE
    <View style={viewStyle}>
      <Text style={textStyle}>30€</Text>
    </View>
  );
};

// Wishlist Price  Style
const styles = StyleSheet.create({
  viewStyle: {
    backgroundColor: 'transparent',
    padding: '3',
    // alignItems: 'flex-end',
    justifyContent: 'flex-end',
    position: 'absolute'
    // position: 'relative'
  },
  textStyle: {
    fontSize: 11.5,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(127, 127, 127)'
  }
});


---------- in WishlistItemDetail.js------------------

// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
  const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
  return (
    <View style={wishlistItemDetailStyle}>
      <Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
      <Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
    </View>
  );
};

// Header Style
const styles = StyleSheet.create({
  wishlistItemDetailStyle: {
    backgroundColor: 'transparent',
    position: 'absolute',
    padding: 5
  },
  wishlistItemTitleStyle: {
    fontSize: 15,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(51, 51, 51)'
  },
  wishlistItemTextStyle: {
    fontSize: 12,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(70, 70, 70)'
  }
});

Answer 1

without wanting to go into too much detail, this seems to look like an issue of column vs row in you flexDirection.

In order to get the style of the wireframe you provided you need to use a combination of both row and column. Check out this documentation: https://facebook.github.io/react-native/docs/flexbox.html

So one row consists of two main views styled in a flexrow and the one I marked blue is styled in a column (which is the default).

Hope this helps