React Native multi line Toast Message

user_7434025 0
Viewed 2055

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.

react-native toast
2 Answers

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.

user_101455380

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.

user_150322940
Related