Open mattychen opened 6 years ago
Bump. I am having this issue as well.
+1
Bump! (Use 60 rather than top position as a workaround)
For anyone coming across this issue, here's how I solved it:
ToastHelper
object to store all shared toast functionsuseSafeAreaInsets
from react-native-safe-area-context
top
field from this hook to position the toastimport Toast from 'react-native-root-toast';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
export const ToastHelper = {
useToast: () => {
const { top } = useSafeAreaInsets();
return {
showSuccessToast: (message) =>
Toast.show(message, {
duration: Toast.durations.LONG,
position: Math.max(Toast.positions.TOP, top),
animation: true,
hideOnPress: true,
backgroundColor: '#daf5e1',
opacity: 1,
textColor: 'black',
containerStyle: {
borderColor: '#42B362',
borderWidth: 1,
},
}),
};
},
};
import { ToastHelper } from 'shared/ToastHelper';
const MyView = () => {
const { showSuccessToast } = ToastHelper.useToast();
const onSubmit = () => {
// submit a thing
showSuccessToast('Form submitted!')
}
return <View></View>
}
Toast Position should account for SafeAreaView as default.