Position Bottom Issues, Swipeable typing missing

[Moazam05]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-toast-message@2.2.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-toast-message/lib/src/Toast.d.ts b/node_modules/react-native-toast-message/lib/src/Toast.d.ts
index 3efe69b..9c75c8f 100644
--- a/node_modules/react-native-toast-message/lib/src/Toast.d.ts
+++ b/node_modules/react-native-toast-message/lib/src/Toast.d.ts
@@ -5,3 +5,5 @@ export declare namespace Toast {
     var show: (params: ToastShowParams) => void;
     var hide: (params?: void | undefined) => void;
 }
+
+
diff --git a/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js b/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js
index 9ab2b7f..0a09e23 100644
--- a/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js
+++ b/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js
@@ -11,6 +11,6 @@ export const styles = StyleSheet.create({
         top: 0
     },
     bottom: {
-        bottom: 0
+        bottom: -10
     }
 });
diff --git a/node_modules/react-native-toast-message/lib/src/types/index.d.ts b/node_modules/react-native-toast-message/lib/src/types/index.d.ts
index e6e502e..9ab5a46 100644
--- a/node_modules/react-native-toast-message/lib/src/types/index.d.ts
+++ b/node_modules/react-native-toast-message/lib/src/types/index.d.ts
@@ -145,6 +145,7 @@ export declare type ToastProps = {
      * Default value: `4000`
      */
     visibilityTime?: number;
+    swipeable?: boolean;
     /**
      * When `true`, the visible Toast automatically hides after a certain number of milliseconds,
      * specified by the `visibilityTime` prop.

This issue body was partially generated by patch-package.

[FernandoAOborges]

"Position Bottom Issues" any fix?

"react-native": "0.76.1",

[Moazam05]

Hi @FernandoAOborges,

For the "Position Bottom Issues," I noticed you mentioned react-native: "0.76.1"

In my project, I'm using

react-native-toast-message@2.2.0 react-native: "0.75.4"

I managed to address the bottom positioning issue by applying a patch using patch-package to adjust the Toast.d.ts, AnimatedContainer.styles.js, and index.d.ts files.

[FernandoAOborges]

Hi @FernandoAOborges,

For the "Position Bottom Issues," I noticed you mentioned react-native: "0.76.1"

In my project, I'm using

react-native-toast-message@2.2.0 react-native: "0.75.4"

I managed to address the bottom positioning issue by applying a patch using patch-package to adjust the Toast.d.ts, AnimatedContainer.styles.js, and index.d.ts files.

I tested it and it didn’t work for the version react-native: '0.76.1'.

[Moazam05]

Hi @FernandoAOborges, For the "Position Bottom Issues," I noticed you mentioned react-native: "0.76.1" In my project, I'm using react-native-toast-message@2.2.0 react-native: "0.75.4" I managed to address the bottom positioning issue by applying a patch using patch-package to adjust the Toast.d.ts, AnimatedContainer.styles.js, and index.d.ts files.

I tested it and it didn’t work for the version react-native: '0.76.1'.

It's working fine with react-native '0.76.1'

I tested now

[FernandoAOborges]

  <Toast config={toastConfig} />
import React from 'react';
import { StyleSheet } from 'react-native';
import { ErrorToast, SuccessToast } from 'react-native-toast-message';

const toastConfig = {
  error: (props) => (
    <ErrorToast
      style={styles.bgError}
      text1Style={styles.textError}
      text2Style={styles.textError}
      {...props}
    />
  ),
  success: (props) => (
    <SuccessToast
      style={styles.bgSuccess}
      text1Style={styles.textSuccess}
      text2Style={styles.textSuccess}
      {...props}
    />
  ),
};

const styles = StyleSheet.create({
  bgError: {
    borderLeftColor: '#36E517',
    backgroundColor: '#F2F20C',
    borderRightColor: '#ffff00',
    borderTopColor: '#ffff00',
    borderBottomColor: '#ffff00',
    borderWidth: 1,
  },
  textError: {
    color: '#323332',
    fontFamily: 'Inter-SemiBold',
  },
  bgSuccess: {
    borderLeftColor: '#ffff00',
    backgroundColor: '#3CD921',
    borderRightColor: '#ffff00',
    borderTopColor: '#ffff00',
    borderBottomColor: '#ffff00',
    borderWidth: 1,
  },
  textSuccess: {
    color: 'white',
  },
});

export default toastConfig;

Everything here is completely bugged; it stays behind the status bar and doesn't respond to touch/move gestures.

[alainib]

same probleme for me , truncated toast with bottom params displayed in upper of the app for now i switched to "top" position until it's fixed

but close button don't close toast :(