search

calintamas / react-native-toast-message

Animated toast message component for React Native
MIT License
1.73k stars 265 forks source link

Cannot hide toast and click any view below it. Swipe up to hide toast but the toast still appear when I swipe down. #437

Closed thongbbc closed 11 months ago

thongbbc commented 1 year ago

Describe the bug Cannot hide toast and click any view below it (Example: Header back button in video clip). And when I swipe up to hide the toast but the toast still appear again if I swipe down (cannot hide it and press the view below).

https://user-images.githubusercontent.com/29383299/206866219-d99cf0e4-49d5-42b7-8c53-4dba1e71ea0c.mov

Steps to reproduce I put the toast view out side of NavigationContainer then i see this issue.

Expected behavior The toast should update pointer-event to 'none' whenever isVisible = false

Code sample I suggest solution to fix this Update file react-native-toast-message/lib/src/components/AnimatedContainer.js Line 78 pointerEvents={'box-none'} change to pointerEvents={isVisible ? 'box-none' : 'none'}

Environment (please complete the following information):

afonsomsalvador commented 1 year ago

I have the same issue, any updates ?

calintamas commented 11 months ago

Fixed in 2.1.10

AleeFarook commented 1 month ago

@calintamas , on appearing toast message when I hold the toast for 2-3 seconds the toast freeze on top and then don't hide even when we click the cross icon, but the view behind the toast get clicked.

  ` View style={{ borderRadius: 15, zIndex: 9999, shadowOffset: { width: -2, height: 4 }, shadowColor: Colors.white, 
        shadowOpacity: 0.5, elevation: 4, shadowRadius: 3, flexDirection: 'row', alignItems: 'center', justifyContent: 'space- 
           between', backgroundColor: Colors.menuHeaderColor, width: '90%', alignSelf: 'center', paddingHorizontal: 15, 
                  paddingVertical: 10, borderColor: Colors.placeholder, borderWidth: 1 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', width: '90%' }}>
        <View style={{ height: 9, width: 9, borderRadius: 10, backgroundColor: Colors.success }}></View>

        <View style={{ paddingLeft: 12, width: '98%', flexDirection: 'row', flexWrap: 'wrap' }}>
          <Text style={{ fontSize: 14, color: Colors.white, fontFamily: 'Inter-Regular', lineHeight: 16 }}>{props.text1}</Text>
        </View>
      </View>

      <TouchableOpacity onPress={() => { Toast.hide() }} style={{ alignSelf: 'flex-end' }}>
        <CrossIcon width={30} />
      </TouchableOpacity>
    </View>`

image

Please help 🙏