CODEWITHSUNDEEP
react-nativetoast
rod james
rod james

Reputation: 449

React Native multi line Toast Message

Good day SO.

I want to add a multiple-line toast message in React Native APP. However, it is always being cut off on line 2.

Here is my code:

let errString = errors.join("\n");
alerts(errString);

const alerts = (data) => {
  Toast.show({
    topOffset: 100,
    type: "error",
    text1: "ERROR",
    text2: `${data}`,
    visibilityTime: 500,
  });
};

On the message it will cut off like this:

A long first message
Another long second message...

My 3rd message onwards is not displayed.

Upvotes: 7

Views: 9986

Answers (3)

alcohol is evil
alcohol is evil

Reputation: 704

Set style.height="auto" and text2NumberOfLines=0.

Effect:

enter image description here

This is how I style it in version 2.2.0:

import React from "react";
import Toast, {
  BaseToast,
  BaseToastProps,
  ToastConfig,
} from "react-native-toast-message";

const toastProps: BaseToastProps = {
  text1Style: {
    fontSize: 18,
  },
  text2Style: {
    fontSize: 14,
  },
  text2NumberOfLines: 0,
  style: {
    height: "auto",
    paddingVertical: 10,
    paddingHorizontal: 0,
  },
};

export const toastConfig: ToastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#69C779",
        },
      ]}
    />
  ),
  error: (props: BaseToastProps) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#FE6301",
        },
      ]}
    />
  ),
  warning: (props) => (
    <BaseToast
      {...props}
      {...toastProps}
      style={[
        toastProps.style,
        {
          borderLeftColor: "#FFC107",
        },
      ]}
    />
  ),
};

<Toast config={toastConfig} />

Upvotes: 2

Mikołaj Wittbrodt
Mikołaj Wittbrodt

Reputation: 463

In your Toast.show you can do this like:

  Toast.show({
    topOffset: 100,
    type: "error",
    text1: "ERROR",
    text2: `${data}`,
    visibilityTime: 500,
    props: {
      text1NumberOfLines: //number of how many lines you want
    }
  });

Of course you can change this prop text1NumberOfLines to text2NumberOfLines.

Upvotes: -2

Umakant Vashishtha
Umakant Vashishtha

Reputation: 113

Pass these config in your toast config:

import Toast, {BaseToast, ErrorToast} from 'react-native-toast-message';

const toastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      style={styles.style}
      contentContainerStyle={styles.contentContainerStyle}
      text1Style={styles.text1Style}
      text1NumberOfLines={2}
      text2Style={styles.text2Style}
      text2NumberOfLines={2}
    />
  ),
  error: (props) => (
    <ErrorToast
      {...props}
      style={[styles.style, styles.errorStyle]}
      contentContainerStyle={styles.contentContainerStyle}
      text1Style={styles.text1Style}
      text1NumberOfLines={2}
      text2Style={styles.text2Style}
      text2NumberOfLines={2}
    />
  ),
};
<Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)} />

Check this link for complete customization.

Upvotes: 7

Related Questions