Text truncated on toast notification

[Nor01]

Increase container height for toast message to avoid text truncation

Steps to reproduce create an utility function to use Toast library:

import { StyleProp, TextStyle, ViewStyle } from "react-native"
import Toast, { BaseToastProps, ToastOptions, ToastType } from "react-native-toast-message"

type Severity = "success" | "error" | "info" | "warning"

interface CustomToastOptions extends ToastOptions, BaseToastProps {
  title: string
  message?: string
  severity?: Severity
  length?: "short" | "long"
  text1Style?: StyleProp<TextStyle>
  text2Style?: StyleProp<TextStyle>
  style?: StyleProp<ViewStyle>
}

export function showToast({
  title,
  message,
  severity = "info",
  length = "short",
  text1Style,
  text2Style,
  ...rest
}: CustomToastOptions) {
  const duration = length === "long" ? 5000 : 2000

  let toastType: ToastType = severity
  if (!["success", "error", "warning", "info"].includes(toastType)) {
    toastType = "info"
  }

  Toast.show({
    type: toastType,
    text1: title,
    text2: message,
    visibilityTime: duration,
    text1Style: { fontSize: 18 },
    text2Style: { fontSize: 14 },
    topOffset: 15,
    text1NumberOfLines: 5,
    text2NumberOfLines: 5,
    style: {
      height: undefined,
      minHeight: 70,
      paddingVertical: 10,
      paddingHorizontal: 0,
    },
    ...rest,
  })
}

Then you can render the component in you app.tsx:

import Toast from "react-native-toast-message"

return (
        ....
        <Toast />
        )

You can create a basic function to call the toast notification example:

    if (currentAge < 18) {
        showToast({
          title: "Invalid age",
          message: "You must be 18 years or older to continue. This is an extra text for testing and report an issue.",
          severity: "error",
        })
        return
      }

Following this other issues reported:

Issue #474 and #339

It seems that attempting to override styling through the style prop from BaseToastProps is not yielding the expected results. Despite our efforts, none of the styles are being applied or taking effect. On the bright side, the text1Style and text2Style props are functioning as anticipated.

Additionally, when delving into the node_modules/react-native-toast-message/lib/src/components/BaseToast.styles.js file, it's possible to adjust the height. However, even after increasing the height, the text remains truncated.

Environment (please complete the following information):

• OS: [iOS, Android]
• react-native-toast-message version: "^2.2.0"
• react-native version "0.71.14"

Additional context I have tried to override from utility function the base item styles from style prop in BaseToast.styles.js for example:

...
style: { base: { ... }}
...

This is not taking effect.

[daizhengqing]

no solution?

[zkteco-home]

same

[bathang313]

Can using text2NumberOfLines = 0, or text1NumberOfLines = 0, then it wraps perfectly for me.

[zkteco-home]

I tested your code,no working for me

[SKempin]

@zkteco-home Apply text1NumberOfLines in toastConfig, as shown at https://github.com/calintamas/react-native-toast-message/blob/HEAD/docs/custom-layouts.md#create-custom-layouts.

The following works for me using "react-native-toast-message": "^2.2.0". Ensure you apply to whichever layout types are in use, the below is with the error type:

   error: (props) => (
        <ErrorToast
          {...props}
          text1Style={{
            fontSize: 12,
            fontWeight: '300'
          }}
          text1NumberOfLines={0}
        />

[Steven-MKN]

Has anyone actually resolved this yet? Can I create a pr otherwise @calintamas?

[lucksp]

I thought the toast would fit the height of content? Instead it overflows toast if I use the numberOfLines prop:

info: (props: ToastOptions) => {
    const styles = toastStyles();

    return (
      <BaseToast
        {...props}
        contentContainerStyle={{ paddingHorizontal: 15 }}
        renderLeadingIcon={() => (
          <View style={styles.icon}>
            <InfoIcon {...hW} color={styles.info.borderLeftColor} />
          </View>
        )}
        style={styles.info}
        text1NumberOfLines={1}
        text1Style={styles.text1}
        text2NumberOfLines={3} // 0 also overflows
        text2Style={styles.text2}
      />
    );
  },