react-native add '...' on the right of card to show more information - react-native

Question

I'm trying to add the 3 littles dots on the right of a card to show more information on click but cannot find how this is called.
On android it is called ""overflow menu" but the only component using overflow I found is "toolbarAndroid". I cannot use it because i work on Android & IOS.
Did you know how to do this ?
Actually i'm using "react-native-elements" for the card but they don't provide this option.
Maybe i have to create a component for that
My actual code, not using "title" props of card because i don't want to display the divider line.
renderProject(project) {
const { id, name, description, species, images } = project;
return (
<Card containerStyle={thisstyles.cardContainerStyle} key={id}>
<View>
<Text style={thisstyles.projectName}>{name}</Text>
</View>
<View style={{marginLeft:15}}>
<Text style={{color:'mediumvioletred'}}>{description}</Text>
<Text>
{species} Espèces {images} Images
</Text>
</View>
</Card>
);
}

Answer 1

As you have used custom component just add Image to show triple dots.
<View>
<Text style={thisstyles.projectName}>{name}</Text>
<Image style={position: 'absolute', right: 0}
source={require('../../path/to/image')} />
</View>
In your given module react-native-elements,
<Card
title='HELLO WORLD'
image={require('../images/pic2.jpg')}> // you can play around with this

Answer 2

You can Crate Your component Like this without any image
import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';
import {Text,Header,CardItem} from 'native-base';
class CardExample extends Component{
_renderSearchResult(){
return(
<View>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
</View>
)
}
render(){
return(
<View style={styles.container}>
{this._renderSearchResult()}
</View>
)
}
}
const styles={
container:{
flex:1,
},
cardView:{
elevation:5,
marginTop:8,
},
locationRowContainer:{
flexDirection:'row',
marginTop:21,
},
addressContainer:{
flex:3,
justifyContent:'center',
alignItems:'flex-start'
},
locationText:{
fontSize:16,
color:'black'
},
circleDot:{
backgroundColor:'black',
height:6,
width:6,
borderRadius:6/2,
marginBottom:2,
},
mapLocationContainer:{
flex:1,
justifyContent:'center',
alignItems:'flex-end'
}
}
export default CardExample;