How to make the toast height dynamic based on content about react-native-toast-message HOT 10 OPEN

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!

from react-native-toast-message.

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

from react-native-toast-message.

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

from react-native-toast-message.

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

from react-native-toast-message.

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,
  })
}

from react-native-toast-message.

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

from react-native-toast-message.

Humm interesting. I'll try that.

from react-native-toast-message.

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

from react-native-toast-message.

- 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

from react-native-toast-message.

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

from react-native-toast-message.