I am creating a button over a cardView , It is working in iOS --
But it is not working same in android , it is showing like---
My code is for creating this -
<View>
<Card containerStyle={{height: 100, borderRadius: 8, borderWidth: 0}}>
<View
style={[a_styles.horizontal_space_between_verticalCenter, {backgroundColor: 'transparent',}]}>
<View style={{
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Text numberOfLines={7} style={{
fontSize: 13,
color: 'black',
fontWeight: '500',
width: responsiveWidth(50)
}}>{item.name}</Text>
<Text style={{fontSize: 10, color: 'black'}}></Text>
</View>
<View style={{
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Text style={{
fontSize: 13,
color: 'black',
fontWeight: '100'
}}>{translate("price")}</Text>
<Text
style={{
fontSize: 13,
fontWeight: '600',
color: 'black'
}}>{item.price}/-</Text>
</View>
</View>
<View style={{
backgroundColor: 'transparent',
width: "25%",
alignSelf: "flex-end",
alignItems: 'flex-end',
}}>
<TouchableOpacity style={{backgroundColor: "transparent"}} onPress={() => {
this.viewAll(item.services);
}}>
<Text style={{
fontSize: 12,
backgroundColor: "transparent",
fontWeight: '500',
color: Colors.appDarkBlueColor,
paddingBottom: responsiveHeight(1.5)
}}>{translate("view_details")}</Text>
</TouchableOpacity>
</View>
{item.discount != 0 &&
<View style={{
justifyContent: 'flex-end', backgroundColor: 'blue'
}}>
<Text style={{
textAlign: 'right',
fontSize: 10, color: 'green',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
fontWeight: '100'
}}>{item.discount} {translate('sr')}</Text>
</View>
}
<View style={{height: 7}}/>
</Card>
<SelectRentalButton isSelected={item.isSelected} onPress={() => {
return this.selectItem(item);
}}/>
</View>
I am using this component as button
<SelectRentalButton isSelected={item.isSelected} onPress={() => {
return this.selectItem(item);
}}/>
code for this component is -
<TouchableWithoutFeedback style={{ backgroundColor:"transparent"}} onPress={()=>{
if(this.props.onPress()){
this.setState({isSelected:!this.state.isSelected});
}
}}>
<View>
<View style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
elevation: 2,
backgroundColor: 'white',
height: 36,
marginLeft: 30,
marginRight: 30,
marginTop:-20,
borderRadius: 18,
borderWidth: 1,
borderColor: Colors.appDarkBlueColor,
}}>
<Text style={{
color: ALL_COLORS.theme_blue,
fontSize: responsiveFontSize(2),
fontWeight: '600'
}}>{translate("selected")}</Text>
{
this.state.isSelected &&
<View style={{
backgroundColor: Colors.appDarkBlueColor,
borderRadius: 20, height: 36,
width: 70,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: -1, top: 0
}}>
<Image source={require('../Images/cancel.png')}/>
</View>
}
</View>
</View>
</TouchableWithoutFeedback>)
this is the problem in android device , but correctly working in iOS device
I have tried
position : absolute
in button but it is not working.
is a component created in the other class.