Different behaviour for Android and iOS number of lines

[BernardoBF4]

Describe the bug The Android version of my app can dispay more than 2 lines for the text1 prop, but the iOS can't. I've create a variable to be the number of lines depending on the text passed as the text1 prop.

Steps to reproduce Steps to reproduce the behavior:

1. Create a customized error toast as specified in the code bellow.
2. Try throwing errors that use the error toast with different number of lines, for both Android and iOS

Expected behavior I'd like the toast to grow in height and number of lines depending on the number of caracters that there are in the text.

Code sample This is how I am making the number of lines be compatible with the size of text:

const ErrorToast = props => {
  const number_of_lines = Math.ceil(props.text1?.length / 30) ?? 1;

  return (
    <BaseToast
      contentContainerStyle={styles.container}
      style={styles.box}
      text1Style={styles.title}
      text1NumberOfLines={number_of_lines}
      {...props}
    />
  );
};

This is the style:

const width = Dimensions.get('window').width;

const styles = StyleSheet.create({
  box: {
    borderLeftColor: colors.red,
    width: width - 20,
  },
  container: {
    paddingHorizontal: 15,
  },
  title: {
    color: 'black',
    fontFamily: fonts.bold700,
    fontSize: 15,
    fontWeight: 'bold',
    lineHeight: 20,
  },
});

Environment (please complete the following information):

• OS: [iOS, Android]
• react-native-toast-message version: ^2.1.5
• react-native version: 0.64.2

[evo-sampath]

@BernardoBF4 did you found any solution for this?. even after 2 years I'mfacing this issue

[BernardoBF4]

@evo-sampath, I don't remember precisely what I did that made this work out fine. But here are some guesses you might want to take a look.

Here's the version:

"react-native-toast-message": "^2.1.5",

Here's the JSX code:

<BaseToast
      contentContainerStyle={style.wrapper}
      style={{ ...style.box, borderLeftColor: color }}
      text2Style={style.title}
      text2NumberOfLines={number_of_lines}
      onPress={() => Toaster.hide()}
      {...props}
    />

And here's the styling code:

export const style = StyleSheet.create({
  box: {
    height: null,
    width: width - 20,
  },
  title: {
    color: ui.colors.black_11,
    fontFamily: "Roboto",
    fontSize: 15,
    fontWeight: "normal",
    lineHeight: 20,
  },
  wrapper: {
    height: null,
    paddingHorizontal: 15,
    paddingVertical: 15,
  },
});

Hope this helps!