react-native-toast-notifications icon indicating copy to clipboard operation
react-native-toast-notifications copied to clipboard

swipe behavior not working into modal

Open ebykdrms opened this issue 2 years ago • 1 comments

Problem

I am using Toast into react-native-modal (https://github.com/react-native-modal/react-native-modal) I added Toast into my ReactNativeModal component and i called it from ref. Toast showed successfully but i can't use swipe behavior for close it. I mean, toast behaves as if i used "swipeEnabled={false}" into modal.

If i use toast out of modal, it works fine.

I tried with only Android Emulator.

Code sample

I wrapped my application's root component with ToastProvider. Because i can use toast anywhere.

<ToastProvider>
  <BottomTabNavigator />
</ToastProvider>

I am using toast in my component. Both inside and outside the modal...

import { useRef, useState } from "react";
import { TouchableOpacity, View, Text } from "react-native";
import ReactNativeModal from "react-native-modal";
import Toast, { useToast } from "react-native-toast-notifications";

const MyComponent= () => {

  const [isModalVisible, setIsModalVisible] = useState(false);
  const toast = useToast();
  const modalToast = useRef();
  const closeModal = () => { setIsModalVisible(false); }

  return <>
    <TouchableOpacity onPress={() => { setIsModalVisible(true); }}>
      <Text>Open Modal</Text>
    </TouchableOpacity>

    <TouchableOpacity onPress={() => { toast.show("Hello!"); }}>
      <Text>Show Toast</Text>
    </TouchableOpacity>

    <ReactNativeModal
      useNativeDriver
      useNativeDriverForBackdrop
      onBackButtonPress={closeModal}
      onBackdropPress={closeModal}
      isVisible={isModalVisible}
      style={{ justifyContent: "flex-end", margin: 0 }}
    >
      <View style={{ backgroundColor: "#fff", padding: 20 }}>

        <TouchableOpacity onPress={() => { modalToast.current.show("Hello from modal!"); }}>
          <Text>Show Toast</Text>
        </TouchableOpacity>

      </View>

      <Toast ref={modalToast} />

    </ReactNativeModal>
  </>
}

export default MyComponent;

I looked inside modalToast.current with console.log():

console.log(modalToast.current.props);
// output: {placement: 'bottom', offset: 10, swipeEnabled: true}

console.log(modalToast.current.state);
/* output:
toasts: [
    {
        "id": "0.7988992571552278",
        "message": "Hello from modal!",
        "open": true,
        "placement": "bottom",
        "offset": 10,
        "swipeEnabled": true
    }
]
*/

It looks fine for swipe but i can't swipe.

My packet.json dependencies

software version
react 18.1.0
react-native 0.70.6
@react-navigation/bottom-tabs 6.4.0
@react-navigation/native 6.0.13
@react-navigation/native-stack 6.9.1
react-native-screens 3.18.2
@reduxjs/toolkit 1.9.0
react-redux 8.0.5
redux-persist 6.0.0
react-native-modal 13.0.1
react-native-toast-notifications 3.3.1
node 16.13.1
yarn 1.22.18

ebykdrms avatar Nov 26 '22 16:11 ebykdrms