react-native-toast-notifications
react-native-toast-notifications copied to clipboard
swipe behavior not working into modal
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 |