Quantcast
Channel: Active questions tagged touchablewithoutfeedback - Stack Overflow
Viewing all articles
Browse latest Browse all 46

Button is not showing over cardView in android but working in iOS in react native

$
0
0

I am creating a button over a cardView , It is working in iOS --

enter image description here

But it is not working same in android , it is showing like--- enter image description here

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.


Viewing all articles
Browse latest Browse all 46

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>