How to make the toast height dynamic based on content

[bj97301]

Is your feature request related to a problem? Please describe.
I would like my toast height to be dynamic based on the content:

because old people scale their text way up:

Describe the solution you'd like
I was able to do this by not limiting the size in base toast:

import { StyleSheet } from 'react-native';
export const HEIGHT = 60;
export const WIDTH = 340;
export const BORDER_RADIUS = 6;
export const styles = StyleSheet.create({
    base: {
        flexDirection: 'row',
        // height: HEIGHT,
        // width: WIDTH,
        borderRadius: BORDER_RADIUS,
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.1,
        shadowRadius: BORDER_RADIUS,
        elevation: 2,
        backgroundColor: '#FFF'
    },
    leadingBorder: {
        borderLeftWidth: 5,
        borderLeftColor: '#D8D8D8'
    },

[bj97301]

if there's no way to do this feel free to use this pr:
#475

[karolChorzepa]

Is one way, set undefined in height, may is good idea to add this to docs ?
xport const notificationToastConfig = { info: (props) => ( <BaseToast {...props} style={{ height: undefined, maxHeight: 200, paddingVertical: 5 }}

[bj97301]

Humm interesting. I'll try that.

[MAKARD]

Humm interesting. I'll try that.

You can also try https://github.com/MAKARD/react-native-toastboard. Pretty similar to this package, and you can also fully control the layout

[correadevuk]

if it helps someone

import React from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";

// BaseToast styles
const HEIGHT = 60;
const WIDTH = "100%";
const BORDER_RADIUS = 5;

const styles = StyleSheet.create({
  base: {
    flexDirection: "row",
    height: HEIGHT,
    width: WIDTH,
    borderRadius: BORDER_RADIUS,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: BORDER_RADIUS,
    elevation: 2,
    backgroundColor: "#FFF",
  },
  leadingBorder: {
    borderLeftWidth: 5,
    borderLeftColor: "#D8D8D8",
  },
  contentContainer: {
    paddingHorizontal: 25,
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start",
  },
  text1: {
    fontSize: 12,
    fontWeight: "bold",
    marginBottom: 2,
    color: "#000",
    width: "100%",
  },
  text2: {
    fontSize: 10,
    color: "#979797",
    flexShrink: 1,
  },
});

const CustomBaseToast = ({ text1, text2, onPress }) => {
  return (
    <Pressable onPress={onPress} style={[styles.base, styles.leadingBorder]}>
      <View style={styles.contentContainer}>
        <Text style={styles.text1}>{text1}</Text>
        <Text style={styles.text2}>{text2}</Text>
      </View>
    </Pressable>
  );
};

export const toastConfig = {
  error: (props) => <CustomBaseToast {...props} />,
};

in app.js

<Toast config={toastConfig} />

[AbThy]

If you look around in the src/components/BaseToast.tsx component, you can find the following property: text1NumberOfLines and text2NumberOfLines. These limit the maximum number of lines that can be rendered inside the component and is defaulted to 1.

Based on the longest text that should be displayed, set these values to higher numbers. Also note that this does not change the height of the component (so you can go as high as you want). Setting the height to undefined, minHeight to a desired number and adding some padding will create the final look desirable.

Hope this helps!

[Nor01]

Hi @AbThy can you provide an snippet code example about how is supposed to be the object?

I am trying without success:

import { StyleProp, TextStyle } 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>
}

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"
  }

  const contentHeight = message ? 70 + message.length * 2 : 70

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

[ExoticCoder16]

if it helps someone

import React from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";

// BaseToast styles
const HEIGHT = 60;
const WIDTH = "100%";
const BORDER_RADIUS = 5;

const styles = StyleSheet.create({
  base: {
    flexDirection: "row",
    height: HEIGHT,
    width: WIDTH,
    borderRadius: BORDER_RADIUS,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: BORDER_RADIUS,
    elevation: 2,
    backgroundColor: "#FFF",
  },
  leadingBorder: {
    borderLeftWidth: 5,
    borderLeftColor: "#D8D8D8",
  },
  contentContainer: {
    paddingHorizontal: 25,
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start",
  },
  text1: {
    fontSize: 12,
    fontWeight: "bold",
    marginBottom: 2,
    color: "#000",
    width: "100%",
  },
  text2: {
    fontSize: 10,
    color: "#979797",
    flexShrink: 1,
  },
});

const CustomBaseToast = ({ text1, text2, onPress }) => {
  return (
    <Pressable onPress={onPress} style={[styles.base, styles.leadingBorder]}>
      <View style={styles.contentContainer}>
        <Text style={styles.text1}>{text1}</Text>
        <Text style={styles.text2}>{text2}</Text>
      </View>
    </Pressable>
  );
};

export const toastConfig = {
  error: (props) => <CustomBaseToast {...props} />,
};

in app.js

<Toast config={toastConfig} />

Someone should pin this, this is so cool, it works for me, can't thank you enough

[samad-scs]

- Setting BaseToast style:height to auto worked out for me :

<BaseToast
{...props}
style={styles?.successBackgroundMain()}
activeOpacity={0.8}
text1NumberOfLines={size.moderateScale(3)}
contentContainerStyle={styles?.successBackground()}
text1Style={[styles?.successTextHeading(), isRTL && styles?.textLeft()]}
text2Style={[styles?.successTextSubHeading(), isRTL && styles?.textLeft()]}
/>

./styles.js

export const successBackgroundMain = () => ({
  backgroundColor: color.successBg,
  width: size.deviceWidth * 0.9,
  height: 'auto',
  paddingVertical: size.moderateScale(10),
  borderColor: color.successBg,
  borderRadius: size.moderateScale(13)
})

export const successBackground = () => ({
  backgroundColor: color.successBg,
  borderColor: color.successBg,
  borderRadius: size.moderateScale(13),
  paddingHorizontal: size.moderateScale(15)
})

export const successTextHeading = () => ({
  fontSize: size.moderateScale(15),
  fontFamily: fonts.poppinsRegular,
  fontWeight: '400',
  color: color.strongGreen
})

export const textLeft = () => ({
  textAlign: 'left'
})

export const successTextSubHeading = () => ({
  color: color.strongGreen,
  fontSize: size.moderateScale(13)
})

I hope this is helpful

[Iamfavur]

If you look around in the src/components/BaseToast.tsx component, you can find the following property: text1NumberOfLines and text2NumberOfLines. These limit the maximum number of lines that can be rendered inside the component and is defaulted to 1.

Based on the longest text that should be displayed, set these values to higher numbers. Also note that this does not change the height of the component (so you can go as high as you want). Setting the height to undefined, minHeight to a desired number and adding some padding will create the final look desirable.

Hope this helps!

Thank you so much, this worked easily without any issue.
and the it is currently src/components/BaseToast.js not .tsx

[zkteco-home]

If you look around in the src/components/BaseToast.tsx component, you can find the following property: text1NumberOfLines and text2NumberOfLines. These limit the maximum number of lines that can be rendered inside the component and is defaulted to 1.
Based on the longest text that should be displayed, set these values to higher numbers. Also note that this does not change the height of the component (so you can go as high as you want). Setting the height to undefined, minHeight to a desired number and adding some padding will create the final look desirable.
Hope this helps!

Thank you so much, this worked easily without any issue. and the it is currently src/components/BaseToast.js not .tsx

How can we config text1NumberOfLines?please give demo.

[Iamfavur]

How can we config text1NumberOfLines?please give demo.

go to your node_modules folder, look for the "react-native-toast-message folder" and open it, inside of it enter lib/src/components folder and then open the "BaseToast.js" file

you can then change the value of the text1NumberOfLines from 1 to a higher value like 3.
it should work exactly the same way.

Demo of the BaseToast.js file with text1NumberOfLines and text2NumberOfLines values changed to 3 and 5 respectively from the default value of 1

import React from 'react';
import { Text, View } from 'react-native';
import { getTestId } from '../utils/test-id';
import { styles } from './BaseToast.styles';
import { Touchable } from './Touchable';
export function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 3, text1Props, text2Style, text2NumberOfLines = 5, text2Props, renderLeadingIcon, renderTrailingIcon }) {
return (<Touchable testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
{renderLeadingIcon && renderLeadingIcon()}
<View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
{(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
{text1}
)}
{(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
{text2}
)}

{renderTrailingIcon && renderTrailingIcon()}
);
}

[ulucantugberk]

baseToast.js => 'TouchableContainer' 's style,
style={{...styles.base, ...styles.leadingBorder, ...style, { height: '100%', paddingVertical: 10 }}}

delete -> numberOfLines={text2NumberOfLines}
v.2.2.0 works fine