kiok46/cards_with_overlaybuttons.md

## cards_with_overlaybuttons.md

      
    Raw
  

              cards_with_overlaybuttons.md
            
          
    Cool cards, with overlay buttons like in DuckDuckGo app.

How I designed it?


Make a card element (Like Material UI via google)


Divide it into 2 sections. (Position Relative)

Image
Source Icon and description


2 Buttons (Position Absolute)


Make a card element (Like Material UI via google)


Since I wanted to reuse this card element so I gave it some default styling.
	containerStyle: {
		borderWidth: 1,
		borderRadius: 2,
		borderColor: '#ddd',
		borderBottomWidth: 0,
		shadowColor: '#000',
		shadowOffset: { width: 0, height:2 },
		shadowOpacity: 0.1,
		shadowRadius: 2,
		elevation: 1,
		// marginTop: 10
		marginTop: -1,
		marginBottom: 10
	}

and made backgroundColor and marginBottom as required via props since the both were different in SearchScreen and StoriesScreen
In the searchList I made cards like this.
<Card
	  marginBottomProp={0}
    backgroundColorProp={'white'}
>

while In StoriesScreen I designed it like this.
<Card marginBottomProp={10}>


Divide it into 2 sections. (Position Relative)

Image
Source Icon and description


<Card marginBottomProp={10}>
  <CardSection>
    <Image
      style={styles.imageStyle}
      source={{ uri: this.props.story.image }}/>
  </CardSection>
  <CardSection>
    <View style={styles.thumbnailContainerStyle}>
      <Image
        style={styles.thumbnailStyle}
        source={{ uri: this.props.story.thumbnail_image }}/>
    </View>
    <View style={styles.headerContentStyle}>
      <Text
        style={styles.headerTextStyle}
        numberOfLines={2}
      >
      {"Album's name is "+ this.props.story.title}
      </Text>
    </View>
  </CardSection>
  <View style={styles.storyOverlay}>
      <TouchableOpacity style={styles.storyTypeStyle}>
      <Text style={styles.storyTypeTextStyle}>
          LightHearted
      </Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.storyTypeMenuStyle}>
      <Icon
        name='more-horiz'
        color='#fff'
      />
    </TouchableOpacity>
  </View>
</Card>

And what is the style of overlayButtons?
    storyOverlay: {
      flex: 1,
	  marginTop: 10,
	  height: 30,
      position: 'absolute',
      right: 0,
      top: 0,
	  justifyContent: 'space-around',
      flexDirection: 'row',
	  // opacity: 0.5,
	  // backgroundColor: 'black',
    },
    storyTypeStyle: {
		backgroundColor: 'black',
		opacity: 0.6,
		marginRight: 10,
		borderRadius: 5,
		padding: 3,
		alignContent: 'center'
	},
	storyTypeTextStyle: {
        color: 'white',
		fontSize: 13,
		paddingTop: 3
	},