calintamas / react-native-toast-message

Animated toast message component for React Native
MIT License
1.62k stars 255 forks source link

How to make the toast height dynamic based on content #474

Open bj97301 opened 1 year ago

bj97301 commented 1 year ago

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

Screenshot 2023-05-24 at 11 09 45 AM

because old people scale their text way up:

Screenshot 2023-05-24 at 11 09 56 AM

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 commented 1 year ago

if there's no way to do this feel free to use this pr: https://github.com/calintamas/react-native-toast-message/pull/475

karolChorzepa commented 1 year ago

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 commented 1 year ago

Humm interesting. I'll try that.

MAKARD commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 2 months ago

- 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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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()} ); }