Can break the line with \n or <br>

[samuelprogramer]

It would simply be an observation to facilitate a line break with a "\n" for example so that we can make texts a little bigger. I apologize if for reasons this detail already exists, but so far I haven't found anything related!

[maddeye]

This is not really the most intuitive but it works for me:

// App.tsx
import React, { useEffect } from 'react';
import type { BaseToastProps } from 'react-native-toast-message';
import { BaseToast, ErrorToast, InfoToast } from 'react-native-toast-message';

const toastConfig = {
  success: (props: BaseToastProps) => (
    <BaseToast {...props} text2NumberOfLines={3} />
  ),

  error: (props: BaseToastProps) => (
    <ErrorToast {...props} text2NumberOfLines={3} />
  ),

  info: (props: BaseToastProps) => (
    <InfoToast {...props} text2NumberOfLines={3} />
  ),
};

const App = () => {
  return (
      <Toast config={toastConfig} />
  );
};

export default App;

[SocDario]

@maddeye Info Toast config is not working for me, text is still Truncated with "..." at the end. Even if I change borderLeftColor its not applyed to InfoToast, but for ErrorToast styles and numberOfLines is applied

[maddeye]

Can you share yor code snippet?

[SocDario]

const toastConfig = {
    success: (props: BaseToastProps) => (
      <BaseToast {...props} text1NumberOfLines={3} text2NumberOfLines={3} />
    ),

    error: (props: BaseToastProps) => (
      <ErrorToast
        {...props}
        style={{borderLeftColor: 'pink', height: 50}}
        text1Style={{
          color: Color.textPrimary,
          fontFamily: 'Oxygen-Regular',
        }}
        text2Style={{
          color: Color.textPrimary,
          fontFamily: 'Oxygen-Regular',
        }}
        text2NumberOfLines={2}
        text1NumberOfLines={2}
      />
    ),

    info: (props: BaseToastProps) => (
      <InfoToast {...props} text1NumberOfLines={3} text2NumberOfLines={3} />
    ),
  };

[maddeye]

This is not hardcoded, it's a default value when you don't define something yourself.

Sorry i see nothing wrong on your config. I'm not sure why it does not work for you

[tgmarinho]

I have the same issue:

import { StyledProps, useSx } from 'native-base'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import Toast, { BaseToast, BaseToastProps } from 'react-native-toast-message'

type Props = BaseToastProps & StyledProps

const BottomToast = (props: Props) => {
  const sx = useSx()

  const { bottom: safeAreaBottom } = useSafeAreaInsets()
  const bottomOffset = 40
  const toastHeight = 70

  const bottom = safeAreaBottom + bottomOffset

  return (
    <BaseToast
      text1NumberOfLines={3}
      text2NumberOfLines={3}
      {...props}
      style={sx({
        w: 'full',
        borderLeftWidth: 0,
        rounded: 0,
        position: 'absolute',
        bottom: -bottom + 'px',
        height: toastHeight + bottom + 'px',
        minHeight: toastHeight + bottom + 'px',
        maxHeight: toastHeight + bottom + 'px',
        alignItems: 'flex-start',
        ...props,
      })}
      // Using pixels to position the text correctly since this should start below the bottom safe area
      text1Style={sx({
        fontSize: '14px',
        lineHeight: '16px',
        height: '16px',
        fontWeight: 'bold',
        color: 'gray.50',
        marginTop: toastHeight / 2 - 8 + 'px',
      })}
    />
  )
}

export const BottomToastProvider = () => {
  return (
    <Toast
      position='bottom'
      visibilityTime={5000}
      autoHide
      bottomOffset={0}
      config={{
        error: (props: BaseToastProps) => {
          return <BottomToast bg='red.500' {...props} />
        },
        success: (props: BaseToastProps) => {
          return <BottomToast bg='secondary.500' {...props} />
        },
        greenSuccess: (props: BaseToastProps) => {
          return <BottomToast bg='success.500' {...props} />
        },
      }}
    />
  )
}

[SocDario]

@tgmarinho Hey, I remember that I had this issue and partly how I solved it. As I remember I had one reference in App.tsx and another reference in the modal window where I didn't passed config inside and that was the reason of missing multiple rows.